123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409 |
- /**
- *
- *
- * @param {string} $primary-stylename (v-menubar) -
- * @param {bool} $include-additional-styles -
- *
- * @group menubar
- */
- @mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
-
- .#{$primary-stylename} {
- @include valo-button-static-style($states: normal focus disabled, $vertical-centering: false);
- @include valo-menubar-style;
- }
-
- .#{$primary-stylename}:active:after {
- background: transparent;
- }
-
- .#{$primary-stylename} > .#{$primary-stylename}-menuitem {
- @include valo-menubar-menuitem-style;
- }
-
- .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked {
- @include valo-menubar-menuitem-checked-style;
- }
-
- .v-disabled > .#{$primary-stylename}-menuitem,
- .#{$primary-stylename} > .#{$primary-stylename}-menuitem-disabled {
- cursor: default;
-
- &:before {
- display: none;
- }
- }
-
- .#{$primary-stylename}-menuitem-disabled {
- @include opacity($v-disabled-opacity);
- }
-
- .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected {
- @include valo-button-style($states: normal, $background-color: $v-selection-color, $border-radius: 0, $shadow: null, $unit-size: null, $font-weight: null);
- border-top-width: 0;
- border-left-width: 0;
- border-bottom-width: 0;
- z-index: 2;
-
- &:hover:before {
- background: none;
- }
- }
-
- .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator {
- display: none;
-
- + .#{$primary-stylename}-menuitem-caption:after {
- font-family: ThemeIcons;
- content: "\f078";
- font-size: 0.7em;
- vertical-align: .15em;
- margin: 0 -.2em 0 .5em;
- // IE filters are not supported on pseudo elements
- opacity: .5;
- }
-
- + .#{$primary-stylename}-menuitem-caption:empty:after {
- margin-left: -.2em;
- }
- }
-
- .#{$primary-stylename}-popup {
- @include valo-menubar-popup-style($primary-stylename);
- }
-
-
- @if $include-additional-styles {
- .#{$primary-stylename}-small {
- @include valo-menubar-style($background-color: null, $unit-size: $v-unit-size--small);
- font-size: $v-font-size--small;
- }
-
- .#{$primary-stylename}-borderless {
- @include valo-menubar-borderless-style;
- }
- }
-
- }
-
-
-
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-menubar) -
- * @param {color} $background-color ($v-background-color) -
- * @param {size} $unit-size ($v-unit-size) -
- *
- * @group menubar
- */
- @mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) {
- @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size);
- padding: 0;
- text-align: left;
-
- @if $unit-size {
- line-height: $unit-size - first-number($v-border) * 2;
-
- > .#{$primary-stylename}-menuitem {
- padding: 0 round($unit-size/2.6);
-
- &[class*="-icon-only"] {
- width: $unit-size;
- }
- }
- }
- }
-
-
-
-
- /**
- *
- *
- *
- * @group menubar
- */
- @mixin valo-menubar-menuitem-style {
- $border-width: first-number($v-border);
- position: relative;
- z-index: 1;
- display: inline-block;
- @include box-sizing(border-box);
- @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
- background: transparent;
- @include box-shadow(none);
- border-width: 0 $border-width 0 0;
- border-color: inherit;
- height: 100%;
- line-height: inherit;
- vertical-align: top;
- text-align: center;
-
- @if $border-width == 0 {
- margin-right: 1px;
- }
-
- $br: max(0, $v-border-radius - $border-width);
- &:first-child {
- border-left-width: 0;
- @if $v-border-radius > 0 {
- border-radius: $br 0 0 $br;
- }
- }
-
- &:last-child {
- @if $v-border-radius > 0 {
- border-radius: 0 $br $br 0;
- }
- border-right-width: 0;
- }
-
- &:first-child:last-child {
- @if $v-border-radius > 0 {
- border-radius: $br;
- }
- }
-
- &:before {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border-radius: inherit;
- }
-
- @if $v-hover-styles-enabled {
- &:hover {
- // IE needs some nudging to show the :before element
- zoom: 1;
-
- &:before {
- @include valo-button-hover-style;
- border: none;
- }
- }
- }
-
- &:active:before {
- @include valo-button-active-style;
- }
-
- $margin-width: ceil($v-unit-size/2.4/5);
- .v-icon {
- margin: 0 $margin-width 0 #{-$margin-width};
- cursor: inherit;
- }
-
- &[class*="-icon-only"] {
- width: $v-unit-size;
- padding: 0;
-
- .v-icon {
- margin: 0;
- }
- }
- }
-
-
-
-
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-menubar) -
- *
- * @group menubar
- */
- @mixin valo-menubar-popup-style ($primary-stylename: v-menubar) {
- @include valo-selection-overlay-style;
-
- margin: ceil($v-unit-size/8) 0 0 1px !important;
-
- .#{$primary-stylename}-submenu {
- outline: none;
- }
-
- .#{$primary-stylename}-menuitem {
- display: block;
- @include valo-selection-item-style;
- padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon
- padding-right: $v-unit-size;
- position: relative;
- }
-
- .#{$primary-stylename}-submenu-indicator {
- display: none;
-
- + .#{$primary-stylename}-menuitem-caption:after {
- position: absolute;
- right: $v-selection-item-padding-horizontal;
- @include valo-menubar-submenu-indicator-style;
- }
- }
-
- .#{$primary-stylename}-menuitem-selected {
- @include valo-selection-item-selected-style;
- }
-
- .#{$primary-stylename}-separator {
- display: block;
- margin: $v-selection-overlay-padding-vertical 0;
- height: 0;
- overflow: hidden;
- border-bottom: valo-border($color: $v-overlay-background-color, $strength: 0.5);
- @if first-number($v-border) == 0 {
- border-bottom-width: 1px;
- }
- }
-
- [class*="checked"] .#{$primary-stylename}-menuitem-caption:before {
- @include valo-menubar-checked-icon-style;
- position: absolute;
- left: $v-selection-item-padding-horizontal;
- }
-
- [class*="unchecked"] .#{$primary-stylename}-menuitem-caption:before {
- content: "";
- }
-
- [class*="disabled"] {
- cursor: default;
- }
- }
-
-
-
- /**
- *
- *
- *
- * @group menubar
- */
- @mixin valo-menubar-submenu-indicator-style {
- font-family: ThemeIcons;
- content: "\f054";
- line-height: $v-selection-item-height + 2px;
- }
-
- /**
- *
- *
- *
- * @group menubar
- */
- @mixin valo-menubar-checked-icon-style {
- content: "\f00c";
- font-family: ThemeIcons;
- }
-
-
- /**
- *
- *
- * @param {list} $background-color -
- *
- * @group menubar
- */
- @mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) {
- $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
- @include box-shadow(none);
- @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top);
- color: valo-font-color($background-color, 0.9);
- }
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-menubar) -
- *
- * @group menubar
- */
- @mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
- .#{$primary-stylename}-menuitem-checked {
- @include valo-menubar-menuitem-checked-style($background-color: $background-color);
- }
- }
-
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-menubar) -
- *
- * @group menubar
- */
- @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
- border: none;
- border-radius: 0;
- padding: first-number($v-border);
- @include box-shadow(none);
- text-shadow: none;
- background: transparent;
- color: inherit;
-
- &:focus:after {
- display: none;
- }
-
- .#{$primary-stylename}-menuitem {
- @include box-shadow(none);
- border: none;
- margin-right: max(1px, first-number($v-border));
- border-radius: $v-border-radius;
- color: $v-selection-color;
- padding: 0 round($v-unit-size/3);
-
- @if $v-animations-enabled {
- @include transition(color 140ms);
- }
-
- &:first-child,
- &:last-child,
- &:first-child:last-child {
- border-radius: $v-border-radius;
- }
-
- &:before {
- content: none;
- }
-
- &:hover {
- color: lighten($v-selection-color, 10%);
- }
-
- &:active {
- color: inherit;
- }
- }
-
- .#{$primary-stylename}-menuitem-checked,
- .#{$primary-stylename}-menuitem-checked:first-child {
- border: valo-border();
- color: $v-selection-color;
-
- .#{$primary-stylename}-menuitem-caption {
- position: relative;
- top: first-number($v-border)*-1;
- }
- }
-
- .#{$primary-stylename}-menuitem-selected {
- $font-color: valo-font-color($v-selection-color, 0.9);
- color: $font-color;
- text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color);
-
- &:hover {
- color: $font-color;
- }
- }
-
- .#{$primary-stylename}-menuitem-disabled,
- .#{$primary-stylename}-menuitem-disabled:hover {
- color: inherit;
- }
- }
|