@mixin default-transition($param: all) {
transition: $param $normal-transition-time $default-ease;
}
@mixin translateX($value: -50%) {
transform: translateX($value);
}
@mixin translateY($value: -50%) {
transform: translateY($value);
}
@mixin translateXY($value: -50%) {
transform: translate($value , $value);
}
.slider {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
// .slider__radio
&__radio {
display: none;
}
// .slider__holder
&__holder {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
margin-top: 80px;
text-align: left;
@media (max-width: 900px) {
max-width: 540px;
}
@media (max-width: 600px) {
margin-top: 60px;
}
}
// .slider__item
&__item {
@include default-transition(all);
// Loop through .slider__item--(slide-number)
@for $slide from 1 through 5 {
// .slider__item--(slide-number)
&--#{$slide} {
// Within each .slider__item--(slide-number) loop through #slide-(number)
@for $i from 1 through 5 {
@if $i <= $slide - 3 {
// For the slides 3 or more positions on the right
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: -1;
opacity: 0;
transform: translateX(210px) scale(0.65);
}
}
@if $i == $slide - 2 {
// For the slide 2 positions on the right
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: 0;
transform: translateX(210px) scale(0.65);
}
}
@if $i == $slide - 1 {
// For the slide 1 positions on the right
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: 1;
transform: translateX(100px) scale(0.85);
}
}
@if $i == $slide {
// For the slide 1 positions under the active one
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
position: relative;
z-index: 2;
transform: translate(0) scale(1);
}
}
@if $i == $slide + 1 {
// For the slide 1 positions on the left
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: 1;
transform: translateX(-100px) scale(0.85);
}
}
@if $i == $slide + 2 {
// For the slide 2 positions on the left
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: 0;
transform: translateX(-210px) scale(0.65);
}
}
@if $i >= $slide + 3 {
// For the slide 3 positions or more on the left
// #slide-(number):checked ~ .slider__holder .slider__item--(slide-number)
#slide-#{$i}:checked ~ .slider__holder & {
z-index: -1;
opacity: 0;
transform: translateX(-210px) scale(0.65);
}
}
}
}
}
}
}
.card {
position: relative;
display: block;
border-radius: 8px;
background: $white;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.10);
}
.bullets {
z-index: 10;
display: block;
width: auto;
height: 10px;
height: 10px;
margin: 0 auto;
margin-top: 48px;
margin-bottom: 56px;
text-align: center;
@media (max-width: 600px) {
margin-top: 32px;
}
// .bullets__item
&__item {
@include default-transition();
// Loops through all the bullet points
@for $bullet from 1 through 5 {
// .bullets__item--(bullet-number)
&--#{$bullet} {
// #slide-(number):checked ~ .bullets .bullets__item--(bullet-number)
#slide-#{$bullet}:checked ~ .bullets & {
background: $white;
}
}
}
}
}
.section {
position: relative;
width: 100%;
padding: 120px 24px;
text-align: center;
// .section__entry
&__entry {
width: 100%;
max-width: 380px;
margin: 0 auto;
// .section__entry--center
&--center {
text-align: center;
}
}
// .section__title
&__title {
display: block;
padding-bottom: 12px;
}
// .section__text
&__text {
display: block;
}
}
.button {
display: inline-block;
height: 44px;
padding: 12px 16px;
font-weight: 500;
line-height: 20px;
color: $white;
border-radius: 3px;
background: rgba($black, 0.2);
// .button:hover
&:hover {
background: rgba($black, 0.1);
}
}
$white: #FFF;
$black: #000;
$significa: #5050FF; // Blue
$night: #3E4954; // Dark grey
$aluminum: #848995; // Grey
$moon: #E9EFF5; // Lines
$light: #F5F7F9; // Light grey background
body {
background-color: $significa;
}
.labs-bar {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
display: block;
width: 100%;
padding: 8px 0px;
background: rgba($black, 0.2);
// .labs-bar__inner
&__inner {
position: relative;
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
// .labs-bar__nav
&__nav {
position: relative;
display: block;
float: left;
}
// .labs-bar__link
&__link {
position: relative;
display: inline-block;
padding: 10px;
padding-left: 30px;
font-size: 12px;
font-weight: 700;
line-height: 20px;
color: $white;
letter-spacing: 0.5px;
text-transform: uppercase;
// .labs-bar__link:hover
&:hover {
// .labs-bar__link:hover:before
&:before {
left: -16px;
}
}
// .labs-bar__link:before
&:before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 24px;
height: 14px;
background-image: url('/images/general/arrow__right--white.svg');
background-repeat: no-repeat;
background-position: left;
background-size: cover;
content: '';
transform: translateY(-50%);
@include default-transition();
}
}
// .labs-bar__ branding
&__branding {
display: inline-block;
font-size: 20px;
line-height: 20px;
color: $white;
}
// .labs-bar__logo
&__logo {
width: auto;
height: 18px;
margin-top: 5px;
margin-left: 10px;
// .labs-bar__logo:hover
&:hover {
opacity: 0.8;
}
}
// .labs-bar__button
&__button {
float: right;
padding: 10px 16px;
font-size: 12px;
font-weight: 700;
line-height: 20px;
color: $white;
border-radius: 3px;
background: rgba($black, 0.2);
letter-spacing: 0.5px;
text-transform: uppercase;
// .labs-bar:hover
&:hover {
background: rgba($black, 0.1);
}
}
}
html {
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
-webkit-tap-highwhite-color: transparent;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
display: block;
font-family: $main-font;
}
.heading-2 {
font-family: $main-font;
font-size: 24px;
font-weight: 500;
line-height: 40px;
color: $black;
letter-spacing: 0.3px;
// COLOR MODIFIERS
//.heading-2--white
&--white {
color: $white;
}
}
.serif {
font-family: "Arnhem";
font-size: 24px;
font-weight: 100;
line-height: 38px;
color: $night;
@media (max-width: 400px) {
font-size: 20px;
line-height: 32px;
}
}
.heading-3 {
font-size: 18px;
font-weight: 600;
line-height: 25px;
color: $night;
letter-spacing: 0.3px;
// .heading-3 + .heading-3
& + & {
margin-top: 5px;
}
//COLOR MODIFIERS
// .heading-3--white
&--white {
color: $white;
}
// .heading-3--light
&--light {
color: $aluminum;
}
}
.text {
font-family: $main-font;
font-size: 18px;
font-weight: 400;
line-height: 30px;
color: $aluminum;
letter-spacing: 0px;
@media (max-width: 600px) {
font-size: 16px;
line-height: 30px;
}
//COLOR MODIFIERS
&--light-white {
color: rgba($white, 0.7);
}
}
.link {
position: relative;
display: inline-block;
font-weight: 600;
color: $significa;
//.text--link:after
&:after {
position: absolute;
top: 50%;
right: -32px;
display: block;
width: 24px;
height: 14px;
background-image: url('../images/slider/arrow__right--blue.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
content: '';
@include translateY();
@include default-transition();
}
//.text--link:hover
&:hover {
//.text--link:hover:after
&:after {
right: -48px;
}
}
}
SCSS making a slider
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.