_buttons.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. .button {
  2. @extend %button;
  3. @include button-color(lighten($secondary-accent-bg, 10%));
  4. &.dropdown-toggle {
  5. border-left: 1px solid lighten($secondary-accent-bg, 5%);
  6. }
  7. &.secondary {
  8. @include button-color(shade($secondary-accent-bg, 20%));
  9. &.dropdown-toggle {
  10. border-left: 1px solid lighten(shade($secondary-accent-bg, 20%), 5%);
  11. }
  12. }
  13. }
  14. .button-group {
  15. position: relative;
  16. display: inline-block;
  17. vertical-align: middle;
  18. // real button
  19. > .button:first-child:not(:last-child):not(.dropdown-toggle) {
  20. border-top-right-radius: 0 !important;
  21. border-bottom-right-radius: 0 !important;
  22. }
  23. > .button:first-child {
  24. margin-left: 0 !important;
  25. }
  26. > .button {
  27. position: relative;
  28. float: left;
  29. }
  30. // toggle caret
  31. > .button + .dropdown-toggle {
  32. text-align: center;
  33. padding-right: 8px;
  34. padding-left: 8px;
  35. i {
  36. margin: 0;
  37. }
  38. }
  39. > .button:last-child:not(:first-child), > .dropdown-toggle:not(:first-child) {
  40. border-top-left-radius: 0 !important;
  41. border-bottom-left-radius: 0 !important;
  42. }
  43. .button + .button, .button + .button-group, .button-group + .button, .button-group + .button-group {
  44. margin-left: -1px;
  45. }
  46. .dropdown-menu {
  47. position: absolute;
  48. top: 100%;
  49. left: 0;
  50. right: 0;
  51. z-index: 1000;
  52. display: none;
  53. float: left;
  54. min-width: 160px;
  55. padding: 5px 0;
  56. margin: 2px 0 0;
  57. font-size: 14px;
  58. text-align: left;
  59. list-style: none;
  60. background-color: lighten($secondary-accent-bg, 10%);
  61. -webkit-background-clip: padding-box;
  62. background-clip: padding-box;
  63. border: 1px solid lighten($secondary-accent-bg, 5%);
  64. border: 1px solid rgba(0, 0, 0, .15);
  65. border-radius: 4px;
  66. -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  67. box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  68. &.language-switcher {
  69. min-width: auto;
  70. }
  71. &.lang-switcher {
  72. min-width: 150px;
  73. left: inherit;
  74. button {
  75. width: 100%;
  76. }
  77. }
  78. .divider {
  79. height: 1px;
  80. margin: 9px 0;
  81. overflow: hidden;
  82. background-color: $secondary-accent-bg;
  83. }
  84. li > a {
  85. display: block;
  86. padding: 3px 20px;
  87. clear: both;
  88. font-weight: 400;
  89. line-height: 1.42857143;
  90. color: $white;
  91. white-space: nowrap;
  92. &:focus, &:hover {
  93. color: $white;
  94. text-decoration: none;
  95. background-color: $secondary-accent-bg;
  96. }
  97. }
  98. &.language-switcher {
  99. a.active {
  100. background-color: #349886
  101. }
  102. }
  103. }
  104. }
  105. .open > .dropdown-menu {
  106. display: block;
  107. }
  108. .dropdown-backdrop {
  109. position: fixed;
  110. top: 0;
  111. right: 0;
  112. bottom: 0;
  113. left: 0;
  114. z-index: 990;
  115. }