Anson/Redline-Racing-Website
1
0
Fork 0
mirror of https://gitlab.com/redline-racing-division/redline-racing-website.git synced 2025-08-02 03:21:29 +00:00
Code Releases Activity

fancy shirt site

Browse Source
This commit is contained in:
Anson
2020-01-23 14:10:33 -07:00
parent b39560ec76
commit c2b9d56372
100 changed files with 15109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
shirt/assets/sass/components/_poptrox-popup.scss Normal file
View File

@@ -0,0 +1,167 @@
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Poptrox Popup */
.poptrox-overlay {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
.poptrox-popup {
background: transparentize(_palette(bg-alt), 0.075);
box-shadow: 0 1em 3em 0.5em rgba(0,0,0,0.25);
cursor: default;
&:before {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
@include vendor('background-image', (
'linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))',
'linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))'
));
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
opacity: 1;
}
.closer {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
background-image: url('images/close.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 3em;
height: 5em;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 5em;
z-index: 2;
}
.nav-previous,
.nav-next {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
background-image: url('images/arrow.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 5em;
cursor: pointer;
height: 8em;
margin-top: -4em;
opacity: 0;
position: absolute;
top: 50%;
width: 6em;
z-index: 2;
}
.nav-previous {
@include vendor('transform', 'scaleX(-1)');
left: 0;
}
.nav-next {
right: 0;
}
.caption {
@include padding(2em, 2em);
@include vendor('background-image', 'linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%)');
bottom: 0;
cursor: default;
left: 0;
position: absolute;
text-align: left;
width: 100%;
z-index: 2;
h2, h3, h4, h5, h6 {
margin: 0 0 (_size(element-margin) * 0.25) 0;
}
p {
color: _palette(fg-bold);
}
}
.loader {
@include vendor('animation', 'spinner 1s infinite linear !important');
background-image: url('images/spinner.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0.25;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
&:hover {
.closer,
.nav-previous,
.nav-next {
opacity: 0.5;
&:hover {
opacity: 1.0;
}
}
}
&.loading {
&:before {
opacity: 0;
}
}
body.touch & {
.closer,
.nav-previous,
.nav-next {
opacity: 1.0 !important;
}
}
@include breakpoint('<=medium') {
.closer {
background-size: 3em;
}
.nav-previous,
.nav-next {
background-size: 4em;
}
}
@include breakpoint('<=small') {
&:before {
display: none;
}
.caption {
display: none !important;
}
.closer,
.nav-previous,
.nav-next {
display: none !important;
}
}
}