amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-04-23 13:59:32 +00:00
Code Issues Projects Releases Wiki Activity

Preparation for build of a unique CSS

Browse Source
This commit is contained in:
Francis Lachapelle
2015-02-03 10:17:15 -05:00
parent 6040838396
commit 36c931b596
42 changed files with 65 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
UI/WebServerResources/scss/components/progressCircular/progressCircular.scss
View File

@@ -1,159 +1 @@
$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
$progress-circular-duration : 5.25s !default;
$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
$progress-circular-sporadic-duration : $progress-circular-duration !default;
$progress-circular-size : 50px !default;
@keyframes outer-rotate {
100% { transform: rotate(360deg); }
}
@keyframes left-wobble {
0%, 100% { transform: rotate(130deg); }
50% { transform: rotate( -5deg); }
}
@keyframes right-wobble {
0%, 100% { transform: rotate(-130deg); }
50% { transform: rotate( 5deg); }
}
@keyframes sporadic-rotate {
12.5% { transform: rotate( 135deg); }
25% { transform: rotate( 270deg); }
37.5% { transform: rotate( 405deg); }
50% { transform: rotate( 540deg); }
62.5% { transform: rotate( 675deg); }
75% { transform: rotate( 810deg); }
87.5% { transform: rotate( 945deg); }
100% { transform: rotate(1080deg); }
}
md-progress-circular {
width: $progress-circular-size;
height: $progress-circular-size;
display: block;
position: relative;
padding-top: 0 !important;
margin-bottom: 0 !important;
overflow: hidden;
.md-inner {
width: $progress-circular-size;
height: $progress-circular-size;
position: relative;
.md-gap {
position: absolute;
left: $progress-circular-size * 0.5 - 1;
right: $progress-circular-size * 0.5 - 1;
top: 0;
bottom: 0;
border-top: 5px solid black;
box-sizing: border-box;
}
.md-left, .md-right {
position: absolute;
top: 0;
height: $progress-circular-size;
width: $progress-circular-size * 0.5;
overflow: hidden;
.md-half-circle {
position: absolute;
top: 0;
width: $progress-circular-size;
height: $progress-circular-size;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: black black transparent;
border-radius: 50%;
}
}
.md-left {
left: 0;
.md-half-circle {
left: 0;
border-right-color: transparent;
}
}
.md-right {
right: 0;
.md-half-circle {
right: 0;
border-left-color: transparent;
}
}
}
$i: 0;
@while $i <= 100 {
&[value="#{$i}"] {
.md-inner {
.md-left {
.md-half-circle {
@if $i <= 50 {
transform: rotate(135deg);
} @else {
transition: transform 0.1s linear;
$deg: ($i - 50) / 50 * 180 + 135;
transform: rotate(#{$deg}deg);
}
}
}
.md-right {
.md-half-circle {
@if $i <= 50 {
transition: transform 0.1s linear;
$deg: $i / 50 * 180 - 135;
transform: rotate(#{$deg}deg);
} @else {
transform: rotate(45deg);
}
}
}
.md-gap {
border-bottom-width: 5px;
border-bottom-style: solid;
@if $i <= 50 {
border-bottom-color: transparent !important;
} @else {
transition: border-bottom-color 0.1s linear;
}
}
}
}
$i: $i + 1;
}
&:not([md-mode=indeterminate]) {
.md-inner {
.md-left, .md-right {
.md-half-circle {
}
}
}
}
&[md-mode=indeterminate] {
.md-spinner-wrapper {
animation: outer-rotate $progress-circular-outer-duration linear infinite;
.md-inner {
animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
.md-left, .md-right {
.md-half-circle {
animation-iteration-count: infinite;
animation-duration: ($progress-circular-duration * 0.25);
animation-timing-function: $progress-circular-ease-in-out;
}
}
.md-left {
.md-half-circle {
animation-name: left-wobble;
}
}
.md-right {
.md-half-circle {
animation-name: right-wobble;
}
}
}
}
}
}
@import 'extends';