123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- $breadcrumb-button-cmp-cls: dynamic('breadcrumb-');
- $breadcrumb-button-cmp-ui: dynamic('default');
- $breadcrumb-base-color: dynamic($base-color);
- $breadcrumb-glyph-color: dynamic(#f0f0f0);
- $breadcrumb-folder-glyph-color: dynamic($breadcrumb-glyph-color);
- $breadcrumb-leaf-glyph-color: dynamic($breadcrumb-glyph-color);
- $breadcrumb-split-border-width: dynamic(1px);
- $breadcrumb-button-spacing: dynamic(3px);
- $button-breadcrumb-color: dynamic($button-default-color);
- $button-breadcrumb-color-over: dynamic($button-default-color-over);
- $button-breadcrumb-color-focus: dynamic($button-default-color-focus);
- $button-breadcrumb-color-focus-over: dynamic($button-default-color-focus-over);
- $button-breadcrumb-color-pressed: dynamic($button-default-color-pressed);
- $button-breadcrumb-color-pressed-over: dynamic($button-default-color-pressed-over);
- $button-breadcrumb-color-focus-pressed: dynamic($button-default-color-focus-pressed);
- $button-breadcrumb-color-disabled: dynamic($button-default-color-disabled);
- $button-breadcrumb-background-color: dynamic(transparent);
- $button-breadcrumb-background-color-over: dynamic(#aeaeae);
- $button-breadcrumb-background-color-focus: dynamic($button-default-background-color-focus);
- $button-breadcrumb-background-color-pressed: dynamic(#e6e6e6);
- $button-breadcrumb-background-color-pressed-over: dynamic($button-default-background-color-pressed-over);
- $button-breadcrumb-background-color-focus-over: dynamic($button-default-background-color-focus);
- $button-breadcrumb-background-color-focus-pressed: dynamic($button-default-background-color-focus-pressed);
- $button-breadcrumb-background-color-disabled: dynamic(transparent);
- $button-breadcrumb-focus-over-border-width: dynamic($button-default-focus-over-border-width);
- $button-breadcrumb-focus-over-border-color: dynamic($button-default-focus-over-border-color);
- $button-breadcrumb-opacity-disabled: dynamic($button-toolbar-opacity-disabled);
- @mixin extjs-breadcrumb-graphite-ui (
- $ui: null,
-
- $color: null,
- $color-over: null,
- $color-focus: null,
- $color-focus-over: null,
- $color-pressed: null,
- $color-pressed-over: null,
- $color-focus-pressed: null,
-
- $background-color: null,
- $background-color-over: null,
- $background-color-focus: null,
- $background-color-focus-over: null,
- $background-color-pressed: null,
- $background-color-pressed-over: null,
- $background-color-focus-pressed: null,
-
- $inner-border-width-focus-over: null,
- $inner-border-color-focus-over: null,
-
- $opacity-disabled: null
- ) {
- $button-ui: '#{$ui}-small';
-
- .#{$prefix}breadcrumb-btn.#{$prefix}btn-#{$button-ui} {
- background-color: $background-color;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after {
- background: none !important;
- @include font-icon($breadcrumb-arrow-glyph, $pseudo: false);
- }
-
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color;
- }
- }
-
- &.#{$prefix}btn-over {
- background-color: $background-color-over;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-over;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-over;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-over;
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
- }
-
- &.#{$prefix}btn-pressed,
- &.#{$prefix}btn-menu-active {
- background-color: $background-color-pressed;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after {
- background: none !important;
- @include font-icon($breadcrumb-arrow-expanded-glyph, $pseudo: false);
- }
-
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-pressed;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-pressed;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-pressed;
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
-
- &.#{$prefix}btn-over {
- background-color: $background-color-pressed-over;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-pressed-over;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-pressed-over;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-pressed-over;
- }
- }
- }
- }
-
- // TODO Breadcrumb buttons are not supposed to have their arrow el focused
- .#{$prefix}keyboard-mode &.#{$prefix}btn-focus,
- .#{$prefix}keyboard-mode &.#{$prefix}arrow-focus {
- background-color: $background-color-focus;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-focus;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-focus;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-focus;
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
-
- &.#{$prefix}btn-over {
- background-color: $background-color-focus-over;
-
- @include inner-border($inner-border-width-focus-over, $inner-border-color-focus-over);
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-focus-over;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-focus-over;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-focus-over;
- }
- }
- }
-
- &.#{$prefix}btn-pressed,
- &.#{$prefix}btn-menu-active {
- background-color: $background-color-focus-pressed;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-focus-pressed;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-focus-pressed;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-focus-pressed;
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
-
- &.#{$prefix}btn-over {
- background-color: $background-color-focus-pressed;
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: $color-focus-pressed;
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: $color-focus-pressed;
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: $color-focus-pressed;
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
- }
- }
- }
- &.#{$prefix}btn-disabled {
- background-color: rgba($background-color, $opacity-disabled);
-
- .#{$prefix}btn-wrap-#{$button-ui} {
- &.#{$prefix}btn-arrow:after,
- &.#{$prefix}btn-split:after {
- color: rgba($color, $opacity-disabled);
- }
-
- .#{$prefix}btn-inner-#{$button-ui} {
- color: rgba($color, $opacity-disabled);
- }
-
- .#{$prefix}btn-icon-el-#{$button-ui} {
- color: rgba($color, $opacity-disabled);
- }
-
- &.#{$prefix}btn-split .#{$prefix}btn-button:after {
- content: none;
- }
- }
- }
- }
- }
|