at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,14 @@
|
||||
.no-data {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-color: $gray-100;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cursor-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.mask-line {
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 20px,
|
||||
black 90%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
[dir="rtl"] .mask-line {
|
||||
mask-image: linear-gradient(
|
||||
to left,
|
||||
transparent,
|
||||
black 20px,
|
||||
black 90%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.app-sidebar__inner {
|
||||
.search-wrapper {
|
||||
&.active {
|
||||
width: 200px;
|
||||
|
||||
.input-holder {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.close {
|
||||
left: 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.white-space {
|
||||
&-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.b-radius {
|
||||
&-5 {
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-options {
|
||||
.form-group {
|
||||
> label {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
&.is-disabled {
|
||||
.Select-value-label {
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-anchor {
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// reactstrap invalid icon
|
||||
.form-control.is-invalid,
|
||||
.was-validated .form-control:invalid {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
// loading
|
||||
.loading {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: placeload;
|
||||
animation-name: placeload;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
background: #f6f7f8;
|
||||
background: #eae4e4;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(8%, #eae4e4),
|
||||
color-stop(18%, #dddddd),
|
||||
color-stop(33%, #eae4e4)
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
left,
|
||||
#eae4e4 8%,
|
||||
#dddddd 18%,
|
||||
#eae4e4 33%
|
||||
);
|
||||
background: linear-gradient(to right, #eae4e4 8%, #dddddd 18%, #eae4e4 33%);
|
||||
-webkit-background-size: 800px 104px;
|
||||
background-size: 1200px 104px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes placeload {
|
||||
0% {
|
||||
background-position: -468px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 468px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes placeload {
|
||||
0% {
|
||||
background-position: -468px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 468px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// loading: end
|
||||
|
||||
.zoom-modal {
|
||||
&.fade .modal-dialog {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1.5);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
&.show .modal-dialog {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
// reactour (web guide)
|
||||
color: $gray-700;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
position: fixed;
|
||||
border-radius: 50px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
padding: 0;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
width: 54px;
|
||||
box-shadow: $box-shadow-default;
|
||||
z-index: 155;
|
||||
|
||||
svg {
|
||||
top: 50%;
|
||||
left: 55%;
|
||||
position: absolute;
|
||||
margin: -0.5em 0 0 -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-link:hover,
|
||||
.hover-link:focus {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.cost-calc {
|
||||
&__price-card .card {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $primary;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.cost-calc {
|
||||
&__price-card {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
bottom: 15px;
|
||||
|
||||
.start-btn {
|
||||
padding: 0.375rem 1.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
.navigation-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
overflow: auto;
|
||||
// white-space: nowrap;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.navigation-link {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-lg / 1.1;
|
||||
padding: ($layout-spacer-x / 1.5) 0;
|
||||
color: $gray-500;
|
||||
position: relative;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: $h4-font-size;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
@include border-radius(50px);
|
||||
display: block;
|
||||
margin: 0 auto 0.5rem;
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $gray-700;
|
||||
em {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vertical navigation menu
|
||||
.navigation-vertical {
|
||||
// max-width: 300px;
|
||||
|
||||
.navigation-ul {
|
||||
.navigation-link {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
padding: ($layout-spacer-x / 2);
|
||||
margin-bottom: ($layout-spacer-x / 3);
|
||||
@include border-radius($border-radius-lg);
|
||||
transition: all 0.2s;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: $gray-600;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
em {
|
||||
margin: 0;
|
||||
margin-inline-end: ($layout-spacer-x / 2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-200;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
|
||||
em {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) and (max-width: 991px) {
|
||||
.navigation-vertical {
|
||||
max-width: unset;
|
||||
|
||||
.navigation-ul {
|
||||
display: flex;
|
||||
|
||||
.navigation-link {
|
||||
text-align: start;
|
||||
display: block;
|
||||
padding: ($layout-spacer-x / 2);
|
||||
margin-bottom: 0;
|
||||
@include border-radius($border-radius-lg);
|
||||
transition: all 0.2s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-200;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.registration {
|
||||
.forms-wizard li {
|
||||
vertical-align: top;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
&.form-wizard-step-doing {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-price {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 -2px 0.5rem rgba($black, 0.15);
|
||||
border-top: 4px solid $primary;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './common';
|
||||
@import './analyze';
|
||||
@import './registration';
|
||||
@import './plan-details';
|
||||
@import './cost-calculator';
|
||||
Reference in New Issue
Block a user