bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Standarized link style

Browse Source
This commit is contained in:
Godwin 2017-07-14 18:17:08 -07:00
parent 0c4cde0669
commit f533b079ba
3 changed files with 99 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/_admin.scss
View File

@ -654,10 +654,7 @@ nav.sub-menu {
border-bottom: 0; border-bottom: 0;
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
@include _(transition, box-shadow 150ms ease-in-out); @include _(transition, box-shadow 150ms ease-in-out);
@include not-link-like;
@include after {
display: none;
}
&:hover { &:hover {
@include default-box-shadow(top, 0.75); @include default-box-shadow(top, 0.75);

164
app/assets/stylesheets/_application.scss
View File

@ -74,35 +74,36 @@ u {
} }
a { a {
text-decoration: none; text-decoration: underline;
color: $link-colour;
border-bottom: 0 solid;
outline: 0; outline: 0;
position: relative;
cursor: pointer; cursor: pointer;
text-decoration-skip: ink;
@include link;
// border-bottom: 0 solid;
// position: relative;
@include after { // @include after {
content: ''; // content: '';
position: absolute; // position: absolute;
border-bottom: 0 solid; // border-bottom: 0 solid;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
opacity: 0; // opacity: 0;
@include _(transition, all 150ms ease-in-out); // @include _(transition, all 150ms ease-in-out);
@include _(transform-origin, 25% 50%); // @include _(transform-origin, 25% 50%);
@include _(transform, scaleX(0)); // @include _(transform, scaleX(0));
} // }
&:hover, // &:hover,
&:active, // &:active,
&:focus { // &:focus {
@include after { // @include after {
border-bottom: 0.1em solid; // border-bottom: 0.1em solid;
opacity: 1; // opacity: 1;
@include _(transform, scaleX(1)); // @include _(transform, scaleX(1));
} // }
} // }
} }
.target:target { .target:target {
@ -526,7 +527,7 @@ button,
} }
form.logout & { form.logout & {
background-color: #666; background-color: $dark-gray;
} }
#main &.modify { #main &.modify {
@ -544,7 +545,7 @@ button,
} }
&.subdued, #main &.subdued { &.subdued, #main &.subdued {
background-color: #888; background-color: $mid-gray;
} }
#main &.accented { #main &.accented {
@ -552,7 +553,7 @@ button,
} }
&.facebook { &.facebook {
background-color: #3A5795; background-color: $facebook-blue;
} }
&.small { &.small {
@ -737,8 +738,6 @@ button,
button { button {
width: 100%; width: 100%;
margin: 0; margin: 0;
// border: 0;
// border-top: inherit;
background-color: lighten($colour-1, 25%); background-color: lighten($colour-1, 25%);
} }
} }
@ -846,34 +845,32 @@ nav.sub-menu {
a { a {
margin: 0 1em 0.5em 0; margin: 0 1em 0.5em 0;
background-color: $gray; background-color: $gray;
color: #888; color: $mid-gray;
display: inline-block; display: inline-block;
padding: 0.25em 0.75em 0.333em; padding: 0.25em 0.75em 0.333em;
font-size: 0.9em; font-size: 0.9em;
border: 1px solid #AAA; border: 1px solid $mid-light-gray;
border-bottom-width: 0.2em; border-bottom-width: 0.2em;
@include _(border-radius, 0.15em); @include _(border-radius, 0.15em);
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
@include _(text-shadow, 0 0.05em 0.05em #FFF); @include _(text-shadow, 0 0.05em 0.05em $white);
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background-color: #D8D8D8; background-color: $light-gray;
} }
&.current { &.current {
background-color: #CCC; background-color: $almost-light-gray;
color: #666; color: $dark-gray;
padding: 0.333em 0.75em 0.25em; padding: 0.333em 0.75em 0.25em;
} }
@include after { @include not-link-like;
display: none;
}
} }
@include breakpoint(medium) { @include breakpoint(medium) {
border: 1px solid #AAA; border: 1px solid $mid-light-gray;
background-color: #AAA; background-color: $mid-light-gray;
border-bottom-width: 0.125em; border-bottom-width: 0.125em;
@include _(border-radius, 0.15em); @include _(border-radius, 0.15em);
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
@ -989,7 +986,7 @@ input {
z-index: $zindex-base + 3; z-index: $zindex-base + 3;
@include _(transform, translateY(-100%) scale(1)); @include _(transform, translateY(-100%) scale(1));
background-color: transparent; background-color: transparent;
color: #666; color: $dark-gray;
} }
} }
@ -1193,14 +1190,13 @@ input {
font-size: 1em; font-size: 1em;
input { input {
//display: none;
@include _(opacity, 0); @include _(opacity, 0);
@include _(transition, opacity 250ms ease-in-out); @include _(transition, opacity 250ms ease-in-out);
z-index: $zindex-base; z-index: $zindex-base;
position: absolute; position: absolute;
width: auto; width: auto;
margin: 0; margin: 0;
border: 1px solid #CCC; border: 1px solid $almost-light-gray;
height: 1.5em; height: 1.5em;
left: 0; left: 0;
top: 0; top: 0;
@ -1239,7 +1235,7 @@ input {
label { label {
display: block; display: block;
background-color: #FFF; background-color: $white;
height: 2.333em; height: 2.333em;
font-weight: normal; font-weight: normal;
font-size: 1.25em; font-size: 1.25em;
@ -1277,7 +1273,7 @@ input {
visibility: hidden; visibility: hidden;
left: 0.75em; left: 0.75em;
top: 0.25em; top: 0.25em;
border: 0.2em solid #FFF; border: 0.2em solid $white;
width: 0.75em; width: 0.75em;
height: 1.5em; height: 1.5em;
border-width: 0 .2em 0.2em 0; border-width: 0 .2em 0.2em 0;
@ -1320,7 +1316,7 @@ input {
top: -0.125em; top: -0.125em;
left: 0.075em; left: 0.075em;
line-height: 1em; line-height: 1em;
color: #FFF; color: $white;
height: 1em; height: 1em;
width: 1em; width: 1em;
} }
@ -1565,9 +1561,7 @@ fieldset {
color: inherit; color: inherit;
padding: 0.25em 0.75em; padding: 0.25em 0.75em;
@include after { @include not-link-like;
display: none;
}
} }
} }
@ -1622,14 +1616,14 @@ fieldset {
left: 0.5em; left: 0.5em;
margin: 0; margin: 0;
padding: 0 0.5em; padding: 0 0.5em;
background-color: #FFF; background-color: $white;
} }
time { time {
position: absolute; position: absolute;
top: -0.75em; top: -0.75em;
right: 0.75em; right: 0.75em;
background-color: #FFF; background-color: $white;
padding: 0 0.5em; padding: 0 0.5em;
} }
@ -1652,7 +1646,7 @@ fieldset {
margin-top: 0; margin-top: 0;
button { button {
@include _(transition, background-color 150ms ease-in-out); @include _(transition, background-color 150ms ease-in-out);
background-color: #888; background-color: $mid-gray;
} }
&.open { &.open {
@ -1826,7 +1820,7 @@ ul.warnings {
right: 0; right: 0;
padding: 0; padding: 0;
font-size: 6vw; font-size: 6vw;
background-color: #FFF; background-color: $white;
@include _-(display, flex); @include _-(display, flex);
@include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5)); @include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5));
@ -1852,14 +1846,11 @@ ul.warnings {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
padding: 0.5em 0; padding: 0.5em 0;
color: #FFF; color: $white;
@include _(border-radius, 0); @include _(border-radius, 0);
@include _(box-shadow, inset 0 0 1.5em 0.25em rgba(0, 0, 0, 0.125)); @include _(box-shadow, inset 0 0 1.5em 0.25em rgba(0, 0, 0, 0.125));
@include _(text-shadow, 0 0 0.25em rgba(0,0,0,0.5)); @include _(text-shadow, 0 0 0.25em rgba(0,0,0,0.5));
@include not-link-like;
@include after {
display: none;
}
.title { .title {
font-size: 0.8em; font-size: 0.8em;
@ -1890,12 +1881,7 @@ ul.warnings {
color: inherit; color: inherit;
padding: 0 0.333em; padding: 0 0.333em;
display: inline-block; display: inline-block;
@include not-link-like;
&:hover {
@include after {
display: none;
}
}
} }
li { li {
@ -1904,7 +1890,7 @@ ul.warnings {
display: inline-block; display: inline-block;
&.current { &.current {
border-color: #CCC; border-color: $almost-light-gray;
background-color: $extra-light-gray; background-color: $extra-light-gray;
} }
@ -1956,7 +1942,7 @@ ul.warnings {
left: -50%; left: -50%;
width: 100%; width: 100%;
@include _(opacity, 0.5); @include _(opacity, 0.5);
border-top: 0.25em dashed #CCC; border-top: 0.25em dashed $almost-light-gray;
} }
&:first-child { &:first-child {
@ -1983,8 +1969,8 @@ ul.warnings {
@include before { @include before {
content: ''; content: '';
position: absolute; position: absolute;
background-color: #CCC; background-color: $almost-light-gray;
@include _(box-shadow, 0 0 0.25rem #CCC); @include _(box-shadow, 0 0 0.25rem $almost-light-gray);
font-size: 1.3em; font-size: 1.3em;
top: -0.2em; top: -0.2em;
width: 0.55em; width: 0.55em;
@ -2032,7 +2018,7 @@ ul.warnings {
} }
.step { .step {
color: #CCC; color: $almost-light-gray;
position: absolute; position: absolute;
@include _(transform-origin, 10% 60%); @include _(transform-origin, 10% 60%);
@include _(transform, rotate(45deg)); @include _(transform, rotate(45deg));
@ -2047,6 +2033,7 @@ ul.warnings {
color: inherit; color: inherit;
@include _(color, 0.5); @include _(color, 0.5);
@include _(transition, color 150ms ease-in-out); @include _(transition, color 150ms ease-in-out);
@include not-link-like;
@include before { @include before {
content: ''; content: '';
@ -2057,10 +2044,6 @@ ul.warnings {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
@include after {
display: none;
}
} }
.current .step { .current .step {
@ -2185,9 +2168,7 @@ table.schedule {
color: inherit; color: inherit;
align-items: center; align-items: center;
@include after { @include not-link-like;
display: none;
}
.details { .details {
flex: 1; flex: 1;
@ -2212,7 +2193,7 @@ table.schedule {
.errors { .errors {
position: relative; position: relative;
border-top: 0.1rem solid #666; border-top: 0.1rem solid $dark-gray;
margin-top: 0.5em; margin-top: 0.5em;
padding-top: 0.25em; padding-top: 0.25em;
@ -2349,9 +2330,7 @@ a.logo {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@include after { @include not-link-like;
display: none;
}
} }
} }
@ -2689,7 +2668,7 @@ $header-tilt: 8deg;
a { a {
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
color: #666; @include link($dark-gray, 0);
} }
} }
@ -2724,9 +2703,8 @@ $header-tilt: 8deg;
margin: 0.5em; margin: 0.5em;
a { a {
@include after { @include not-link-like;
display: none;
}
svg { svg {
@include _(transition, fill 250ms ease-in-out); @include _(transition, fill 250ms ease-in-out);
} }
@ -2741,12 +2719,6 @@ $header-tilt: 8deg;
} }
.github { .github {
a {
@include after {
display: none;
}
}
&:hover .icons { &:hover .icons {
fill: #4183C4; fill: #4183C4;
} }
@ -3016,7 +2988,7 @@ html :focus {
#main .skip { #main .skip {
button { button {
background-color: #888; background-color: $mid-gray;
} }
} }
@ -3032,7 +3004,7 @@ html :focus {
} }
.currency { .currency {
color: #888; color: $mid-gray;
font-size: 1.5em; font-size: 1.5em;
} }
@ -3093,7 +3065,7 @@ body.policy .policy-agreement ul {
.facilitator { .facilitator {
margin: 0 0 0.5em 0.5em; margin: 0 0 0.5em 0.5em;
padding: 1.5em 0.5em 0.5em; padding: 1.5em 0.5em 0.5em;
border-top: 0.1em solid #CCC; border-top: 0.1em solid $almost-light-gray;
&:first-child { &:first-child {
border: 0; border: 0;
@ -3119,7 +3091,7 @@ body.policy .policy-agreement ul {
} }
.role { .role {
color: #666; color: $dark-gray;
white-space: nowrap; white-space: nowrap;
@include before { @include before {
@ -3793,7 +3765,7 @@ body.policy .policy-agreement ul {
.details { .details {
text-align: right; text-align: right;
color: #000; color: $black;
} }
.background { .background {

39
app/assets/stylesheets/_settings.scss
View File

@ -10,17 +10,23 @@ $colour-5: #02CA9E; // green
$white: #FFFEFE; $white: #FFFEFE;
$black: #333; $black: #333;
$gray: #E8E8E8; $red: #FF5A5F;
$extra-light-gray: #F8F8F8;
$light-gray: #EEE;
$mid-gray: #888;
$red: #FF5A5F;
$blue: $colour-1; $extra-light-gray: #F8F8F8;
$pink: $colour-2; $gray: #E8E8E8;
$light-gray: #EEE;
$almost-light-gray: #CCC;
$mid-light-gray: #AAA;
$mid-gray: #888;
$dark-gray: #666;
$facebook-blue: #3A5795;
$blue: $colour-1;
$pink: $colour-2;
$yellow: $colour-3; $yellow: $colour-3;
$orange: $colour-4; $orange: $colour-4;
$green: $colour-5; $green: $colour-5;
$link-colour: darken($colour-1, 13%); $link-colour: darken($colour-1, 13%);
@ -117,6 +123,7 @@ $selected-colour: rgba($blue, 0.5);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@include text-stroke; @include text-stroke;
@include not-link-like;
@include before { @include before {
content: ''; content: '';
@ -125,7 +132,7 @@ $selected-colour: rgba($blue, 0.5);
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(0,0,0,0); background-color: rgba($black, 0);
@include _(transition, background-color 150ms ease-in-out); @include _(transition, background-color 150ms ease-in-out);
} }
@ -153,3 +160,17 @@ $selected-colour: rgba($blue, 0.5);
} }
} }
} }
@mixin link($colour: $link-colour, $initial-opacity: 0.333) {
color: $colour;
text-decoration-color: rgba($colour, $initial-opacity);
@include _(transition, text-decoration-color ease-in-out 200ms);
&:hover, &:focus, &:active {
text-decoration-color: $colour;
}
}
@mixin not-link-like {
text-decoration: none;
}