mirror of
https://github.com/skoobasteeve/rayandgwen-wedding.git
synced 2026-03-20 06:58:56 +00:00
82 lines
1.7 KiB
SCSS
82 lines
1.7 KiB
SCSS
$mta-red: #df0000;
|
|
$mta-green: #008700;
|
|
$mta-blue: #0a5786;
|
|
$mta-orange: #de3700;
|
|
$mta-purple: #5a045a;
|
|
$mta-green-2: #4f8403;
|
|
$mta-yellow: #FCCC0A;
|
|
$mta-gray: #666;
|
|
$mta-brown: #573208;
|
|
|
|
$subways: (mta-red: $mta-red,
|
|
mta-green: $mta-green,
|
|
mta-blue: $mta-blue,
|
|
mta-orange: $mta-orange,
|
|
mta-purple: $mta-purple,
|
|
mta-green-2: $mta-green-2,
|
|
mta-yellow: $mta-yellow,
|
|
mta-gray: $mta-gray,
|
|
mta-brown: $mta-brown);
|
|
|
|
$icon-padding: 0.4em;
|
|
|
|
[class*="subway-icon"] {
|
|
position: relative;
|
|
font-size: .75em;
|
|
z-index: 5;
|
|
height: 1em;
|
|
width: 1em;
|
|
line-height: 1em;
|
|
margin-left: $icon-padding/2;
|
|
margin-right: $icon-padding/2;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: inline-flex;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #000;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: calc(100% + #{$icon-padding});
|
|
height: calc(100% + #{$icon-padding});
|
|
left: -($icon-padding / 2);
|
|
top: -($icon-padding / 2);
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
}
|
|
|
|
&.express {
|
|
margin-left: $icon-padding/1.5;
|
|
margin-right: $icon-padding/1.5;
|
|
|
|
&::before {
|
|
transform: rotate(45deg);
|
|
border-radius: 0;
|
|
width: calc(100% + #{$icon-padding / 4});
|
|
height: calc(100% + #{$icon-padding / 4});
|
|
left: -($icon-padding / 8);
|
|
top: -($icon-padding / 8);
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $value1,
|
|
$value2 in $subways {
|
|
.#{$value1} {
|
|
&::before {
|
|
background-color: $value2;
|
|
}
|
|
|
|
@if $value2==$mta-yellow {
|
|
color: #000;
|
|
}
|
|
|
|
@else {
|
|
color: #fff;
|
|
}
|
|
}
|
|
} |