forked from AuroraMiddleware/gtk
f3d78aff12
$button_fill contains the background-image property value of buttons, having it readable outside the drawing mixin allows, for example, stacking background images in an easier way.
630 lines
19 KiB
SCSS
630 lines
19 KiB
SCSS
// Drawing mixins
|
|
|
|
// generic drawing of more complex things
|
|
|
|
@function _widget_edge($c:$borders_edge) {
|
|
// outer highlight "used" on most widgets
|
|
@if $c == none { @return none; }
|
|
@else { @return 0 1px $c; }
|
|
}
|
|
|
|
@mixin _shadows($list...) {
|
|
//
|
|
// Helper mixin to stack up to box-shadows;
|
|
//
|
|
$shadows: null;
|
|
|
|
@each $shadow in $list {
|
|
@if $shadow!=none { $shadows: $shadows, $shadow; }
|
|
}
|
|
|
|
box-shadow: $shadows;
|
|
}
|
|
|
|
// entries
|
|
@function entry_focus_border($fc:$selected_bg_color) {
|
|
@if $variant == 'light' { @return $fc; }
|
|
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
|
|
}
|
|
|
|
@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
|
|
|
|
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
|
|
//
|
|
// Entries drawing function
|
|
//
|
|
// $t: entry type
|
|
// $fc: focus color
|
|
// $edge: set to none to not draw the bottom edge or specify a color to not
|
|
// use the default one
|
|
//
|
|
// possible $t values:
|
|
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
|
|
//
|
|
|
|
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
|
|
$_entry_edge: if($edge == none, none, _widget_edge($edge));
|
|
|
|
@if $t==normal {
|
|
color: $text_color;
|
|
border-color: $borders_color;
|
|
background-color: $base_color;
|
|
@include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
|
|
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
|
|
}
|
|
@if $t==focus {
|
|
@include _shadows(entry_focus_shadow($fc), $_entry_edge);
|
|
border-color: entry_focus_border($fc);
|
|
}
|
|
@if $t==insensitive {
|
|
color: $insensitive_fg_color;
|
|
border-color: $borders_color;
|
|
background-color: $insensitive_bg_color;
|
|
box-shadow: $_entry_edge;
|
|
}
|
|
@if $t==backdrop {
|
|
color: $backdrop_text_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_base_color;
|
|
box-shadow: $_blank_edge;
|
|
}
|
|
@if $t==backdrop-insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $insensitive_bg_color;
|
|
box-shadow: $_blank_edge;
|
|
}
|
|
@if $t==osd {
|
|
color: $osd_text_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: 0 1px black;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
}
|
|
@if $t==osd-focus {
|
|
color: $osd_text_color;
|
|
border-color: $selected_bg_color;
|
|
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-clip: padding-box;
|
|
box-shadow: entry_focus_shadow($fc);
|
|
text-shadow: 0 1px black;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
}
|
|
@if $t==osd-insensitive {
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: $osd_insensitive_bg_color;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
@if $t==osd-backdrop {
|
|
color: $osd_text_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
// buttons
|
|
|
|
@function _border_color($c, $darker: false) {
|
|
@if $darker == true { @return darken($c, 30%); }
|
|
@else { @return darken($c, 20%); }
|
|
}
|
|
|
|
@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
|
|
//
|
|
// calculate the color of text shadows
|
|
//
|
|
// $tc is the text color
|
|
// $bg is the background color
|
|
//
|
|
$_lbg: lightness($bg)/100%;
|
|
@if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); }
|
|
@else { @return transparentize(black, $_lbg*0.8); }
|
|
}
|
|
|
|
@function _button_hilight_color($c) {
|
|
//
|
|
// calculate the right top hilight color for buttons
|
|
//
|
|
// $c: base color;
|
|
//
|
|
@if lightness($c)>95% { @return white; }
|
|
@else if lightness($c)>90% { @return transparentize(white, 0.2); }
|
|
@else if lightness($c)>80% { @return transparentize(white, 0.4); }
|
|
@else if lightness($c)>50% { @return transparentize(white, 0.6); }
|
|
@else if lightness($c)>40% { @return transparentize(white, 0.8); }
|
|
@else { @return transparentize(white, 0.95); }
|
|
}
|
|
|
|
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
|
|
//
|
|
// helper function for the text emboss effect
|
|
//
|
|
// $tc is the optional text color, not the shadow color
|
|
//
|
|
// TODO: this functions needs a way to deal with special cases
|
|
//
|
|
|
|
$_shadow: _text_shadow_color($tc, $bg);
|
|
|
|
@if lightness($tc)<50% {
|
|
text-shadow: 0 1px $_shadow;
|
|
-gtk-icon-shadow: 0 1px $_shadow;
|
|
}
|
|
@else {
|
|
text-shadow: 0 -1px $_shadow;
|
|
-gtk-icon-shadow: 0 -1px $_shadow;
|
|
}
|
|
}
|
|
|
|
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none) {
|
|
//
|
|
// Button drawing function
|
|
//
|
|
// $t: button type,
|
|
// $c: base button color for colored* types
|
|
// $tc: optional text color for colored* types
|
|
// $edge: set to none to not draw the bottom edge or specify a color to not
|
|
// use the default one
|
|
//
|
|
// possible $t values:
|
|
// normal, hover, active, insensitive, insensitive-active,
|
|
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
|
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
|
//
|
|
// This mixin sets the $button_fill global variable which containts the button background-image
|
|
//
|
|
$_hilight_color: _button_hilight_color($c);
|
|
$_button_edge: if($edge == none, none, _widget_edge($edge));
|
|
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
|
|
|
|
@if $t==normal {
|
|
//
|
|
// normal button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
|
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
|
$button_fill: if($variant == 'light', linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)),
|
|
linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%))) !global;
|
|
background-image: $button_fill;
|
|
@include _button_text_shadow($tc, $c);
|
|
@include _shadows(inset 0 1px $_hilight_color, $_button_edge);
|
|
}
|
|
|
|
@else if $t==hover {
|
|
//
|
|
// hovered button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
|
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
|
@if $variant == 'light' {
|
|
$button_fill: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%)) !global;
|
|
@include _button_text_shadow($tc, lighten($c, 6%));
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge);
|
|
}
|
|
@else {
|
|
$button_fill: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%)) !global;
|
|
@include _button_text_shadow($tc,lighten($c, 6%));
|
|
@include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge);
|
|
}
|
|
background-image: $button_fill;
|
|
}
|
|
|
|
@if $t==normal-alt {
|
|
//
|
|
// normal button alternative look
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
|
@include _button_text_shadow($tc, $c);
|
|
@if $variant == 'light' {
|
|
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
|
inset 0 -2px lighten($c, 2%),
|
|
inset 0 -1px darken($c, 12%),
|
|
$_button_edge);
|
|
}
|
|
@else {
|
|
background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
|
|
@include _shadows(inset 0 1px $_hilight_color,
|
|
inset 0 -2px darken($c, 4%),
|
|
inset 0 -1px darken($c, 9%),
|
|
$_button_edge);
|
|
}
|
|
}
|
|
|
|
@else if $t==hover-alt {
|
|
//
|
|
// hovered button alternative look
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
|
@if $variant == 'light' {
|
|
$button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
|
inset 0 -2px lighten($c, 5%),
|
|
inset 0 -1px darken($c, 10%),
|
|
$_button_edge);
|
|
}
|
|
@else {
|
|
$button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global;
|
|
@include _shadows(inset 0 1px $_hilight_color,
|
|
inset 0 -2px darken($c, 3%),
|
|
inset 0 -1px darken($c, 6%),
|
|
$_button_edge);
|
|
}
|
|
background-image: $button_fill;
|
|
}
|
|
|
|
@else if $t==active {
|
|
//
|
|
// pushed button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
|
$button_fill: image(darken($c, 6%)) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
|
|
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==insensitive {
|
|
//
|
|
// insensitive button
|
|
//
|
|
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
|
|
label, & { color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color); }
|
|
|
|
border-color: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
|
}
|
|
|
|
@else if $t==insensitive-active {
|
|
//
|
|
// insensitive pushed button
|
|
//
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
|
|
$_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
|
|
|
label, & { color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color); }
|
|
|
|
border-color: $_bc;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
|
}
|
|
|
|
@else if $t==backdrop {
|
|
//
|
|
// backdrop button
|
|
//
|
|
$_bg: if($c != $bg_color, $c, $backdrop_bg_color);
|
|
$_bc: if($variant == 'light', $c, _border_color($c));
|
|
|
|
label, & { color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
|
|
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-active {
|
|
//
|
|
// backdrop pushed button
|
|
//
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
$_bc: if($variant == 'light', $_bg ,_border_color($c));
|
|
|
|
label, & { color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
|
|
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive {
|
|
//
|
|
// backdrop insensitive button
|
|
//
|
|
|
|
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
$_bc: if($variant == 'light', $_bg,_border_color($c));
|
|
|
|
label, & { color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
|
|
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive-active {
|
|
//
|
|
// backdrop insensitive pushed button
|
|
//
|
|
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
$_bc: if($variant == 'light', $_bg, _border_color($c));
|
|
|
|
label { color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
|
|
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==osd {
|
|
//
|
|
// normal osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: 0 1px black;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
|
|
@else if $t==osd-hover {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%));
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: 0 1px black;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
|
|
@else if $t==osd-active {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c != $bg_color, $c, $osd_borders_color);
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
|
|
@else if $t==osd-insensitive {
|
|
//
|
|
// insensitive osd button
|
|
//
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($osd_insensitive_bg_color) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==osd-backdrop {
|
|
//
|
|
// backdrop osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==undecorated {
|
|
//
|
|
// reset
|
|
//
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
$button_fill: none !global;
|
|
background-image: $button_fill;
|
|
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
|
|
//
|
|
// headerbar fill
|
|
//
|
|
// $c: base color
|
|
// $hc: top highlight color
|
|
// $ov: a background layer for background shorthand (hence no commas!)
|
|
//
|
|
$gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px);
|
|
|
|
@if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); }
|
|
|
|
@if $ov != none { background: $c $ov, $gradient; }
|
|
@else { background: $c $gradient; }
|
|
|
|
box-shadow: inset 0 1px $hc; // top highlight
|
|
}
|
|
|
|
@mixin overshoot($p, $t:normal, $c:$fg_color) {
|
|
//
|
|
// overshoot
|
|
//
|
|
// $p: position
|
|
// $t: type
|
|
// $c: base color
|
|
//
|
|
// possible $p values:
|
|
// top, bottom, right, left
|
|
//
|
|
// possible $t values:
|
|
// normal, backdrop
|
|
//
|
|
|
|
$_small_gradient_length: 5%;
|
|
$_big_gradient_length: 100%;
|
|
|
|
$_position: center top;
|
|
$_small_gradient_size: 100% $_small_gradient_length;
|
|
$_big_gradient_size: 100% $_big_gradient_length;
|
|
|
|
@if $p==bottom {
|
|
$_position: center bottom;
|
|
$_linear_gradient_direction: to top;
|
|
}
|
|
|
|
@else if $p==right {
|
|
$_position: right center;
|
|
$_small_gradient_size: $_small_gradient_length 100%;
|
|
$_big_gradient_size: $_big_gradient_length 100%;
|
|
}
|
|
|
|
@else if $p==left {
|
|
$_position: left center;
|
|
$_small_gradient_size: $_small_gradient_length 100%;
|
|
$_big_gradient_size: $_big_gradient_length 100%;
|
|
}
|
|
|
|
$_small_gradient_color: $c;
|
|
$_big_gradient_color: $c;
|
|
|
|
@if $c==$fg_color {
|
|
$_small_gradient_color: darken($borders_color, 10%);
|
|
$_big_gradient_color: $fg_color;
|
|
|
|
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
|
}
|
|
|
|
$_small_gradient: -gtk-gradient(radial,
|
|
$_position, 0,
|
|
$_position, 0.5,
|
|
to($_small_gradient_color),
|
|
to(transparentize($_small_gradient_color, 1)));
|
|
|
|
$_big_gradient: -gtk-gradient(radial,
|
|
$_position, 0,
|
|
$_position, 0.6,
|
|
from(transparentize($_big_gradient_color, 0.93)),
|
|
to(transparentize($_big_gradient_color, 1)));
|
|
|
|
@if $t==normal {
|
|
background-image: $_small_gradient, $_big_gradient;
|
|
background-size: $_small_gradient_size, $_big_gradient_size;
|
|
}
|
|
|
|
@else if $t==backdrop {
|
|
background-image: $_small_gradient;
|
|
background-size: $_small_gradient_size;
|
|
}
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: $_position;
|
|
|
|
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
|
border: none; //
|
|
box-shadow: none; //
|
|
}
|
|
|
|
@mixin undershoot($p) {
|
|
//
|
|
// undershoot
|
|
//
|
|
// $p: position
|
|
//
|
|
// possible $p values:
|
|
// top, bottom, right, left
|
|
//
|
|
|
|
$_undershoot_color_dark: transparentize(black, 0.8);
|
|
$_undershoot_color_light: transparentize(white, 0.8);
|
|
|
|
$_gradient_dir: left;
|
|
$_dash_bg_size: 10px 1px;
|
|
$_gradient_repeat: repeat-x;
|
|
$_bg_pos: center $p;
|
|
|
|
background-color: transparent; // shouldn't be needed, but better to be sure;
|
|
|
|
@if ($p == left) or ($p == right) {
|
|
$_gradient_dir: top;
|
|
$_dash_bg_size: 1px 10px;
|
|
$_gradient_repeat: repeat-y;
|
|
$_bg_pos: $p center;
|
|
}
|
|
|
|
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
|
|
$_undershoot_color_light 50%,
|
|
$_undershoot_color_dark 50%);
|
|
|
|
padding-#{$p}: 1px;
|
|
background-size: $_dash_bg_size;
|
|
background-repeat: $_gradient_repeat;
|
|
background-origin: content-box;
|
|
background-position: $_bg_pos;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|