mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
102 lines
2.0 KiB
SCSS
102 lines
2.0 KiB
SCSS
// IONIC DEFAULT THEME COLORS
|
|
$colors: (
|
|
primary: #387ef5,
|
|
secondary: #32db64,
|
|
danger: #f53d3d,
|
|
light: #f4f4f4,
|
|
dark: #222
|
|
);
|
|
|
|
// https://css-tricks.com/html5-progress-element/
|
|
.progress, progress[value] {
|
|
width: 100%;
|
|
border: none;
|
|
margin: 5px 0;
|
|
height: 5px;
|
|
display: block;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
&::-webkit-progress-bar {
|
|
background-color: lighten( map-get($colors, primary), 35% );
|
|
}
|
|
&::-webkit-progress-value {
|
|
background-color: map-get($colors, primary);
|
|
}
|
|
}
|
|
|
|
// http://materializecss.com/preloader.html
|
|
// https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.css
|
|
.progress-materializecss {
|
|
position: absolute;
|
|
top: -1px;
|
|
height: 2px;
|
|
display: block;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
|
|
.indeterminate {
|
|
background-color: #002fff;
|
|
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
animation: indeterminate 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
animation: indeterminate-short 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
animation-delay: 2.15s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
.progress-container{
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
// IRRELEVANTS STYLES //
|
|
/////////////////////////
|