Commit bfd4933a authored by Lapo Calamandrei's avatar Lapo Calamandrei

Adwaita: first round of OSD style converage

Some code refactoring, entry and spinbuttons and flat buttons
styled, more to come...
parent b0313c7b
......@@ -22,7 +22,10 @@ $success_color: if($variant == 'light', #73d216, darken(#73d216,10%));
$destructive_color: if($variant == 'light', #ef2929, darken(#ef2929,10%));
$osd_fg_color: #eeeeec;
$osd_text_color: white;
$osd_bg_color: #2e3436;
$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 50%);
$osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize(white, 0.9);
......
......@@ -202,7 +202,11 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
%osd, .osd {
color: $osd_fg_color;
border-color: $osd_outer_borders_color;
background-color: transparentize($osd_bg_color, 0.3);
background-clip: padding-box;
outline-color: transparentize($osd_fg_color, 0.7);
box-shadow: none;
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
&:backdrop { text-shadow: none; }
......@@ -400,6 +404,11 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
}
}
}
.osd & {
@include entry(osd);
&:focus { @include entry(osd-focus); }
&:backdrop { @include entry(osd-backdrop); }
}
}
/***********
......@@ -496,13 +505,11 @@ $_dot_color: if($variant=='light', $selected_bg_color,
&:active, &:checked {
@include button(osd-active);
border-color: $osd_outer_borders_color;
box-shadow: none
box-shadow: none;
}
&:insensitive, &:backdrop:insensitive {
@include button(osd-insensitive);
border-color: $osd_outer_borders_color;
// FIXME: if this state actually exists we should probably make the button
// disappear
}
&:backdrop {
@include button(osd-backdrop);
......@@ -511,9 +518,6 @@ $_dot_color: if($variant=='light', $selected_bg_color,
}
//overlay / OSD style
.osd & {
// FIXME: for some reason I can't figure out the bookmark button in gnome
// documents gets borders radius 0, when they get backdrop and
// another state
@include button(osd);
// there's a problem with sass which prevents it to extend the linked
// placeholder as expected, it should just be "@extend %linked;", the
......@@ -556,6 +560,31 @@ $_dot_color: if($variant=='light', $selected_bg_color,
@include button(osd-backdrop);
@extend %linked;
}
&.flat {
@include button(undecorated);
box-shadow: none; //FIXME respect no edge on the button mixin
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
&:hover {
@include button(osd-hover);
background-clip: padding-box;
border-color: transparent;
box-shadow: none;
}
&:insensitive {
@include button(osd-insensitive);
background-image: none;
border-color: transparent;
box-shadow: none;
}
&:backdrop { @include button(undecorated); }
&:active, &:checked {
@include button(osd-active);
background-clip: padding-box;
border-color: transparent;
box-shadow: none;
}
}
}
// Suggested and Destructive Action buttons
......@@ -904,6 +933,42 @@ GtkColorButton.button {
&:dir(rtl) { border-style: none solid none none; }
}
}
.osd & {
.button {
@include button(undecorated);
color: $osd_fg_color;
border-style: none none none solid;
border-color: transparentize($osd_borders_color, 0.3);
border-radius: 0;
box-shadow: none;
icon-shadow: 0 1px black;
&:dir(rtl) { border-style: none solid none none; }
&:hover {
@include button(undecorated);
color: $osd_fg_color;
border-color: transparentize($osd_borders_color, 0.3);
background-color: transparentize($osd_fg_color, 0.9);
icon-shadow: 0 1px black;
box-shadow: none;
}
&:backdrop {
@include button(undecorated);
color: $osd_fg_color;
border-color: transparentize($osd_borders_color, 0.3);
icon-shadow: none;
box-shadow: none;
}
&:insensitive {
@include button(undecorated);
color: $osd_insensitive_fg_color;
border-color: transparentize($osd_borders_color, 0.3);
icon-shadow: none;
box-shadow: none;
}
&:last-child { border-radius: 0 3px 3px 0; }
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
}
}
&.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
.button {
padding-top: 8px; // Same vertical padding as image-buttons
......@@ -1503,21 +1568,7 @@ column-header.button.dnd { // for treeview-like derive widgets
text-shadow: none;
transition: none;
}
&.osd { // Also used for touch cut'n'paste overlays
// FIXME Doesn't work
background-image: none;
background-color: $osd_bg_color;
border: 1px solid $borders_color;
color: $osd_fg_color;
.button {
color: white;
text-shadow: none;
@include button(osd);
&:hover { @include button(osd-hover); };
&:active { @include button(osd-active); };
&:insensitive { @include button(osd-insensitive); };
}
}
&.osd { @extend %osd; }
}
//touch selection handlebars for the Popover.osd above
......
......@@ -44,7 +44,7 @@
// use the default one
//
// possible $t values:
// normal, focus, insensitive, backdrop, backdrop-insensitive;
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
//
background-color: transparent;
background-image: entry_gradient($base_color);
......@@ -92,6 +92,30 @@
background-image: linear-gradient(to bottom, $insensitive_bg_color);
@include _shadows($_blank_inner_shadows, $_blank_edge);
}
@if $t==osd {
color: $osd_text_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.5));
box-shadow: none;
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
}
@if $t==osd-focus {
color: $osd_text_color;
border-color: $selected_bg_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.5));
box-shadow: entry_focus_glow($selected_bg_color);
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
}
@if $t==osd-backdrop {
color: $osd_text_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.5));
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
}
// buttons
......@@ -327,8 +351,7 @@
background-clip: padding-box;
background-image: linear-gradient(to bottom, $_bg);
border-color: $osd_borders_color;
box-shadow: inset 0 -1px transparentize(black, 0.7),
inset 0 1px transparentize(white, 0.9);
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
}
......@@ -342,8 +365,7 @@
color: white;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, $_bg);
box-shadow: inset 0 -1px transparentize(black, 0.7),
inset 0 1px transparentize(white, 0.9);
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
......@@ -365,9 +387,9 @@
//
// insensitive osd button
//
$_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
$_bg: transparentize($osd_insensitive_bg_color,0.5);
color: $insensitive_fg_color;
color: $osd_insensitive_fg_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, $_bg);
box-shadow: none;
......@@ -382,8 +404,8 @@
transparentize($osd_bg_color, 0.3));
color: $osd_fg_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, $_bg);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment