_toolbar.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. // toolbar styles
  5. @import "global";
  6. .toolbar {
  7. background: $oil;
  8. width: 100%;
  9. font-size: 0;
  10. display: inline-block;
  11. &.label-bottom .tab .tab-content {
  12. i, img { margin-bottom: 10px; }
  13. }
  14. &.label-right .tab .tab-content {
  15. i, img { margin-right: 10px; display: inline-block;}
  16. label { display: inline-block; }
  17. }
  18. &.vertical.label-right .tab .tab-content {
  19. text-align: left;
  20. }
  21. &.vertical {
  22. height: 100%;
  23. width: auto;
  24. .tab {
  25. width: auto;
  26. margin: auto;
  27. float: none;
  28. }
  29. }
  30. .tab {
  31. text-align: center;
  32. width: 25%;
  33. margin: 0 auto;
  34. display: block;
  35. padding: 20px;
  36. float: left;
  37. &:hover {
  38. background: rgba($white, 0.1);
  39. }
  40. }
  41. }
  42. .toolbar .tab-content {
  43. font-size: 16px;
  44. text-align: center;
  45. label { color: $iron; }
  46. i {
  47. font-size: 30px;
  48. display: block;
  49. margin: 0 auto;
  50. color: $iron;
  51. vertical-align: middle;
  52. }
  53. img {
  54. width: 30px;
  55. height: 30px;
  56. display: block;
  57. margin: 0 auto;
  58. }
  59. }