mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 07:54:11 -05:00
Clean up the colors and styles for the bootstrap public site a bit more
This commit is contained in:
parent
68e78d2853
commit
42c76f0699
3 changed files with 44 additions and 13 deletions
4
resources/assets/sass/_var.scss
vendored
4
resources/assets/sass/_var.scss
vendored
|
@ -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;
|
||||||
|
|
39
resources/assets/sass/pages/_contact.scss
vendored
39
resources/assets/sass/pages/_contact.scss
vendored
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue