@import "button"; @import "toolbar"; /************** ! Action-bar * ***************/ @include exports("actionbar") { actionbar > revealer > box { padding: $spacing; border-top: 1px solid $borders_color; &:backdrop { border-color: $backdrop_borders_color; } } } /*************** ! Search bars * ****************/ @include exports("searchbar") { .search-bar { @include linear-gradient(shade($bg_color, .98)); border-width: 0 0 1px; border-style: solid; border-color: border_normal($bg_color); color: $fg_color; .button.close-button { padding: $spacing; } } } /****************** ! Action buttons * *******************/ @include exports("actionbuttons") { $types: ( suggested: $success_color, destructive: $error-color ); @each $type, $color in $types { .#{$type}-action.button { @include button($color, $selected_fg_color); } } } /****************** * selection mode * ******************/ @include exports("selectionmode") { .selection-mode { &.header-bar, &.toolbar { @include toolbar($selected_bg_color, $selected_fg_color); .button { @include button($selected_bg_color, $selected_fg_color); &.suggested-action { @extend .suggested-action.button; } } .selection-menu.button { border: 0; background-color: transparent; background-image: none; color: shade($selected_bg_color, $contrast); &:hover { color: shade($selected_bg_color, ($contrast - .1)); } &:active { color: shade($selected_bg_color, ($contrast - .05)); } } .dim-label { &, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); } } } &.toolbar { padding: $spacing; } } }