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

143
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;
}
> img {
.slider-2 > 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); }
}
input {
.slider-2 input { display: none;
display: none;
} &:checked+label {
border-color: #666;
.slider-2 label { opacity: 1;
display: inline-block;
margin-top: calc(50% + 15px); +img {
margin-left: 15px; opacity: 1;
border: 3px solid #999; transform: scale(1);
cursor: pointer; }
opacity: 0.6; }
}
~ img {
.slider-2 label img{ opacity: 0;
display: block; 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;
.slider-2 input ~ img { cursor: pointer;
opacity: 0; opacity: 0.6;
transform: scale(1.1);
} img{
display: block;
.slider-2 input:checked+label+img { }
opacity: 1; }
transform: scale(1);
} }