Adwaita: border rationalization and cleanup

Rely only on border-style for border, take out border-width and
border-style from drawing functions.
This commit is contained in:
Lapo Calamandrei 2014-08-28 15:42:17 +02:00
parent 5ad60caa3c
commit 68d6968955
4 changed files with 76 additions and 441 deletions

View File

@ -208,6 +208,7 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
****************/
.entry {
border: 1px solid;
padding: 5px 8px 6px;
&.image { // icons inside the entry
&.left { padding-left: 0; }
@ -316,6 +317,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
.button {
border: 1px solid;
border-radius: 3px;
transition: all 200ms ease-out;
padding: 5px 8px 6px;
@ -708,14 +710,14 @@ GtkColorButton.button {
.spinbutton {
.button {
background-image: none;
border-width: 0 0 0 1px;
border-style: none none none solid;
border-color: transparentize($borders_color,0.7);
color: mix($fg_color,$base_color,95%);
border-radius: 0;
box-shadow: none;
// padding-left: 6px;
// padding-right: 6px;
&:dir(rtl) { border-width: 0 1px 0 0; }
&:dir(rtl) { border-style: none solid none none; }
&:hover {
color: $fg_color;
background-color: transparentize($fg_color,0.95);
@ -734,8 +736,8 @@ GtkColorButton.button {
&:backdrop:insensitive {
background-image: none;
color: transparentize($backdrop_insensitive_color,0.7);
border-width: 0 0 0 1px; // It is needed or it gets overridden
&:dir(rtl) { border-width: 0 1px 0 0; }
border-style: none none none solid; // It is needed or it gets overridden
&:dir(rtl) { border-style: none solid none none; }
}
}
&.vertical, &.vertical:dir(rtl) {
@ -795,11 +797,11 @@ GtkColorButton.button {
}
%top_button {
border-radius: 3px 3px 0 0;
border-bottom-width: 0;
border-style: solid solid none solid;
}
%bottom_button {
border-radius: 0 0 3px 3px;
border-top-width: 0;
border-style: none solid solid solid;
}
}
/* This is to fix spinbuttons in entries, but I feel like hiding code issues
@ -1146,7 +1148,7 @@ column-header.button.dnd { // for treeview-like derive widgets
%column_header_button {
padding: 3px 6px;
border-width: 0 1px 1px 0;
border-style: none solid solid none;
border-radius: 0;
background-image: none;
border-color: $bg_color;
@ -1157,7 +1159,7 @@ column-header.button.dnd { // for treeview-like derive widgets
}
&:backdrop {
border-color: $backdrop_bg_color;
border-width: 0 1px 1px 0;
border-style: none solid solid none;
color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
background-image: none;
background-color: $backdrop_base_color;
@ -1227,7 +1229,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
margin: 4px;
padding: 0px;
background-color: $base_color;
//border: 1px solid $borders_color;
.menuitem {
text-shadow: none;
padding: 4px;
@ -1259,9 +1260,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
.popover {
margin: 10px;
padding: 2px;
border-color: $borders-color;
border-width: 1px;
border-style: solid;
border: 1px solid $borders-color;
border-radius: 5px;
//background-clip: border-box;
background-color: $bg_color;
@ -1620,7 +1619,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
**********/
GtkSwitch {
// FIXME: backdrop insensinsitive slider on the dark variant
-GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
// as buttons, not doing that for now
font-weight: bold;
@ -1631,10 +1629,8 @@ GtkSwitch {
// clipped
&.trough {
// similar to the .scale
border-width: 1px;
border-style: solid;
border: 1px solid $borders_color;
border-radius: 3px;
border-color: $borders_color;
background-image: linear-gradient(to bottom,
mix($bg_color,$borders_color,60%));
text-shadow: 0 1px transparentize(black, 0.9);
@ -1682,6 +1678,7 @@ GtkSwitch {
}
&.slider,
.list-row:selected &.slider {
border: 1px solid;
border-radius: 3px;
@include button(normal, $noedge: true);
box-shadow: inset 0 1px if($variant=='light', white,
@ -1817,6 +1814,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
&.slider {
//FIXME: better gradient on the slider and hover state
@include button(normal, $noedge: true);
border: 1px solid;
border-radius: 50%;
border-color: darken($borders_color,3%);
box-shadow: inset 0 1px if($variant=='light', white,
@ -1863,10 +1861,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
}
&.trough {
border-width: 1px;
border-style: solid;
border: 1px solid $borders_color;
border-radius: 3px;
border-color: $borders_color;
background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9),
$widget_edge;
@ -1994,10 +1990,8 @@ GtkProgressBar {
// moving bit
.progressbar {
@include progressbar_fill;
border-width: 1px;
border-style: solid;
border: 1px solid $selected_borders_color;
border-radius: 1.5px;
border-color: $selected_borders_color;
box-shadow: none; //needed for clipping
&.left {
border-top-left-radius: 3px;
@ -2030,7 +2024,7 @@ GtkProgressBar {
box-shadow: none;
}
&.osd {
border-width: 0;
border-style: none;
border-radius: 0;
-GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 2px;
@ -2040,22 +2034,18 @@ GtkProgressBar {
// background
GtkProgressBar.trough {
border-width: 1px;
border-style: solid;
border: 1px solid $borders_color;
border-radius: 3px;
border-color: $borders_color;
background-color: mix($borders_color,$bg_color, 35%);
// box-shadow: inset 1px 1px transparentize(black, 0.9),
// $widget_edge;
&:backdrop{
border-color: $backdrop_borders_color;
background-color: $backdrop_dark_fill;
box-shadow: 0 1px transparentize(white,1);
}
&.osd {
border-style: none;
background-color: transparent;
box-shadow: none;
border-width: 0;
//FIXME: there is a margin on top
}
}
@ -2077,7 +2067,7 @@ GtkLevelBar.vertical {
.level-bar {
&.trough {
// FIXME: outset not working
border: 1px solid;
padding: 2px;
border-radius: 3px;
@include entry(normal);
@ -2088,9 +2078,7 @@ GtkLevelBar.vertical {
&.fill-block {
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators
border-width: 1px;
border-style: solid;
border-color: if($variant=='light', darken($selected_bg_color,10%),
border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
darken($selected_bg_color,5%));
background-color: $selected_bg_color;
box-shadow: 0 1px transparentize(black, 0.9);
@ -2153,7 +2141,8 @@ GtkLevelBar.vertical {
GtkScrolledWindow {
.frame { border-radius: 2px; }
GtkViewport.frame { // avoid double borders when viewport inside scrolled window
GtkViewport.frame { // avoid double borders when viewport inside
// scrolled window
border-style: none;
}
}
@ -2248,7 +2237,7 @@ GtkScrolledWindow {
padding: 0 4px;
&:backdrop { background-image: none; }
.button {
border-width: 1px;
border: 1px solid;
color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.8);
@include button(osd);
@ -2472,7 +2461,6 @@ GtkPaned {
* GtkInfoBar *
**************/
GtkInfoBar {
border-width: 0;
border-style: none;
}
@ -2513,7 +2501,6 @@ GtkInfoBar {
border-radius: 5px;
background-color: transparentize(black,0.2); //FIXME proper color
text-shadow: 0 1px black;
// border: 2px solid $borders_color; gnome shell style?
}
.tooltip * { //Yeah this is ugly
@ -2527,9 +2514,7 @@ GtkInfoBar {
*****************/
GtkColorSwatch {
border-width: 1px;
border-style: solid;
border: 1px solid;
@if $variant == light {
border-color: transparentize(black,0.7);
box-shadow: inset 0 1px 1px transparentize(black, 0.8);

View File

@ -29,8 +29,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// normal, focus, insensitive, backdrop, backdrop-insensitive;
//
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom,
darken($base_color,3%),
$base_color 90%);
@ -141,7 +139,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
border-style: solid;
$_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons
@ -149,7 +146,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
//
// normal button
//
border-width: 1px;
color: $tc;
background-image: linear-gradient(to bottom,
lighten($c,5%),

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff