107 lines
2.4 KiB
SCSS
107 lines
2.4 KiB
SCSS
|
@import "button";
|
||
|
|
@import "toolbar";
|
||
|
|
|
||
|
|
/**************
|
||
|
|
! Action-bar *
|
||
|
|
***************/
|
||
|
|
|
||
|
|
@include exports("actionbar") {
|
||
|
|
.action-bar {
|
||
|
|
@include linear-gradient($bg_color);
|
||
|
|
|
||
|
|
padding: $spacing;
|
||
|
|
border-width: 1px 0 0 0;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: border_normal($bg_color);
|
||
|
|
color: $fg_color;
|
||
|
|
|
||
|
|
.button {
|
||
|
|
&.text-button { padding: $spacing - 1px; }
|
||
|
|
|
||
|
|
&.image-button { padding: $spacing + 1px; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font: bold;
|
||
|
|
padding: 0 ($spacing * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font: smaller;
|
||
|
|
padding: 0 ($spacing * 2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***************
|
||
|
|
! Search bars *
|
||
|
|
****************/
|
||
|
|
|
||
|
|
@include exports("searchbar") {
|
||
|
|
.search-bar {
|
||
|
|
@include linear-gradient(shade($bg_color, 0.98));
|
||
|
|
|
||
|
|
border-width: 0 0 1px 0;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: border_normal($bg_color);
|
||
|
|
color: $fg_color;
|
||
|
|
|
||
|
|
.button.close-button { padding: $spacing; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/******************
|
||
|
|
! Action buttons *
|
||
|
|
*******************/
|
||
|
|
|
||
|
|
@include exports("actionbuttons") {
|
||
|
|
$types: (
|
||
|
|
suggested: $selected_bg_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(shade($selected_bg_color, 1.68), shade($selected_bg_color, 0.8));
|
||
|
|
|
||
|
|
&.suggested-action { @extend .suggested-action.button; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.selection-menu.button {
|
||
|
|
border: none;
|
||
|
|
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; }
|
||
|
|
}
|
||
|
|
}
|