* Implement inline-toolbar background color and border. (#468)

pull/471/head
Csaba Jakosa 2016-06-02 08:47:39 +02:00 committed by Khurshid Alam
parent e99d167adf
commit 4fb890854c
2 changed files with 21 additions and 3 deletions

View File

@ -105,7 +105,7 @@ $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, .5);
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
$backdrop_selected_fg_color: mix($selected_bg_color, $selected_fg_color, .66); $backdrop_selected_fg_color: mix($selected_bg_color, $selected_fg_color, .66);
$backdrop_borders_color: mix($bg_color, $borders_color, .9); $backdrop_borders_color: mix($bg_color, $borders_color, .9);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, .35); $backdrop_dark_fill: mix($backdrop_bg_color, $backdrop_borders_color, .35);
$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, .5); $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, .5);
$backdrop_osd_base: $osd_base; $backdrop_osd_base: $osd_base;

View File

@ -63,11 +63,29 @@
&.inline-toolbar { &.inline-toolbar {
background-image: none; background-image: none;
background-color: transparent; border-width: 0 1px 1px;
border-style: solid;
border-color: $borders_color;
background-color: mix($borders_color, $bg_color, .7);
&:backdrop {
border-color: $backdrop_borders_color;
background-color: $backdrop_dark_fill;
transition: 200ms ease-out;
}
button { @include button($toolbar_bg_color, $toolbar_fg_color); } button { @include button($toolbar_bg_color, $toolbar_fg_color); }
.linked > button { @include linked_button($toolbar_bg_color); } toolbutton,
toolbutton:backdrop {
> button.flat { @extend %linked_middle; }
&:first-child > button.flat { @extend %linked_button:first-child; }
&:last-child > button.flat { @extend %linked_button:last-child; }
&:only-child > button.flat { @extend %linked_button:only-child; }
}
} }
} }