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
Split 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. 41
      app/assets/stylesheets/_settings.scss

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

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

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

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

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

@ -10,17 +10,23 @@ $colour-5: #02CA9E; // green
$white: #FFFEFE;
$black: #333;
$gray: #E8E8E8;
$extra-light-gray: #F8F8F8;
$light-gray: #EEE;
$mid-gray: #888;
$red: #FF5A5F;
$blue: $colour-1;
$pink: $colour-2;
$red: #FF5A5F;
$extra-light-gray: #F8F8F8;
$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;
$orange: $colour-4;
$green: $colour-5;
$green: $colour-5;
$link-colour: darken($colour-1, 13%);
@ -117,6 +123,7 @@ $selected-colour: rgba($blue, 0.5);
overflow: hidden;
cursor: pointer;
@include text-stroke;
@include not-link-like;
@include before {
content: '';
@ -125,7 +132,7 @@ $selected-colour: rgba($blue, 0.5);
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0);
background-color: rgba($black, 0);
@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