diff --git a/src/styles/main.scss b/src/styles/main.scss index b4f1bf97..c0f5b17a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -78,6 +78,7 @@ body { @import "mo-components/hero-title"; } // PAGE STYLES +@import "pages/cpa"; @import "pages/petition"; @import "pages/donate"; @import "pages/donate_quickpay"; diff --git a/src/styles/mo-utilities/_color-classes.scss b/src/styles/mo-utilities/_color-classes.scss index 40467edd..0ca6652b 100644 --- a/src/styles/mo-utilities/_color-classes.scss +++ b/src/styles/mo-utilities/_color-classes.scss @@ -13,6 +13,9 @@ .bg-gray { background-color: $gray; } +.bg-lighter-gray { + background-color: $lighter-gray; +} .bg-light-gray { background-color: $light-gray; } @@ -46,6 +49,12 @@ .bg-light-blue { background-color: $light-blue; } +.bg-lapis-blue { + background-color: $lapis-blue; +} +.bg-pale-blue { + background-color: $pale-blue; +} .bg-red { background-color: $red; } @@ -67,6 +76,9 @@ .gray { color: $gray; } +.lighter-gray { + color: $lighter-gray; +} .light-gray { color: $light-gray; } @@ -97,6 +109,12 @@ .light-blue { color: $light-blue; } +.lapis-blue { + color: $lapis-blue; +} +.pale-blue { + color: $pale-blue; +} .red { color: $red; } diff --git a/src/styles/pages/_cpa.scss b/src/styles/pages/_cpa.scss new file mode 100644 index 00000000..770961a1 --- /dev/null +++ b/src/styles/pages/_cpa.scss @@ -0,0 +1,33 @@ +.giraffe { + .cpa { + + #unknown_user { + background-color: $lighter-gray; + padding:27px; + .input-block { + + label { + font-size: 15px; + } + + input { + width: 100%; + border: 0px; + background-color: $white; + } + + } + + } + + form #survey-questions label { + font-size:25px; + } + button.btn { + background-color: $lapis-blue; + @include hover { + background-color: $lapis-blue; + } + } + } +} diff --git a/src/styles/settings/_colors.scss b/src/styles/settings/_colors.scss index 8687e3aa..337ce8c7 100644 --- a/src/styles/settings/_colors.scss +++ b/src/styles/settings/_colors.scss @@ -3,6 +3,7 @@ $thin-air: #caf4ff; $white: #ffffff; $off-white: #f3f3f3; $gray: #cacaca; +$lighter-gray: #eeeeee; $light-gray: #a7a7a7; $slate-gray: #696a6a; $dark-gray: #222222; @@ -17,7 +18,9 @@ $paypal-blue: #ffc538; $paypal-blue-dark: #f5ae27; $azure: #00abff; $logo-blue: #1298FE; +$lapis-blue: #296190; $light-blue: #99ddff; +$pale-blue: #e8f4fe; $ice-blue: #e5f5ff; $red: #ea1c24; $muted-red: #c3645c; diff --git a/src/templates/pages/styleguide/basics.twig b/src/templates/pages/styleguide/basics.twig index 6f6a2620..4a1772eb 100644 --- a/src/templates/pages/styleguide/basics.twig +++ b/src/templates/pages/styleguide/basics.twig @@ -27,6 +27,7 @@ ['#ffffff', '$white'], ['#f3f3f3', '$off-white'], ['#cacaca', '$gray'], + ['#eeeeee', '$lighter-gray'], ['#a7a7a7', '$light-gray'], ['#696a6a', '$slate-gray'], ['rgba(34, 34, 34, 0.38)', '$dark-gray-38'], @@ -37,7 +38,9 @@ ['#005680', '$deep-sea-blue'], ['#0080bf', '$cerulean'], ['#00abff', '$azure'], + ['#296190', '$lapis-blue'], ['#99ddff', '$light-blue'], + ['#e8f4fe', '$pale-blue'], ['#e5f5ff', '$ice-blue'], ['#ea1c24', '$red'] ] %}