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

Standarized link style

development
Godwin 7 years ago
parent
0c4cde0669
commit
f533b079ba
3 changed files with 101 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      app/assets/stylesheets/_admin.scss
  2. 166
      app/assets/stylesheets/_application.scss
  3. 27
      app/assets/stylesheets/_settings.scss

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);

166
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 {
// content: '';
// position: absolute;
// border-bottom: 0 solid;
// right: 0;
// bottom: 0;
// left: 0;
// opacity: 0;
// @include _(transition, all 150ms ease-in-out);
// @include _(transform-origin, 25% 50%);
// @include _(transform, scaleX(0));
// }
@include after { // &:hover,
content: ''; // &:active,
position: absolute; // &:focus {
border-bottom: 0 solid; // @include after {
right: 0; // border-bottom: 0.1em solid;
bottom: 0; // opacity: 1;
left: 0; // @include _(transform, scaleX(1));
opacity: 0; // }
@include _(transition, all 150ms ease-in-out); // }
@include _(transform-origin, 25% 50%);
@include _(transform, scaleX(0));
}
&:hover,
&:active,
&:focus {
@include after {
border-bottom: 0.1em solid;
opacity: 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 {

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

@ -10,11 +10,17 @@ $colour-5: #02CA9E; // green
$white: #FFFEFE; $white: #FFFEFE;
$black: #333; $black: #333;
$gray: #E8E8E8; $red: #FF5A5F;
$extra-light-gray: #F8F8F8; $extra-light-gray: #F8F8F8;
$gray: #E8E8E8;
$light-gray: #EEE; $light-gray: #EEE;
$almost-light-gray: #CCC;
$mid-light-gray: #AAA;
$mid-gray: #888; $mid-gray: #888;
$red: #FF5A5F; $dark-gray: #666;
$facebook-blue: #3A5795;
$blue: $colour-1; $blue: $colour-1;
$pink: $colour-2; $pink: $colour-2;
@ -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;
}

Write Preview
Loading…
Cancel
Save