Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 03:08:41 +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";
img.frame-1 {
padding: 5px;
background: $content-background-color;
border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
}
img {
&.frame-1 {
padding: 5px;
background: $content-background-color;
border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
}
img.frame-2 {
border: 1px solid $content-border-color;
background: $content-background-color;
}
&.frame-2 {
border: 1px solid $content-border-color;
background: $content-background-color;
}
img.frame-3 {
padding: 5px;
background: #ffffff;
border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
&.frame-3 {
padding: 5px;
background: #ffffff;
border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff);
@include border-radius(3px);
}
}
@keyframes slidy {
@ -33,16 +35,22 @@ img.frame-3 {
100% { left: -400%; }
}
div.slider-1 { overflow: hidden; }
div.slider-1 figure img { width: 20%; float: left; }
div.slider-1 figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
div.slider-1 {
overflow: hidden;
figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
img {
width: 20%; float: left;
}
}
}
.slider-2 {
@ -50,45 +58,44 @@ div.slider-1 figure {
position: relative;
padding-top: auto;
text-align: center;
}
.slider-2 > img {
width: 100%;
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider-2 input {
display: none;
}
.slider-2 label {
display: inline-block;
margin-top: calc(50% + 15px);
margin-left: 15px;
border: 3px solid #999;
cursor: pointer;
opacity: 0.6;
}
.slider-2 label img{
display: block;
}
.slider-2 input:checked+label {
border-color: #666;
opacity: 1;
}
.slider-2 input ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider-2 input:checked+label+img {
opacity: 1;
transform: scale(1);
> img {
width: 100%;
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
input {
display: none;
&:checked+label {
border-color: #666;
opacity: 1;
+img {
opacity: 1;
transform: scale(1);
}
}
~ img {
opacity: 0;
transform: scale(1.1);
}
}
label {
display: inline-block;
margin-top: calc(50% + 15px);
margin-left: 15px;
border: 3px solid #999;
cursor: pointer;
opacity: 0.6;
img{
display: block;
}
}
}