Commit dd03f064 authored by Jaque's avatar Jaque Committed by Robert Lyon
Browse files

Bug 1773853: Replace all lighten darken with more robust scale-color

behatnotneeded

Change-Id: I8a064a94a2aee874fe9fe19b506590296632fa94
parent 5d13f48b
......@@ -64,12 +64,13 @@
.layoutthumb {
rect.layout1 {
fill: darken($panel-default-heading-bg, 10%);
fill: scale-color($panel-default-heading-bg, $lightness: -10%);
stroke: $panel-default-border;
}
rect.layout0 {
fill: darken($panel-default-heading-bg, 15%);
fill: scale-color($panel-default-heading-bg, $lightness: -5.25%);
stroke: $panel-default-border;
}
......
......@@ -7,7 +7,7 @@
color: $popover-arrow-color;
display: block;
width: 100%;
background-color: lighten($arrow-color, 5%);
background-color: scale-color($arrow-color, $lightness: 35%);
.right-text,
.arrow {
......
......@@ -202,7 +202,7 @@ td.action-list-copy {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
background: lighten($btn-default-bg, 0.8);
background: scale-color($btn-default-bg, $lightness: 40%);
&:hover {
background: rgba($btn-default-bg, 1);
}
......@@ -276,7 +276,7 @@ td.action-list-copy {
// To override btn-primary colour
.btn-primary {
color: $gray-dark;
background: darken($brand-default, 10%);
background: scale-color($brand-default, $lightness: -10.5%);
border-color: $btn-default-border;
}
}
......@@ -320,7 +320,8 @@ td.action-list-copy {
&:hover {
+.btn {
border-top-color: darken($btn-default-border, 12%);
border-top-color: scale-color($btn-default-border, $lightness: -15%);
;
}
}
}
......@@ -397,7 +398,8 @@ td.action-list-copy {
font-family: $font-family-sans-serif;
&:hover {
background-color: darken($btn-primary-bg, 10%);
background-color: scale-color($btn-primary-bg, $lightness: -32%);
}
.mce-txt {
......@@ -415,7 +417,7 @@ td.action-list-copy {
color: $btn-primary-color;
&:hover {
background-color: darken($btn-primary-bg, 10%);
background-color: scale-color($btn-primary-bg, $lightness: -32%);
}
}
}
......
......@@ -29,10 +29,10 @@
min-width: 0;
float: left;
background-color: $gray-lighter;
border: 1px solid darken($gray-lighter, 5%);
border: 1px solid scale-color($gray-lighter, $lightness: -5.5%);
margin: 2% 2% 0 0;
&.active {
background-color: darken($gray-lighter, 10%);
background-color: scale-color($gray-lighter, $lightness: -10.5%);
}
input {
display: inline;
......
......@@ -57,7 +57,7 @@ span.help {
font-size: $font-size-base;
padding:8px 14px;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
border-bottom: 1px solid scale-color($popover-title-bg, $lightness: -5%);
border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
font-weight: $headings-font-weight;
}
......
......@@ -3,7 +3,7 @@
clear: both;
padding: 40px;
background-color: $gray-lighter;
border: 2px dashed lighten($gray-light, 30%);
border: 2px dashed scale-color($gray-light, $lightness: 56.5%);
&.dropzone-small {
padding: 10px;
......@@ -38,7 +38,7 @@
border-radius: 4px;
width: 100%;
background-color: $panel-warning-heading-bg;
border: 2px dashed darken( $panel-warning-border, 10%);
border: 2px dashed scale-color($panel-warning-border, $lightness: -9.50%);
}
// Extending dropzone-previews for adding artefact to a page
......
......@@ -4,7 +4,8 @@
tr {
&.standard {
background: darken($table-bg-accent, 2%) !important;
background: scale-color($table-bg-accent, $lightness: -2%) !important;
cursor: pointer;
}
}
......@@ -40,11 +41,11 @@
}
&.dot {
font-size: 0.8em;
color: lighten($gray-light, 15%);
color: scale-color($gray-light, $lightness: 28%);
}
&.dot.disabled {
font-size: 1em;
color: lighten($gray-light, 15%);
color: scale-color($gray-light, $lightness: 28%);
cursor: $cursor-disabled;
// Override dot icon with minus icon
&:before {
......@@ -186,7 +187,7 @@ th.statusheader {
}
&.dot {
font-size: 0.8em;
color: lighten($gray-light, 15%);
color: scale-color($gray-light, $lightness: 28%);
}
}
}
......
......@@ -19,7 +19,7 @@
//dash
.collapse-indicator {
color: lighten($gray, 25%);
color: scale-color($gray, $lightness: 37.5%);
font-size: 13px;
display: block;
transition-duration: 0.3s;
......@@ -30,7 +30,7 @@
font-size: 11px;
}
.collapsed & {
color: lighten($gray, 25%);
color: scale-color($gray, $lightness: 37.5%);
}
a:hover &,
a:focus & {
......@@ -52,7 +52,7 @@ a[data-toggle="collapse"] {
.collapse-indicator {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: lighten($gray, 25%);
color: scale-color($gray, $lightness: 37.5%);
margin-top: 5px;
line-height: 13px;
height: auto;
......@@ -71,7 +71,7 @@ a[data-toggle="collapse"] {
+ .icon {
color: $text-color;
&:hover, &:focus {
color: lighten($text-color, 10%);
color: scale-color($text-color, $lightness: 12.5%);
}
}
}
......@@ -80,7 +80,7 @@ a[data-toggle="collapse"] {
[data-toggle="collapse"].outer-link {
&.collapsed {
~ .collapse-indicator {
color: lighten($gray, 25%);
color: scale-color($gray, $lightness: 37.5%);
}
}
&:hover,
......@@ -141,8 +141,7 @@ a[data-toggle="collapse"] {
}
}
@media (min-width: $screen-lg-min) {
.columns3.col-width-25,
{
.columns3.col-width-25 {
width: 60%;
}
.columns1,
......
......@@ -6,12 +6,13 @@
padding: 7px 15px 15px;
font-size: 20px;
margin-bottom: 4px;
background-color: lighten($thumbnail-border, 7%);
background-color: scale-color($thumbnail-border, $lightness: 52%);
&.thumbnail {
&:hover,
&.focus,
&.active {
background-color: lighten($thumbnail-border, 5%);
background-color: scale-color($thumbnail-border, $lightness: 38%);
color: $text-color;
text-decoration: none;
border-color: $thumbnail-border;
......
......@@ -115,9 +115,9 @@ h4.list-group-item-heading {
display: block;
padding: 10px 15px;
&:hover {
background: darken(#f0f0f0, 0.5%);
background: #efefef;
text-decoration: none;
color: darken($link-color, 5%);
color: scale-color($link-color, $lightness: -16%);
}
small {
color: $link-color;
......@@ -159,7 +159,7 @@ h4.list-group-item-heading {
@extend .list-group-item-warning;
}
&.published {
background: lighten($panel-default-heading-bg, 1%);
background: scale-color($panel-default-heading-bg, $lightness: 50%);
}
&.flush {
padding: 10px 0;
......
......@@ -33,7 +33,8 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
outline-color: $brand-info;
.switch-inner:before,
.switch-inner:after {
background-color: darken($brand-default, 5%);
background-color: scale-color($brand-default, $lightness: -5.5%);
}
}
}
......@@ -52,7 +53,7 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
&:hover {
.switch-inner:before,
.switch-inner:after {
background-color: darken($brand-default, 5%);
background-color: scale-color($brand-default, $lightness: -5.5%);
}
}
}
......@@ -104,7 +105,7 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
margin: -($indicator-size / 2) $indicator-horizontal-margin 0;
margin-right: $indicator-horizontal-margin + $indicator-total-width;
background: rgba($brand-danger, 0.8);
border: 1px solid rgba(darken($brand-danger, 5%), 0.8);
border: 1px solid rgba(scale-color($brand-danger, $lightness: -8.5%), 0.8);
position: absolute;
top: 50%;
left: 0;
......@@ -117,7 +118,7 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
right: 0;
transform: translateX(#{-$indicator-total-width});
background-color: rgba($brand-success, 0.8);
border: 1px solid rgba(darken($brand-success, 5%), 0.8);
border: 1px solid rgba(scale-color($brand-success, $lightness: -25%), 0.8);
~ .off {
transform: translateX(#{-$indicator-total-width}) translateX(100%);
......
......@@ -41,7 +41,7 @@
}
.tag-filters {
@extend .clearfix;
background-color: darken($panel-default-heading-bg, 1%);
background: scale-color($panel-default-heading-bg, $lightness: -1.40%);
padding: 10px 15px;
}
......
......@@ -98,7 +98,7 @@ a.user-icon, a .user-icon {
&:hover,
&:focus {
opacity:1;
background-color: lighten($thumbnail-border, 10%);
background-color: scale-color($thumbnail-border, $lightness: 75%);
img {
opacity: 1;
......@@ -114,4 +114,4 @@ a.user-icon, a .user-icon {
.item.user-icon img {
margin-bottom: 5px;
}
}
\ No newline at end of file
......@@ -18,7 +18,7 @@ $logged-in-height-mobile: 100px;
padding: 13px 15px;
height: $logged-in-height;
border-top: 3px solid $dashboard-widget-color;
background-color: darken($dashboard-widget-bg, 3%);
background: scale-color($dashboard-widget-bg, $lightness: -3.25%);
@media (min-width: $screen-sm-min ) and (max-width: $screen-lg-min ) {
height: $logged-in-height-mobile;
......@@ -153,7 +153,7 @@ $logged-in-height-mobile: 100px;
.logged-in:hover {
.widget-heading {
@media (max-width: $screen-sm-min) {
background: darken($gray-lighter, 10%);
background: scale-color($gray-lighter, $lightness: -10.5%);
}
}
.widget-detail {
......
......@@ -36,7 +36,7 @@
.collapsible a {
&:focus,
&:hover {
background: darken($panel-default-heading-bg, 1%) !important;
background: scale-color($panel-default-heading-bg, $lightness: -1.40%) !important;
}
}
}
......
......@@ -39,6 +39,6 @@
.alert-default {
background-color: rgba($body-bg, 0.4);
border: 1px solid darken($brand-default, 5%);
border: 1px solid scale-color($brand-default, $lightness: -5.5%);
color: $gray;
}
......@@ -528,11 +528,11 @@
padding-top: 10px;
}
.requiredmarker {
color: darken($brand-danger, 5%);
color: scale-color($brand-danger, $lightness: -8.5%);
}
&.requiredmarkerdesc {
color: darken($brand-danger, 5%);
color: scale-color($brand-danger, $lightness: -8.5%);
border: 0;
font-style: italic;
font-size: $font-size-base - 1;
......
......@@ -194,7 +194,7 @@ textarea.resizable {
font-family: "FontAwesome";
font-size: 16px;
content: "\f073";
color: lighten($text-color, 20%);
color: scale-color($text-color, $lightness: 25%);
position:relative;
right: 20px;
}
......@@ -202,7 +202,7 @@ textarea.resizable {
font-family: "FontAwesome";
font-size: 16px;
content: "\f073";
color: lighten($text-color, 20%);
color: scale-color($text-color, $lightness: 25%);
right: 10px;
position: absolute;
font-size: 16px;
......
......@@ -17,10 +17,10 @@
}
&:hover,
&:focus {
color: darken($link-color, 5%);
color: scale-color($link-color, $lightness: -16%);
border: 1px solid transparent;
border-bottom: 3px solid $nav-tabs-link-hover-border-color;
background: lighten($gray-lighter, 3%);
background: scale-color($gray-lighter, $lightness: 45%);
}
}
}
......
......@@ -184,23 +184,28 @@
&.last .panel-heading a.collapsed {
border-bottom-width: 1px;
}
// Style variations
@each $status, $bgcolor in $panel-background {
&.panel-#{$status} {
.panel-heading a {
background-color: darken($bgcolor, 3%);
background-color: $bgcolor;
&.collapsed {
background-color: $bgcolor;
}
&:hover,
&:focus {
background-color: darken($bgcolor, 3%);
background-color: $bgcolor;
}
}
}
}
@each $status, $bgcolor in $panel-border {
&.panel-#{$status} {
.panel-footer,
.panel-body,
.panel-heading a {
border: 1px solid darken($bgcolor, 15%);
border: 1px solid $bgcolor;
}
.panel-heading a,
.panel-body:not(.no-footer) {
......@@ -220,7 +225,7 @@
legend h3 {
a {
text-shadow: 1px 0 0 $text-shadow;
background-color: darken($panel-default-heading-bg, 1%);
background: scale-color($panel-default-heading-bg, $lightness: -1.40%);
border: 1px solid $panel-default-border;
border-bottom: 0;
padding: 10px 15px;
......
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