Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-11 07:18:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Optimize scss

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-07-13 15:15:49 +02:00 committed by GitHub
parent 78d53003a3
commit 8f6e960a47
1 changed files with 75 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
image.scss
View File

@ -1,24 +1,26 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
img.frame-1 { img {
padding: 5px; &.frame-1 {
background: $content-background-color; padding: 5px;
border: 1px solid $content-border-color; background: $content-background-color;
@include box-shadow-out(#ffffff); border: 1px solid $content-border-color;
@include border-radius(3px); @include box-shadow-out(#ffffff);
} @include border-radius(3px);
}
img.frame-2 { &.frame-2 {
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
background: $content-background-color; background: $content-background-color;
} }
img.frame-3 { &.frame-3 {
padding: 5px; padding: 5px;
background: #ffffff; background: #ffffff;
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
@include border-radius(3px); @include border-radius(3px);
}
} }
@keyframes slidy { @keyframes slidy {
@ -33,16 +35,22 @@ img.frame-3 {
100% { left: -400%; } 100% { left: -400%; }
} }
div.slider-1 { overflow: hidden; } div.slider-1 {
div.slider-1 figure img { width: 20%; float: left; } overflow: hidden;
div.slider-1 figure {
position: relative; figure {
width: 500%; position: relative;
margin: 0; width: 500%;
left: 0; margin: 0;
text-align: left; left: 0;
font-size: 0; text-align: left;
animation: 30s slidy infinite; font-size: 0;
animation: 30s slidy infinite;
img {
width: 20%; float: left;
}
}
} }
.slider-2 { .slider-2 {
@ -50,45 +58,44 @@ div.slider-1 figure {
position: relative; position: relative;
padding-top: auto; padding-top: auto;
text-align: center; text-align: center;
}
.slider-2 > img { > img {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
transition: all 0.5s; transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
} }
.slider-2 input { input {
display: none; display: none;
}
.slider-2 label { &:checked+label {
display: inline-block; border-color: #666;
margin-top: calc(50% + 15px); opacity: 1;
margin-left: 15px;
border: 3px solid #999;
cursor: pointer;
opacity: 0.6;
}
.slider-2 label img{ +img {
display: block; opacity: 1;
} transform: scale(1);
}
}
~ img {
opacity: 0;
transform: scale(1.1);
}
}
.slider-2 input:checked+label { label {
border-color: #666; display: inline-block;
opacity: 1; margin-top: calc(50% + 15px);
} margin-left: 15px;
border: 3px solid #999;
cursor: pointer;
opacity: 0.6;
.slider-2 input ~ img { img{
opacity: 0; display: block;
transform: scale(1.1); }
} }
.slider-2 input:checked+label+img {
opacity: 1;
transform: scale(1);
} }