init crater

This commit is contained in:
Mohit Panjwani
2019-11-11 12:16:00 +05:30
commit bdf2ba51d6
668 changed files with 158503 additions and 0 deletions

View File

@ -0,0 +1,55 @@
.base-button {
height: 40px;
padding: 6px 20px;
font-size: 14px;
font-weight: 500;
text-align: center;
display: flex;
align-items: center;
white-space: nowrap;
line-height: 14px;
&.btn-lg {
height: 45px;
font-size: 15px;
font-weight: 500;
text-align: center
}
&.btn-sm {
height: 34px;
padding: 5px 15px;
font-size: 12px;
font-weight: 500;
text-align: center
}
&.btn-danger {
color: #ffffff !important;
}
&.btn-outline-danger:hover {
color: #ffffff !important;
}
.icon-button {
text-align: center;
}
.icon-left {
margin-right: 10px !important;
}
.icon-right {
margin-left: 10px !important;
}
&.btn-cursor-not-allowed {
cursor: not-allowed !important;
}
.icon {
margin-right: 5px;
}
}

View File

@ -0,0 +1,46 @@
.base-date-input {
width: 100%;
position: relative;
.date-field {
width: 100%;
height: 40px;
background: #FFFFFF;
border: 1px solid $ls-color-gray--light;
box-sizing: border-box;
border-radius: 5px;
display: inline-block;
padding: 0px 6px 0px 40px;
font-size: 1rem;
line-height: 1.4;
cursor: pointer;
&:focus {
border: 1px solid #817AE3;
}
&.invalid {
border: 1px solid #FB7178 !important;
}
}
}
.vdp-datepicker__calendar-button {
position: absolute;
width: 13px;
height: 18px;
color: $ls-color-gray;
font-style: normal;
font-weight: 900;
font-size: 14px;
line-height: 16px;
top: 50%;
left: 20px;
transform: translate(-50%,-50%);
.icon-fa {
color: $ls-color-gray;
}
}

View File

@ -0,0 +1,89 @@
.base-input {
width: 100%;
position: relative;
.left-icon {
position: absolute;
width: 13px;
height: 18px;
min-width: 40px;
color: $ls-color-gray;
font-style: normal;
font-weight: 900;
font-size: 14px;
line-height: 16px;
top: 50%;
left: 20px;
z-index: 1;
transform: translate(-50%,-50%);
}
.right-icon {
position: absolute;
width: 13px;
height: 18px;
min-width: 18px;
color: $ls-color-gray;
font-style: normal;
font-weight: 900;
font-size: 14px;
line-height: 16px;
top: 50%;
right: 0px;
z-index: 1;
transform: translate(-50%, -50%);
}
.small-input {
max-width: 100px;
}
.input-field {
width: 100%;
height: 40px;
padding: 8px 13px;
text-align: left;
background: #FFFFFF;
border: 1px solid $ls-color-gray--light;
box-sizing: border-box;
border-radius: 5px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
&.v-money {
font-family: Arial, Helvetica, sans-serif !important;
}
&::placeholder {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: $ls-color-gray;
}
&:focus {
border: 1px solid #817AE3;
}
&.invalid {
border: 1px solid #FB7178 !important;
}
&.disabled {
background: $ls-color-gray--light !important;
color: $ls-color-gray--dark !important;
}
&-left-icon {
padding-left: 35px;
}
&-right-icon {
padding-right: 35px;
}
}
}

View File

@ -0,0 +1,38 @@
.base-loader {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: absolute;
height: 100%;
&.table-loader {
background: rgba(255, 255, 255, 0.5);
height: calc(100% - 80px);
top: 80px;
}
.spinner {
height: 50px;
width: 50px;
border: 6px solid $ls-color-primary--light;
border-top-color: $ls-color-gray--light;
border-radius: 100%;
animation: rotation 0.6s infinite linear 0.25s;
/* the opacity is used to lazyload the spinner, see animation delay */
/* this avoid the spinner to be displayed when visible for a very short period of time */
opacity: 0;
}
@keyframes rotation {
from {
opacity: 1;
transform: rotate(0deg);
}
to {
opacity: 1;
transform: rotate(359deg);
}
}
}

View File

@ -0,0 +1,3 @@
@function delay($interval, $count, $index) {
@return ($index * $interval) - ($interval * $count);
}

View File

@ -0,0 +1,25 @@
@mixin global-bg() {
background-color: $primary-color;
}
@mixin global-animation() {
animation-fill-mode: both;
}
@mixin balls() {
@include global-bg();
width: $ball-size;
height: $ball-size;
border-radius: 100%;
margin: $margin;
}
@mixin lines() {
@include global-bg();
width: $line-width;
height: $line-height;
border-radius: 2px;
margin: $margin;
}

View File

@ -0,0 +1,6 @@
$primary-color: $crater-theme--light !default;
$ball-size: 15px !default;
$margin: 2px !default;
$line-height: 35px !default;
$line-width: 4px !default;

View File

@ -0,0 +1,58 @@
@import './animation/variables';
@import './animation/mixins';
@import './animation/functions';
$size: 50px;
@keyframes ball-scale-ripple-multiple {
0% {
transform: scale(0.1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0.7;
}
100% {
opacity: 0.0;
}
}
@mixin ball-scale-ripple-multiple ($n:3, $start:0) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation-delay: delay(0.2s, $n, $i - 1);
}
}
}
.loader {
width: 100%;
position: relative;
min-height: 500px;
}
.ball-scale-ripple-multiple {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateY(-25px);
top: 60%;
left: 40%;
@include ball-scale-ripple-multiple();
transform: translateY(-$size / 2);
> div {
@include global-animation();
position: absolute;
top: -2px;
left: -26px;
width: $size;
height: $size;
border-radius: 100%;
border: 2px solid $primary-color;
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
}
}

View File

@ -0,0 +1,26 @@
.search-select {
position: relative;
width: 100%;
.activator {
position: relative;
width: 100%;
cursor: pointer;
}
.selector-menu {
display: flex;
flex-direction: column;
position: absolute;
z-index: 100;
width: 100%;
top: 0;
background: #FFFFFF;
box-shadow: $shadow-lg;
border-radius: 5px;
}
.selector-menu-above {
top: unset !important;
bottom: 100% !important;
}
}

View File

@ -0,0 +1,46 @@
.base-switch {
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 35px;
height: 16px;
background: $white;
border: 1px solid $ls-color-gray;
display: block;
border-radius: 16px;
position: relative;
}
label:after {
content: "";
position: absolute;
top: -3px;
left: 0px;
width: 20px;
height: 20px;
background: $ls-color-gray--dark;
border-radius: 15px;
transition: 0.3s;
}
input:checked+label {
background: $ls-color-primary--very-light;
}
input:checked+label:after {
left: calc(100% - 0px);
transform: translateX(-100%);
background: $ls-color-primary;
}
label:active:after {
width: 20px;
}
}

View File

@ -0,0 +1,42 @@
.base-text-area {
width: 100%;
&.text-area-field {
width: 100%;
padding: 8px 13px;
text-align: left;
background: #FFFFFF;
border: 1px solid $ls-color-gray--light;
box-sizing: border-box;
border-radius: 5px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 21px;
&::placeholder {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: $ls-color-gray;
}
&:focus {
border: 1px solid #817AE3;
}
&.invalid {
border: 1px solid #FB7178 !important;
}
&.disabled {
background: $ls-color-gray--light !important;
color: $ls-color-gray--dark !important;
}
&-icon {
padding-left: 35px;
}
}
}