Commit bcffcbdf authored by Robert Ragas's avatar Robert Ragas
Browse files

by robertragas: add a new color to the social blue theme: accent color text to...

by robertragas: add a new color to the social blue theme: accent color text to give more flexibility when a button has the accent color that does not fit well with black
parent ab5b0a02
......@@ -3,7 +3,8 @@
}
[type="radio"]:focus + label:before {
box-shadow: 0 0 3px 2px #29abe2;
-webkit-box-shadow: 0 0 3px 2px #29abe2;
box-shadow: 0 0 3px 2px #29abe2;
}
[type="checkbox"]:checked + label:after,
......@@ -43,7 +44,8 @@
.hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,
.hero-form[role='search'] .form-control:focus ~ .search-icon,
.hero-form[role='search'] .form-control:active ~ .search-icon {
box-shadow: 0 2px 0 0 #1f80aa;
-webkit-box-shadow: 0 2px 0 0 #1f80aa;
box-shadow: 0 2px 0 0 #1f80aa;
}
.hero-form[role='search'] .search-icon {
......@@ -52,7 +54,8 @@
.form-control:focus {
border-color: #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
-webkit-box-shadow: 0 2px 0 0 #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
}
.select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {
......@@ -84,6 +87,7 @@
.btn-primary.dropdown-toggle:hover {
background-color: #29abe2;
border-color: #29abe2;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
......@@ -105,6 +109,7 @@ fieldset[disabled]
.btn-primary.focus {
background-color: #29abe2;
border-color: #29abe2;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
......@@ -117,6 +122,7 @@ fieldset[disabled]
.open > .btn-secondary.dropdown-toggle, .btn-secondary.dropdown-toggle:hover {
background-color: #1f80aa;
border-color: #1f80aa;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
......@@ -126,23 +132,28 @@ fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary.focus {
background-color: #1f80aa;
border-color: #1f80aa;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.badge-accent {
color: #4d4d4d;
background-color: #ffc142;
border-color: #ffc142;
}
.btn-accent {
color: #4d4d4d;
background-color: #ffc142;
border-color: #ffc142;
}
.btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,
.open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {
color: #4d4d4d;
background-color: #ffc142;
border-color: #ffc142;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
......@@ -150,8 +161,10 @@ fieldset[disabled] .btn-secondary.focus {
fieldset[disabled] .btn-accent:hover,
fieldset[disabled] .btn-accent:focus,
fieldset[disabled] .btn-accent.focus {
color: #4d4d4d;
background-color: #ffc142;
border-color: #ffc142;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
......@@ -212,7 +225,8 @@ blockquote {
.input-group .form-control:focus ~ .input-group-addon {
border-color: #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
-webkit-box-shadow: 0 2px 0 0 #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
}
#skip-link a {
......@@ -234,10 +248,12 @@ blockquote {
}
.navbar-scrollable:before {
background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));
background: linear-gradient(90deg, #1f7ea7, transparent);
}
.navbar-scrollable:after {
background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));
background: linear-gradient(-90deg, #1f7ea7, transparent);
}
......@@ -310,6 +326,7 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
.dropdown.has-alert.has-alert--desktop > a:before {
color: #4d4d4d;
background-color: #ffc142;
}
......@@ -330,6 +347,7 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
.vote-widget--social-vote .vote-vote {
color: #4d4d4d;
background-color: #ffc142;
}
......@@ -451,10 +469,12 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
.badge.badge-active {
color: #4d4d4d;
background-color: #ffc142;
}
.phase.phase-past:not(:last-child):before {
color: #4d4d4d;
background-color: #ffc142;
}
......@@ -463,6 +483,7 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
.phase.phase-active:before {
color: #4d4d4d;
background-color: #ffc142;
}
......@@ -523,7 +544,8 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
.search-take-over .form-text:focus {
border-color: #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
-webkit-box-shadow: 0 2px 0 0 #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
}
.btn--close-search-take-over svg,
.search-take-over svg {
......@@ -549,6 +571,7 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
@media (max-width: 599px) {
.dropdown.has-alert > a:before {
color: #4d4d4d;
background-color: #ffc142;
}
}
......@@ -14,6 +14,7 @@
}
.dropdown.has-alert.has-alert--desktop > a:before {
color: #4d4d4d;
background-color: #ffc142;
}
......@@ -23,6 +24,7 @@
@media (max-width: 599px) {
.dropdown.has-alert > a:before {
color: #4d4d4d;
background-color: #ffc142;
}
}
......@@ -11,6 +11,7 @@ $info = [
'brand-primary' => t('Primary color'),
'brand-secondary' => t('Secondary color'),
'brand-accent' => t('Accent color'),
'brand-accent-text' => t('Accent Text color'),
'brand-link' => t('Link color'),
'navbar-bg' => t('Navigation background'),
'navbar-text' => t('Navigation text'),
......@@ -30,6 +31,7 @@ $info = [
'brand-primary' => '#29abe2',
'brand-secondary' => '#1f80aa',
'brand-accent' => '#ffc142',
'brand-accent-text' => '#4d4d4d',
'brand-link' => '#33b5e5',
'navbar-bg' => '#333333',
'navbar-text' => '#ffffff',
......@@ -45,6 +47,7 @@ $info = [
'brand-primary' => '#5c1b94',
'brand-secondary' => '#2a004e',
'brand-accent' => '#FF7A5A',
'brand-accent-text' => '#4d4d4d',
'brand-link' => '#833bc1',
'navbar-bg' => '#432160',
'navbar-text' => '#ffffff',
......@@ -60,6 +63,7 @@ $info = [
'brand-primary' => '#63b5ff',
'brand-secondary' => '#494B67',
'brand-accent' => '#F76B8A',
'brand-accent-text' => '#4d4d4d',
'brand-link' => '#626694',
'navbar-bg' => '#ffffff',
'navbar-text' => '#4a4867',
......@@ -75,6 +79,7 @@ $info = [
'brand-primary' => '#F75940',
'brand-secondary' => '#334252',
'brand-accent' => '#3DC7BE',
'brand-accent-text' => '#4d4d4d',
'brand-link' => '#f4806d',
'navbar-bg' => '#263342',
'navbar-text' => '#ffffff',
......
......@@ -61,6 +61,9 @@
$colorPreview.find('.btn-accent, .badge-accent').css('backgroundColor', $colorPalette.find('input[name="palette[brand-accent]"]').val());
$colorPreview.find('.color-preview-hero .btn-accent').css('border-color', $colorPalette.find('input[name="palette[brand-accent]"]').val());
// Brand accent text color.
$colorPreview.find('.btn-accent, .badge-accent').css('color', $colorPalette.find('input[name="palette[brand-accent-text]"]').val());
// Brand link color.
$colorPreview.find('.body-text a:not(.btn)').css('color', $colorPalette.find('input[name="palette[brand-link]"]').val());
......
......@@ -83,6 +83,7 @@ $default-color: #4d4d4d;
$brand-primary: #29abe2;
$brand-secondary: #1f80aa;
$brand-accent: #ffc142;
$brand-accent-text: #4d4d4d;
$brand-success: #5cb85c;
$brand-info: #33b5e5;
......
......@@ -24,6 +24,7 @@
.dropdown {
@include for-phone-only {
&.has-alert > a:before {
color: $brand-accent-text;
background-color: $brand-accent;
}
}
......@@ -31,6 +32,7 @@
// There are now items that don't have their own top level icon so these
// should show notifications in the user menu also on desktop.
&.has-alert.has-alert--desktop > a:before {
color: $brand-accent-text;
background-color: $brand-accent;
}
}
......
......@@ -137,11 +137,13 @@
}
.badge-accent {
color: $brand-accent-text;
background-color: $brand-accent;
border-color: $brand-accent;
}
.btn-accent {
color: $brand-accent-text;
background-color: $brand-accent;
border-color: $brand-accent;
......@@ -152,6 +154,7 @@
&.active,
.open > &.dropdown-toggle,
&.dropdown-toggle:hover {
color: $brand-accent-text;
background-color: $brand-accent;
border-color: $brand-accent;
background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
......@@ -163,6 +166,7 @@
&:hover,
&:focus,
&.focus {
color: $brand-accent-text;
background-color: $brand-accent;
border-color: $brand-accent;
background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
......@@ -355,6 +359,7 @@ html:not(.js) .navbar-default {
.dropdown {
@include for-phone-only {
&.has-alert > a:before {
color: $brand-accent-text;
background-color: $brand-accent;
}
}
......@@ -362,6 +367,7 @@ html:not(.js) .navbar-default {
// There are now items that don't have their own top level icon so these
// should show notifications in the user menu also on desktop.
&.has-alert.has-alert--desktop > a:before {
color: $brand-accent-text;
background-color: $brand-accent;
}
}
......@@ -422,6 +428,7 @@ html:not(.js) .navbar-default {
}
.vote-widget--social-vote .vote-vote {
color: $brand-accent-text;
background-color: $brand-accent;
}
......@@ -556,12 +563,14 @@ html:not(.js) .navbar-default {
}
.badge.badge-active {
color: $brand-accent-text;
background-color: $brand-accent;
}
.phase {
&.phase-past {
&:not(:last-child):before {
color: $brand-accent-text;
background-color: $brand-accent;
}
......@@ -572,6 +581,7 @@ html:not(.js) .navbar-default {
&.phase-active {
&:before {
color: $brand-accent-text;
background-color: $brand-accent;
}
}
......
......@@ -6,6 +6,7 @@ button_radius: '10'
color_primary: '#29abe2'
color_secondary: '#1f80aa'
color_accent: '#ffc142'
color_accent_text: '#4d4d4d'
color_link: '#33b5e5'
color_navbar_bg: '#333333'
color_navbar_text: '#ffffff'
......
Supports Markdown
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