Remove darken & lighten functions from scss (#10330)
This commit is contained in:
Jordan Vidrine
GitHub
parent
c65c3407f8
commit
7cf45dab01
|
|
@ -349,7 +349,7 @@
|
|||
|
||||
li {
|
||||
.d-icon-users {
|
||||
color: lighten($primary, 40%);
|
||||
color: $primary-medium;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ sup img.emoji {
|
|||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-radius: 2px;
|
||||
background-color: lighten($tertiary, 40%);
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
|
||||
.emoji-picker-modal.fadeIn {
|
||||
|
|
|
|||
|
|
@ -119,16 +119,13 @@
|
|||
background: $tertiary-high;
|
||||
}
|
||||
&:active {
|
||||
@include linear-gradient(
|
||||
darken($tertiary, 18%),
|
||||
darken($tertiary, 12%)
|
||||
);
|
||||
@include linear-gradient($tertiary-hover, $tertiary);
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
text-shadow: 0 1px 0 rgba($primary, 0.2);
|
||||
@include linear-gradient($tertiary, darken($tertiary, 20%));
|
||||
@include linear-gradient($tertiary, $tertiary-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,10 +50,7 @@
|
|||
}
|
||||
&:active,
|
||||
&.btn-active {
|
||||
@include linear-gradient(
|
||||
scale-color($bg-color, $lightness: -20%),
|
||||
$bg-color
|
||||
);
|
||||
@include linear-gradient($hover-bg-color 0%, $bg-color 100%);
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
|
|
@ -113,7 +110,7 @@
|
|||
$text-color: $secondary,
|
||||
$bg-color: $tertiary,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color: darken($tertiary, 10%),
|
||||
$hover-bg-color: $tertiary-hover,
|
||||
$hover-icon-color: $secondary
|
||||
);
|
||||
}
|
||||
|
|
@ -126,11 +123,7 @@
|
|||
$text-color: $secondary,
|
||||
$bg-color: $danger,
|
||||
$icon-color: $danger-low,
|
||||
$hover-bg-color:
|
||||
dark-light-choose(
|
||||
scale-color($danger, $lightness: -20%),
|
||||
scale-color($danger, $lightness: 20%)
|
||||
),
|
||||
$hover-bg-color: $danger-hover,
|
||||
$hover-icon-color: $danger-low
|
||||
);
|
||||
}
|
||||
|
|
@ -143,11 +136,7 @@
|
|||
$text-color: $secondary,
|
||||
$bg-color: $danger,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color:
|
||||
dark-light-choose(
|
||||
scale-color($danger, $lightness: -20%),
|
||||
scale-color($danger, $lightness: 20%)
|
||||
),
|
||||
$hover-bg-color: $danger-hover,
|
||||
$hover-icon-color: $secondary
|
||||
);
|
||||
}
|
||||
|
|
@ -157,11 +146,7 @@
|
|||
$text-color: $secondary,
|
||||
$bg-color: $success,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color:
|
||||
dark-light-choose(
|
||||
scale-color($success, $lightness: -20%),
|
||||
scale-color($success, $lightness: 20%)
|
||||
),
|
||||
$hover-bg-color: $success-hover,
|
||||
$hover-icon-color: $secondary
|
||||
);
|
||||
}
|
||||
|
|
@ -195,19 +180,19 @@
|
|||
}
|
||||
&:hover {
|
||||
color: currentColor;
|
||||
background: darken($google, 5%);
|
||||
background: $google-hover;
|
||||
}
|
||||
}
|
||||
&.instagram {
|
||||
background: $instagram;
|
||||
&:hover {
|
||||
background: darken($instagram, 15%);
|
||||
background: $instagram-hover;
|
||||
}
|
||||
}
|
||||
&.facebook {
|
||||
background: $facebook;
|
||||
&:hover {
|
||||
background: darken($facebook, 15%);
|
||||
background: $facebook-hover;
|
||||
}
|
||||
}
|
||||
&.cas {
|
||||
|
|
@ -216,19 +201,19 @@
|
|||
&.twitter {
|
||||
background: $twitter;
|
||||
&:hover {
|
||||
background: darken($twitter, 10%);
|
||||
background: $twitter-hover;
|
||||
}
|
||||
}
|
||||
&.github {
|
||||
background: $github;
|
||||
&:hover {
|
||||
background: lighten($github, 20%);
|
||||
background: $github-hover;
|
||||
}
|
||||
}
|
||||
&.discord {
|
||||
background: $discord;
|
||||
&:hover {
|
||||
background: darken($discord, 10%);
|
||||
background: $discord-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ $secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default;
|
|||
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
|
||||
$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;
|
||||
$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
|
||||
$tertiary-hover: dark-light-diff($tertiary, $secondary, -25%, -25%) !default;
|
||||
|
||||
//quaternary
|
||||
$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
|
||||
|
|
@ -71,10 +72,12 @@ $danger-low-mid: dark-light-diff(
|
|||
-60%
|
||||
) !default;
|
||||
$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%) !default;
|
||||
$danger-hover: dark-light-diff($danger, $secondary, -20%, -20%) !default;
|
||||
|
||||
//success
|
||||
$success-low: dark-light-diff($success, $secondary, 80%, -60%) !default;
|
||||
$success-medium: dark-light-diff($success, $secondary, 50%, -40%) !default;
|
||||
$success-hover: dark-light-diff($success, $secondary, -20%, -20%) !default;
|
||||
|
||||
//love
|
||||
$love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
|
||||
|
|
|
|||
|
|
@ -18,12 +18,18 @@ $topic-avatar-width: 45px;
|
|||
// --------------------------------------------------
|
||||
|
||||
$google: #ffffff !default;
|
||||
$google-hover: darken($google, 5%) !default;
|
||||
$instagram: #e1306c !default;
|
||||
$instagram-hover: darken($instagram, 15%) !default;
|
||||
$facebook: #4267b2 !default;
|
||||
$facebook-hover: darken($facebook, 15%) !default;
|
||||
$cas: #70ba61 !default;
|
||||
$twitter: #1da1f2 !default;
|
||||
$twitter-hover: darken($twitter, 10%) !default;
|
||||
$github: #100e0f !default;
|
||||
$github-hover: lighten($github, 20%) !default;
|
||||
$discord: #7289da !default;
|
||||
$discord-hover: darken($discord, 10%) !default;
|
||||
|
||||
// Badge color variables
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.future-date-input-selector-row {
|
||||
.future-date-input-selector-icons {
|
||||
color: lighten($primary, 40%);
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
.details {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
color: dark-light-choose(lighten($primary, 10%), $secondary);
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ article.post {
|
|||
}
|
||||
|
||||
.quote .title {
|
||||
border-left: 5px solid darken($primary-low, 5%);
|
||||
border-left: 5px solid $primary-very-low;
|
||||
padding: 10px 10px 0 12px;
|
||||
.avatar {
|
||||
margin-right: 7px;
|
||||
|
|
@ -33,7 +33,7 @@ article.post {
|
|||
blockquote {
|
||||
padding: 10px 8px 10px 13px;
|
||||
margin: 0 0 10px 0;
|
||||
border-left: 5px solid darken($primary-low, 5%);
|
||||
border-left: 5px solid $primary-very-low;
|
||||
p {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue