From 16edec15164946039b917ad4a6b73b9c113152f9 Mon Sep 17 00:00:00 2001 From: Lauri Viitala Date: Thu, 1 Dec 2016 14:38:51 +0200 Subject: [PATCH] Update blue (#49) * revert old blue. use hex because styleguide doesn't display them if we use color mixins * fix compiled darkblue --- css/styles.css | 172 ++++++++++++++++++------------------ fonts/hy-icons.eot | Bin 25308 -> 25308 bytes fonts/hy-icons.ttf | Bin 25140 -> 25140 bytes fonts/hy-icons.woff | Bin 15272 -> 15272 bytes sass/variables/_colors.scss | 8 +- 5 files changed, 90 insertions(+), 90 deletions(-) diff --git a/css/styles.css b/css/styles.css index 13fc08e..304d7a2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2899,7 +2899,7 @@ th { transition-property: all; font-size: 13.125px; font-size: 0.9375rem; - background-color: #178feb; + background-color: #0098d0; border: none; color: #FFF; cursor: pointer; @@ -2922,7 +2922,7 @@ th { .button--action-before:hover, .button--action:hover, .button--anchor:hover, .button--expand:hover, .button--icon:hover, input[type="submit"]:hover, .horizontal-tabs .horizontal-tab-button > a:hover, .horizontal-tabs .box-card__fieldset .horizontal-tab-button > a:hover, .button:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -2945,7 +2945,7 @@ th { .theme-transparent.button--action, .theme-transparent.button--anchor, .theme-transparent.button--expand, .theme-transparent.button--icon, input.theme-transparent[type="submit"], .horizontal-tabs .horizontal-tab-button > a.theme-transparent, .horizontal-tabs .box-card__fieldset .horizontal-tab-button > a.theme-transparent, .button.theme-transparent { background-color: transparent; - color: #178feb; + color: #0098d0; } .theme-transparent.accordion__title:hover, @@ -2953,7 +2953,7 @@ th { .theme-transparent.button--action-before:hover, .theme-transparent.button--action:hover, .theme-transparent.button--anchor:hover, .theme-transparent.button--expand:hover, .theme-transparent.button--icon:hover, input.theme-transparent[type="submit"]:hover, .horizontal-tabs .horizontal-tab-button > a.theme-transparent:hover, .horizontal-tabs .box-card__fieldset .horizontal-tab-button > a.theme-transparent:hover, .button.theme-transparent:hover { - background-color: #178feb; + background-color: #0098d0; } .theme-transparent.accordion__title a:hover, @@ -2976,7 +2976,7 @@ th { */ .accordion__title, .button--accordion { - border: 2px solid #178feb; + border: 2px solid #0098d0; display: block; line-height: normal; overflow: hidden; @@ -3009,7 +3009,7 @@ th { .is-active.accordion__title, .button--accordion.is-active { - background-color: #178feb; + background-color: #0098d0; color: #FFF; } @@ -3058,7 +3058,7 @@ a:hover .button--action-before:before, .button--action:before { - background-color: #1073bf; + background-color: #0882B3; content: ""; height: 100%; } @@ -3079,7 +3079,7 @@ a:hover .button--action-before:hover:before, .button--action:hover:before { - background: #083a61; + background: #003146; } @@ -3104,7 +3104,7 @@ a:hover .theme-transparent.button--action-before:after, .button--action.theme-transparent:after { - color: #178feb; + color: #0098d0; margin-left: 15px; line-height: 0; position: static; @@ -3126,7 +3126,7 @@ a:hover .button--action.theme-transparent a:hover, .button--action.theme-transparent:hover, .button--action.theme-transparent:hover:after { - color: #0c5790; + color: #005479; } /* @@ -4099,13 +4099,13 @@ p { description: */ a, .box-card__fieldset a { - color: #178feb; + color: #0098d0; outline: 0; text-decoration: none; } a:hover { - color: #0c5790; + color: #005479; } a:hover, a:active, a:focus { @@ -4273,7 +4273,7 @@ dl, ol, ul { } .accordion--dark .accordion__title.ui-state-active { - background-color: #1073bf; + background-color: #0882B3; } /* @@ -4400,20 +4400,20 @@ dl, ol, ul { .breadcrumbs__item a { font-weight: 600; font-style: normal; - color: #178feb; + color: #0098d0; letter-spacing: 0.01em; text-decoration: none; text-transform: uppercase; } .breadcrumbs__item a:hover { - color: #1073bf; + color: #0882B3; } .breadcrumbs__divider { font-weight: 600; font-style: normal; - color: #178feb; + color: #0098d0; display: inline; margin-right: 0.5em; } @@ -5133,7 +5133,7 @@ dl, ol, ul { } .horizontal-tabs .horizontal-tab-button.selected > a, .horizontal-tabs .box-card__fieldset .horizontal-tab-button.selected > a { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -5151,7 +5151,7 @@ dl, ol, ul { } .horizontal-tabs .horizontal-tab-button > a, .horizontal-tabs .box-card__fieldset .horizontal-tab-button > a { background: none; - color: #178feb; + color: #0098d0; display: block; padding: 1em 3em; } @@ -5160,7 +5160,7 @@ dl, ol, ul { .horizontal-tabs .box-card__fieldset .horizontal-tab-button:hover > a { transition-property: all; background-color: white; - color: #0c5790; + color: #005479; } .horizontal-tabs .horizontal-tab-button:not(.selected):first-child { box-shadow: none; @@ -5391,7 +5391,7 @@ dl, ol, ul { } .index-topical__field a:hover { - color: #0c5790; + color: #005479; } .index-topical__content { @@ -5534,12 +5534,12 @@ td.jobs-listing__date { font-size: 0.75rem; font-weight: 600; font-style: normal; - background: #1073bf; + background: #0882B3; color: #FFF; padding: 0.3em 0.7em; text-transform: uppercase; - border-bottom: 1px solid #1073bf; - border-top: 1px solid #1073bf; + border-bottom: 1px solid #0882B3; + border-top: 1px solid #0882B3; display: inline-block; height: 2.2em; position: relative; @@ -5554,7 +5554,7 @@ td.jobs-listing__date { .label-row__item.theme-secondary { background: none; - color: #1073bf; + color: #0882B3; left: 0; padding-right: 0; position: absolute; @@ -5723,7 +5723,7 @@ td.jobs-listing__date { padding-left: 0; padding-top: 0.8em; position: relative; - background: #178feb; + background: #0098d0; color: #FFF; overflow: visible; padding-left: 1em; @@ -5751,13 +5751,13 @@ td.jobs-listing__date { } a:hover .theme-dark .list-of-links__link:after, .theme-dark .list-of-links__link:hover:after { - color: #0c5790; + color: #005479; } .theme-dark .list-of-links__link:after { transition-duration: 0.2s; transition-property: color background-color; - background-color: #1073bf; + background-color: #0882B3; color: #FFF; line-height: 2.8em; margin-top: 0; @@ -5769,22 +5769,22 @@ a:hover .theme-dark .list-of-links__link:after, .theme-dark .list-of-links__link } .theme-dark .list-of-links__link:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } a:hover .theme-dark .list-of-links__link:hover:after, .theme-dark .list-of-links__link:hover:after { - background: #083a61; + background: #003146; color: #FFF; } a:hover .theme-dark .list-of-links__link { - background-color: #0c5790; + background-color: #005479; color: #FFF; } a:hover .theme-dark .list-of-links__link:after { - background: #083a61; + background: #003146; color: #FFF; } @@ -6071,7 +6071,7 @@ a:hover .theme-dark .list-of-links__link:after { font-size: 0.9375rem; font-weight: 700; font-style: normal; - color: #178feb; + color: #0098d0; display: block; line-height: 1.25em; letter-spacing: 0.01em; @@ -6086,7 +6086,7 @@ a:hover .theme-dark .list-of-links__link:after { } .main-menu a:hover, .main-menu a.active-trail, .main-menu a.active { - color: #0c5790; + color: #005479; } .main-menu > ul.menu { @@ -6303,11 +6303,11 @@ a:hover .theme-dark .list-of-links__link:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; - color: #178feb; + color: #0098d0; } .is-open > .main-menu__expand:hover:before { - color: #0c5790; + color: #005479; } /* @@ -6392,11 +6392,11 @@ a:hover .theme-dark .list-of-links__link:after { } .fatmenu li.is-lvl2 > a:hover, .fatmenu .box-card__fieldset li.is-lvl2 > a:hover { - color: #0c5790; + color: #005479; } .fatmenu li.is-lvl2 > a.active-trail, .fatmenu .box-card__fieldset li.is-lvl2 > a.active-trail { - color: #0c5790; + color: #005479; } .fatmenu li.is-lvl2 > ul.menu { @@ -6423,7 +6423,7 @@ a:hover .theme-dark .list-of-links__link:after { } .fatmenu li.is-lvl3 > a:hover, .fatmenu .box-card__fieldset li.is-lvl3 > a:hover, .fatmenu li.is-lvl3 > a.active-trail, .fatmenu .box-card__fieldset li.is-lvl3 > a.active-trail, .fatmenu li.is-lvl3 > a.active, .fatmenu .box-card__fieldset li.is-lvl3 > a.active { - color: #0c5790; + color: #005479; } .fatmenu li.is-lvl3 > ul.menu { @@ -6431,11 +6431,11 @@ a:hover .theme-dark .list-of-links__link:after { } .fatmenu__title a { - color: #178feb; + color: #0098d0; } .fatmenu__title a:hover { - color: #0c5790; + color: #005479; } .fatmenu__title a:after { @@ -6466,7 +6466,7 @@ a:hover .theme-dark .list-of-links__link:after { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - color: #178feb; + color: #0098d0; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; @@ -6490,7 +6490,7 @@ a:hover .theme-dark .list-of-links__link:after { } .fatmenu__collapse:hover { - color: #0c5790; + color: #005479; } .fatmenu__collapse:before { @@ -6820,12 +6820,12 @@ ul.pager > li.is-active { transition-property: all; font-size: 13.125px; font-size: 0.9375rem; - background-color: #178feb; + background-color: #0098d0; border: none; color: #FFF; cursor: pointer; padding: 0.8em 1em; - background-color: #0c5790; + background-color: #005479; } @media (min-width: 48em) { @@ -6837,7 +6837,7 @@ ul.pager > li.is-active { ul.pager > li.is-active:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -6886,7 +6886,7 @@ ul.pager > li.pager__page a { transition-property: all; font-size: 13.125px; font-size: 0.9375rem; - background-color: #178feb; + background-color: #0098d0; border: none; color: #FFF; cursor: pointer; @@ -6905,7 +6905,7 @@ ul.pager > li.pager__page a { ul.pager > li.pager__page a:hover, .box-card__fieldset ul.pager > li.pager__page a:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -6933,7 +6933,7 @@ ul.pager > li.pager__previous a { padding-left: 0; padding-top: 0.8em; position: relative; - background: #178feb; + background: #0098d0; color: #FFF; overflow: visible; padding-left: 1em; @@ -6970,7 +6970,7 @@ a:hover ul.pager > li.pager__previous a:after, ul.pager > li.pager__previous a:hover:after, .box-card__fieldset ul.pager > li.pager__previous a:hover:after { - color: #0c5790; + color: #005479; } @@ -6978,7 +6978,7 @@ ul.pager > li.pager__previous a:after, .box-card__fieldset ul.pager > li.pager__previous a:after { transition-duration: 0.2s; transition-property: color background-color; - background-color: #1073bf; + background-color: #0882B3; color: #FFF; line-height: 2.8em; margin-top: 0; @@ -6992,7 +6992,7 @@ ul.pager > li.pager__previous a:after { ul.pager > li.pager__previous a:hover, .box-card__fieldset ul.pager > li.pager__previous a:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -7000,19 +7000,19 @@ a:hover ul.pager > li.pager__previous a:hover:after, ul.pager > li.pager__previous a:hover:after, .box-card__fieldset ul.pager > li.pager__previous a:hover:after { - background: #083a61; + background: #003146; color: #FFF; } a:hover ul.pager > li.pager__previous a { - background-color: #0c5790; + background-color: #005479; color: #FFF; } a:hover ul.pager > li.pager__previous a:after { - background: #083a61; + background: #003146; color: #FFF; } @@ -7047,7 +7047,7 @@ ul.pager > li.pager__next a { padding-left: 0; padding-top: 0.8em; position: relative; - background: #178feb; + background: #0098d0; color: #FFF; overflow: visible; padding-left: 1em; @@ -7082,7 +7082,7 @@ a:hover ul.pager > li.pager__next a:after, ul.pager > li.pager__next a:hover:after, .box-card__fieldset ul.pager > li.pager__next a:hover:after { - color: #0c5790; + color: #005479; } @@ -7090,7 +7090,7 @@ ul.pager > li.pager__next a:after, .box-card__fieldset ul.pager > li.pager__next a:after { transition-duration: 0.2s; transition-property: color background-color; - background-color: #1073bf; + background-color: #0882B3; color: #FFF; line-height: 2.8em; margin-top: 0; @@ -7104,7 +7104,7 @@ ul.pager > li.pager__next a:after { ul.pager > li.pager__next a:hover, .box-card__fieldset ul.pager > li.pager__next a:hover { - background-color: #0c5790; + background-color: #005479; color: #FFF; } @@ -7112,19 +7112,19 @@ a:hover ul.pager > li.pager__next a:hover:after, ul.pager > li.pager__next a:hover:after, .box-card__fieldset ul.pager > li.pager__next a:hover:after { - background: #083a61; + background: #003146; color: #FFF; } a:hover ul.pager > li.pager__next a { - background-color: #0c5790; + background-color: #005479; color: #FFF; } a:hover ul.pager > li.pager__next a:after { - background: #083a61; + background: #003146; color: #FFF; } @@ -7222,7 +7222,7 @@ a:hover .feed-listing__more-link a:after, .box-card__fieldset a:hover .feed-list .panel__more-link a:after, .box-card__fieldset a:hover .panel__more-link a:after, .panel__more-link a:hover:after { - color: #0c5790; + color: #005479; } @media (min-width: 48em) { @@ -7444,7 +7444,7 @@ a:hover .feed-listing__more-link a:after, .box-card__fieldset a:hover .feed-list .search-form__input { border-radius: 0; - border: 2px solid #178feb; + border: 2px solid #0098d0; height: 40px; line-height: 34px; padding-left: 1em; @@ -7453,7 +7453,7 @@ a:hover .feed-listing__more-link a:after, .box-card__fieldset a:hover .feed-list } .search-form__input:focus { - outline-color: #178feb; + outline-color: #0098d0; } @media (min-width: 48em) { @@ -7478,7 +7478,7 @@ input[type="submit"].search-form__submit { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; - background-color: #178feb; + background-color: #0098d0; bottom: 0; color: #FFF; height: 40px; @@ -7506,7 +7506,7 @@ input[type="submit"].search-form__submit { } .search-form--dark__input:focus { - outline-color: #178feb; + outline-color: #0098d0; } @media (min-width: 48em) { @@ -7540,7 +7540,7 @@ input[type="submit"].search-form--dark__submit { } .search-form--dark__input:focus + input[type="submit"].search-form--dark__submit { - color: #178feb; + color: #0098d0; } .search-form--dark__input:focus + input[type="submit"].search-form--dark__submit:hover { @@ -7691,12 +7691,12 @@ input[type="submit"].search-form--dark__submit { } .table-sortable tbody tr td a, .table-sortable tbody tr td a.active { - color: #178feb; + color: #0098d0; text-decoration: none; } .table-sortable tbody tr td a:hover, .table-sortable tbody tr td a.active:hover { - color: #1073bf; + color: #0882B3; text-decoration: none; } @@ -7774,7 +7774,7 @@ input[type="submit"].search-form--dark__submit { .table-simple td a.active, .table-simple th a, .table-simple th a.active { - color: #178feb; + color: #0098d0; text-decoration: none; } @@ -7783,7 +7783,7 @@ input[type="submit"].search-form--dark__submit { .table-simple td a.active:hover, .table-simple th a:hover, .table-simple th a.active:hover { - color: #1073bf; + color: #0882B3; text-decoration: none; } @@ -7946,7 +7946,7 @@ input[type="submit"].search-form--dark__submit { } .tag-list__item a:hover { - color: #0c5790; + color: #005479; } /* @@ -8005,12 +8005,12 @@ input[type="submit"].search-form--dark__submit { } .box-application__td a, .box-application__td a.active { - color: #178feb; + color: #0098d0; text-decoration: none; } .box-application__td a:hover, .box-application__td a.active:hover { - color: #1073bf; + color: #0882B3; text-decoration: none; } @@ -8066,7 +8066,7 @@ input[type="submit"].search-form--dark__submit { } a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-application__link > a:after, a:hover .box-card__fieldset .box-application__link > a:after, .box-card__fieldset a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-application__link > a:after, .box-application__link > a:hover:after, .box-card__fieldset .box-application__link > a:hover:after { - color: #0c5790; + color: #005479; } /* @@ -8864,7 +8864,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .box-story--liftup:hover .box-story__title, .box-story--constrained:hover .box-story__title, .box-story:active .box-story__title, .box-story:hover .box-story__title { - color: #0c5790; + color: #005479; } @@ -8885,7 +8885,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .theme-plain.box-story--liftup, .theme-plain.box-story--constrained, .box-story.theme-plain { - background-color: #1073bf; + background-color: #0882B3; padding: 3.5em 1.5em; } @@ -8919,7 +8919,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .theme-plain.box-story--liftup .box-story__label, .theme-plain.box-story--constrained .box-story__label, .box-story.theme-plain .box-story__label { background: #FFF; - color: #1073bf; + color: #0882B3; } @@ -8933,7 +8933,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .theme-plain.box-story--liftup:hover, .theme-plain.box-story--constrained:hover, .box-story.theme-plain:hover { - background-color: #0c5790; + background-color: #005479; } @@ -9009,7 +9009,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .theme-plain-alt.box-story--liftup .box-story__label, .theme-plain-alt.box-story--constrained .box-story__label, .box-story.theme-plain-alt .box-story__label { background: #FFF; - color: #1073bf; + color: #0882B3; } @@ -9127,7 +9127,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli font-size: 0.75rem; font-weight: 600; font-style: normal; - background: #1073bf; + background: #0882B3; color: #FFF; padding: 0.3em 0.7em; text-transform: uppercase; @@ -9288,7 +9288,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .box-story__date a:hover, .box-story__tag a:hover { - color: #0c5790; + color: #005479; } .box-story__title { @@ -9358,7 +9358,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .box-story:active .box-story__link, .box-story:hover .box-story__link { - color: #0c5790; + color: #005479; } .box-story__embed { @@ -9493,13 +9493,13 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli .box-story--liftup:active .box-story__link, .box-story--liftup:hover .box-story__link { - color: #0c5790; + color: #005479; } .box-story--liftup:active .box-story__title, .box-story--liftup:hover .box-story__title { - color: #0c5790; + color: #005479; } /* @@ -9813,7 +9813,7 @@ a:hover .box-application__link > a:after, .box-card__fieldset a:hover .box-appli content: ""; font-size: 10.5px; font-size: 0.75rem; - color: #178feb; + color: #0098d0; margin-left: 0.75em; vertical-align: middle; } diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot index 9b3c570cd6b3161591025f765d7b1fa3ab88d596..bf92bbbe008b32ac8b3deb2fa1f7cd0e3c8016a3 100644 GIT binary patch delta 55 zcmca}l=03{#tAme`$XSPwBNPM-{va=H}eYyAh?pU&>BW>W??i)1OU&k5aIv; diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff index fddf31bae43798035bdc8e9fafe96a140e2ac9a9..c1e2a4bb9765de0664ffc3408d26876c6caba6ad 100644 GIT binary patch delta 61 zcmV-D0K)&Mcc^!ejRUCC5wVa$H7VD*_u~0&zA|t#zW|CbTuD8)97g~D{r@}5Vdm#R TE(Ze>NE868Z4ex@`!%fvvtk^M delta 61 zcmV-D0K)&Mcc^!ejRU5KIkAvJH7O6weewJ@Um3WWUjRiIuB0rqhSC3j|NqW%nE5%7 T%fY||5(NNq91cUX`!%fvnZg|) diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss index eb2f935..de61d39 100644 --- a/sass/variables/_colors.scss +++ b/sass/variables/_colors.scss @@ -21,10 +21,10 @@ $black: #222; color-list: list colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $silver, $darksilver, $lightgray, $gray, $darkgray, $green, $brown */ -$blue: #178feb; -$blue--active: darken($blue, 10%); -$darkblue: darken($blue, 20%); -$darkblue--active: darken($darkblue, 10%); +$blue: #0098d0; +$blue--active: #0882B3; +$darkblue: #005479; +$darkblue--active: #003146; // 6 shades of gray. Still 44 to go. $darkwhite : #FAFAFA;