Commit a4fa623f authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Update usage of `$gray-lighter` to `$grey-3`

`$gray-lighter` is deprecated. Its color value (#d3d3d3) is close enough
to `$grey-3` (#dbdbdb) to make a simple substitution feasible.

Remove unused styles referencing `$gray-lighter`
parent dd306431
......@@ -115,7 +115,7 @@ var.$base-font-size: 14px;
transition: background-color 0.25s;
@include shadow.smallshadow;
background: var.$white;
border: solid 1px var.$gray-lighter;
border: solid 1px var.$grey-3;
border-radius: 4px;
color: var.$gray-light;
text-decoration: none;
......
......@@ -17,7 +17,7 @@
.annotator-bucket-indicator {
box-sizing: border-box;
background: var.$white;
border: solid 1px var.$gray-lighter;
border: solid 1px var.$grey-3;
border-radius: 2px 4px 4px 2px;
right: 0;
pointer-events: all;
......@@ -57,7 +57,7 @@
&:before {
border-width: 8px;
border-right: 5px solid var.$gray-lighter;
border-right: 5px solid var.$grey-3;
margin-top: -8px;
}
......@@ -93,7 +93,7 @@
&:before {
border-width: 13px;
border-bottom: 6px solid var.$gray-lighter;
border-bottom: 6px solid var.$grey-3;
margin-left: -13px;
}
......@@ -115,7 +115,7 @@
&:before {
border-width: 13px;
border-top: 6px solid var.$gray-lighter;
border-top: 6px solid var.$grey-3;
margin-left: -13px;
}
......
......@@ -30,7 +30,7 @@
@mixin form-input {
@include var.font-normal;
border: 1px solid var.$gray-lighter;
border: 1px solid var.$grey-3;
border-radius: 2px;
padding: 0.5em 0.75em;
font-weight: normal;
......
......@@ -58,46 +58,3 @@ html {
// margin-top: .75em;
}
}
//TABS////////////////////////////////
.nav-tabs {
margin-bottom: 0.7em;
& > li {
display: inline-block;
line-height: 1;
a {
font-family: var.$sans-font-family;
font-weight: bold;
color: var.$gray-dark;
cursor: pointer;
border-bottom: 3px solid transparent;
padding-left: 0.153em;
padding-right: 0.153em;
padding-bottom: 0.076em;
}
&:active a {
position: relative;
top: 0.076em;
}
&.active:active a {
top: 0;
}
&.active a {
border-color: var.$gray-lighter;
}
&:before {
content: '/';
margin: 0 0.75em;
}
&:first-child:before {
content: none;
}
}
}
......@@ -16,7 +16,7 @@
.annotation-quote__quote {
@include var.font-normal;
border-left: 3px solid var.$gray-lighter;
border-left: 3px solid var.$grey-3;
color: var.$grey-4;
font-family: sans-serif;
font-size: 12px;
......
......@@ -119,7 +119,7 @@ hypothesis-app {
// ---------------------------------------
.sheet {
border: solid 1px var.$gray-lighter;
border: solid 1px var.$grey-3;
border-radius: 2px;
font-family: var.$sans-font-family;
font-weight: 300;
......@@ -128,15 +128,6 @@ hypothesis-app {
position: relative;
background-color: var.$body-background;
.nav-tabs {
border: 1px none var.$gray-lighter;
border-bottom-style: solid;
padding: 0 0 1.1em;
li a {
padding-bottom: 0.231em;
}
}
.close {
position: absolute;
right: 1em;
......@@ -159,7 +150,7 @@ hypothesis-app {
.annotation-unavailable-message {
display: flex;
flex-direction: column;
border: 1px solid var.$gray-lighter;
border: 1px solid var.$grey-3;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 3px;
......
@use "sass:color";
// Colors and shades of gray
// Names courtesy of http://chir.ag/projects/name-that-color
// Greys
$white: #fff !default;
$black: #000 !default;
// Grays
// ---------------------
$grey-1: #f2f2f2;
$grey-2: #ececec;
$grey-3: #dbdbdb;
$grey-4: #a6a6a6;
$gray-light: #969696 !default;
$color-gray: #818181;
$grey-5: #7a7a7a;
$gray: #777 !default;
$color-dove-gray: #626262;
$gray-dark: #585858;
$gray-light: #969696 !default;
$gray-lighter: #d3d3d3 !default;
$grey-6: #3f3f3f;
$color-mine-shaft: #3a3a3a;
$color-dove-gray: #626262;
$color-gray: #818181;
$grey-7: #202020;
$black: #000 !default;
// Colors
// ---------------------
$brand: #bd1c2b;
$highlight: #58cef4;
$button-text-color: $gray-dark !default;
$button-background-start: $white !default;
......@@ -27,19 +41,6 @@ $button-background-gradient: to bottom, $button-background-start,
$error-color: #f0480c !default;
$success-color: #1cbd41 !default;
// Variables for the new color palette
// ------------------------------------
$grey-1: #f2f2f2;
$grey-2: #ececec;
$grey-3: #dbdbdb;
$grey-4: #a6a6a6;
$grey-5: #7a7a7a;
$grey-6: #3f3f3f;
$grey-7: #202020;
$brand: #bd1c2b;
$highlight: #58cef4;
// Tint and shade functions from
// https://css-tricks.com/snippets/sass/tint-shade-functions
@function tint($color, $percent) {
......
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