Clean up the colors and styles for the bootstrap public site a bit more

This commit is contained in:
Kevin MacMartin 2018-04-26 00:02:56 -04:00
parent 68e78d2853
commit 42c76f0699
3 changed files with 44 additions and 13 deletions

View file

@ -24,8 +24,8 @@ $container-max-widths: (
$c-text: #111; // text $c-text: #111; // text
$c-text-light: #fff; // light text $c-text-light: #fff; // light text
$c-base: #2e2e2e; // base $c-base: #2e2e2e; // base
$c-accent: #d4d72e; // accent $c-accent: #fa7921; // accent
$c-error: #f00; // error $c-error: #fa2036; // error
// Values // Values
$nav-link-count: 2; $nav-link-count: 2;

View file

@ -7,12 +7,18 @@
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;
padding: 5px 10px; padding: 5px 10px;
border: 2px solid fade-out($c-text, 0.75); border: 2px solid fade-out($c-base, 0.75);
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
font-size: 14px; font-size: 14px;
transition: border $trans-speed; transition: border $trans-speed;
&:focus { border: 2px solid fade-out($c-base, 0.4); }
&.error { border: 2px solid $c-error; } &:focus {
border: 2px solid fade-out($c-accent, 0.4);
}
&.error {
border: 2px solid $c-error;
}
} }
textarea { textarea {
@ -21,13 +27,20 @@
} }
.submit { .submit {
background-color: lighten($c-base, 5%); @include font-sans-bold;
background-color: lighten($c-accent, 5%);
color: $c-text-light; color: $c-text-light;
font-weight: bold;
text-align: center; text-align: center;
transition: background-color $trans-speed; transition: background-color $trans-speed;
&:hover { background-color: $c-base; } cursor: pointer;
&.disabled { background-color: $c-base; }
&:hover {
background-color: $c-accent;
}
&.disabled {
background-color: $c-base;
}
} }
.notification { .notification {
@ -39,13 +52,19 @@
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transition: opacity $trans-speed; transition: opacity $trans-speed;
span { font-weight: bold; }
&.visible { opacity: 1; } &.visible {
opacity: 1;
}
&.success { &.success {
@include font-sans-bold;
background-color: transparent; background-color: transparent;
color: $c-text; color: $c-text;
font-weight: bold; }
span {
@include font-sans-bold;
} }
} }
} }

View file

@ -1,16 +1,23 @@
.subscription-form-section-component { .subscription-form-section-component {
$trans-speed: 100ms; $trans-speed: 100ms;
width: 200px; width: 200px;
border: 2px solid fade-out($c-base, 0.75);
border-radius: 3px;
background-color: lighten($c-base, 75%);
input { input {
margin: 5px; margin: 5px;
width: calc(100% - 10px); width: calc(100% - 10px);
padding: 3px; padding: 3px;
border: 1px solid $c-text; border: 2px solid fade-out($c-base, 0.75);
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
transition: border-color $trans-speed; transition: border-color $trans-speed;
&:not(:last-child) {
margin-bottom: 0px;
}
&.error { &.error {
border-color: $c-error; border-color: $c-error;
} }
@ -18,5 +25,10 @@
&::placeholder, &[type="submit"] { &::placeholder, &[type="submit"] {
text-transform: uppercase; text-transform: uppercase;
} }
&[type="submit"] {
@include font-sans-bold;
cursor: pointer;
}
} }
} }