X-Arc-White/gnome-shell/_drawing.scss

//
// Drawing mixins
//

// generic drawing of more complex things

// provide font size in rem, with px fallback
$ref_size: 13.33;

@mixin fontscaling($size: $ref_size) {
  font-size: round( $size * 72 / 96 * 100 ) / 100 + pt;
}


//
// shadows
//

$z-depth-1: 0 1px 2px rgba(0, 0, 0, 0.22),
            0 1px 1px rgba(0, 0, 0, 0.12);
$z-depth-2: 0 3px 4px rgba(0, 0, 0, 0.32),
            0 3px 2px rgba(0, 0, 0, 0.24);
$z-depth-3: 0 9px 12px rgba(0, 0, 0, 0.40),
            0 5px 5px rgba(0, 0, 0, 0.32),
            0 3px 3px rgba(0, 0, 0, 0.26);
$z-depth-4: 0 12px 16px rgba(0, 0, 0, 0.54),
            0 8px 8px rgba(0, 0, 0, 0.44),
            0 4px 4px rgba(0, 0, 0, 0.32);
$z-depth-5: 0 16px 20px rgba(0, 0, 0, 0.72),
            0 12px 12px rgba(0, 0, 0, 0.52),
            0 5px 5px rgba(0, 0, 0, 0.40);


//
// entries
//

@mixin entry($t, $fc:$selected_bg_color) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
//
// possible $t values:
// normal, focus, insensitive
//
  @if $t==normal {
    background-color: rgba(0, 0, 0, 0.01);
    border-color: transparent;
    box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);

  }
  @if $t==focus {
    border-color: transparent;
    box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color);
  }
  @if $t==hover {
    border-color: transparent;
    box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $fill_color);
  }
  @if $t==insensitive {
    color: $insensitive_fg_color;
    border-color: transparent;
    box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_fill_color);
  }
}


//
// buttons
//

@mixin button($t, $c:$bg_color, $tc:$fg_color) {
//
// Button drawing function
//
// $t:    button type,
// $c:    base button color for colored* types
// $tc:   optional text color for colored* types
//
// possible $t values:
// normal, hover, active, insensitive, undecorated,
// flat-normal, flat-hover, flat-active, flat-insensitive,
// undecorated
//
  @if $t==normal {
  //
  // normal button
  //
    border-color: transparent;
    border-top: 1px solid $borders_highlight;
    color: if($tc!=$fg_color, $tc, $secondary_fg_color);
    background-color: $c;
    box-shadow: $z-depth-1;
    text-shadow: none;
    icon-shadow: none;
  }
  @if $t==focus {
  //
  // focused button
  //
    color: $fg_color;
    background-color: $c;
    text-shadow: none;
    icon-shadow: none;
    box-shadow: 0 0 transparent;
  }

  @else if $t==hover {
  //
  // hovered button
  //
    border-color: transparent;
    border-top: 1px solid $borders_highlight;
    color: if($tc!=$fg_color, $tc, $fg_color);
    background-color: $c;
    box-shadow: $z-depth-2;
    text-shadow: none;
    icon-shadow: none;

  }
  @else if $t==active {
  //
  // pushed button
  //
    border-color: transparent;
    border-top: 1px solid $borders_highlight;
    color: if($tc!=$fg_color, $tc, $selected_fg_color);
    background-color: $c;
    box-shadow: $z-depth-2;
    text-shadow: none;
    icon-shadow: none;
  }
  @else if $t==insensitive {
  //
  // insensitive button
  //
    color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
    background-color: if($c!=$bg_color, $c, $insensitive_fill_color);
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;
  }
  @if $t==flat-normal {
  //
  // normal flat button
  //
    color: if($tc!=$fg_color, $tc, $secondary_fg_color);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;
  }
  @if $t==flat-focus {
  //
  // focused flat button
  //
    color: $fg_color;
    text-shadow: none;
    icon-shadow: none;
    box-shadow: 0 0 transparent;
    // box-shadow: inset 0px 0px 0px 2px $fill_color;
  }

  @else if $t==flat-hover {
  //
  // hovered flat button
  //
    color: if($tc!=$fg_color, $tc, $fg_color);
    background-color: if($c!=$bg_color, $fill_color, $semi_fill_color);
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;

  }
  @else if $t==flat-active {
  //
  // pushed flat button
  //
    color: if($tc!=$fg_color, $tc, $selected_fg_color);
    background-color: if($c!=$bg_color, $tc, $fill_color);
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;
  }
  @else if $t==flat-insensitive {
  //
  // insensitive flat button
  //
    color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;
  }
  @else if $t==undecorated {
  //
  // reset
  //
    color: inherit;
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 transparent;
    text-shadow: none;
    icon-shadow: none;
  }
}