WIP
This commit is contained in:
Marek Lesko
@@ -1,154 +1,154 @@
|
||||
@use "variables" as *;
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family;
|
||||
line-height: 1.334rem;
|
||||
overflow-x: hidden;
|
||||
color: var(--mat-sys-on-background);
|
||||
}
|
||||
|
||||
.mainWrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pageWrapper {
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 70px);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
&.maxWidth {
|
||||
max-width: $boxedWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
|
||||
td,
|
||||
mat-cell {
|
||||
white-space: nowrap;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.op-5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
margin-right: -5px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--mat-sys-on-background);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
width: 290px;
|
||||
position: fixed;
|
||||
right: -290px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: var(--mat-sys-level3);
|
||||
background-color: var(--mat-sys-background);
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.hljs-ln-line.hljs-ln-numbers {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html .flex-sm-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer[style*="visibility: hidden"] {
|
||||
display: none;
|
||||
@use "variables" as *;
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family;
|
||||
line-height: 1.334rem;
|
||||
overflow-x: hidden;
|
||||
color: var(--mat-sys-on-background);
|
||||
}
|
||||
|
||||
.mainWrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pageWrapper {
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 70px);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
&.maxWidth {
|
||||
max-width: $boxedWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
|
||||
td,
|
||||
mat-cell {
|
||||
white-space: nowrap;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.op-5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
margin-right: -5px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--mat-sys-on-background);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
width: 290px;
|
||||
position: fixed;
|
||||
right: -290px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: var(--mat-sys-level3);
|
||||
background-color: var(--mat-sys-background);
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.hljs-ln-line.hljs-ln-numbers {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html .flex-sm-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer[style*="visibility: hidden"] {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,43 +1,43 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
|
||||
|
||||
// font
|
||||
$font-family: "Plus Jakarta Sans", sans-serif;
|
||||
|
||||
// light color variable
|
||||
|
||||
// Sidenav
|
||||
$sidenav-desktop: 270px !default;
|
||||
$sidenav-mini: 80px !default;
|
||||
$header-height: 70px !default;
|
||||
|
||||
//BorderColor
|
||||
$borderColor: var(--mat-sys-outline-variant);
|
||||
$borderformColor: var(--mat-sys-outline-variant);
|
||||
|
||||
// custom
|
||||
$primary: var(--mat-sys-primary);
|
||||
$secondary: var(--mat-sys-secondary);
|
||||
$accent: var(--mat-sys-secondary);
|
||||
$error: var(--mat-sys-error);
|
||||
$warning: #ffae1f;
|
||||
$success: #13deb9;
|
||||
$white: #ffffff;
|
||||
|
||||
$light: var(--mat-sys-surface-bright);
|
||||
$light-primary: var(--mat-sys-primary-fixed-dim);
|
||||
$light-secondary: var(--mat-sys-secondary-fixed-dim);
|
||||
$light-accent: var(--mat-sys-secondary-fixed-dim);
|
||||
$light-error: var(--mat-sys-error-fixed-dim);
|
||||
$light-warning: #ffad1f40;
|
||||
$light-success: #13deb940;
|
||||
|
||||
// layout
|
||||
$boxedWidth: 1200px;
|
||||
$border-radius: 7px;
|
||||
|
||||
$card-spacer: 24px;
|
||||
|
||||
$text-color: var(--mat-sys-on-background);
|
||||
|
||||
$dark-text-secondary: rgba(255, 255, 255, 0.67);
|
||||
$dark-body-bg: #141a21;
|
||||
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
|
||||
|
||||
// font
|
||||
$font-family: "Plus Jakarta Sans", sans-serif;
|
||||
|
||||
// light color variable
|
||||
|
||||
// Sidenav
|
||||
$sidenav-desktop: 270px !default;
|
||||
$sidenav-mini: 80px !default;
|
||||
$header-height: 70px !default;
|
||||
|
||||
//BorderColor
|
||||
$borderColor: var(--mat-sys-outline-variant);
|
||||
$borderformColor: var(--mat-sys-outline-variant);
|
||||
|
||||
// custom
|
||||
$primary: var(--mat-sys-primary);
|
||||
$secondary: var(--mat-sys-secondary);
|
||||
$accent: var(--mat-sys-secondary);
|
||||
$error: var(--mat-sys-error);
|
||||
$warning: #ffae1f;
|
||||
$success: #13deb9;
|
||||
$white: #ffffff;
|
||||
|
||||
$light: var(--mat-sys-surface-bright);
|
||||
$light-primary: var(--mat-sys-primary-fixed-dim);
|
||||
$light-secondary: var(--mat-sys-secondary-fixed-dim);
|
||||
$light-accent: var(--mat-sys-secondary-fixed-dim);
|
||||
$light-error: var(--mat-sys-error-fixed-dim);
|
||||
$light-warning: #ffad1f40;
|
||||
$light-success: #13deb940;
|
||||
|
||||
// layout
|
||||
$boxedWidth: 1200px;
|
||||
$border-radius: 7px;
|
||||
|
||||
$card-spacer: 24px;
|
||||
|
||||
$text-color: var(--mat-sys-on-background);
|
||||
|
||||
$dark-text-secondary: rgba(255, 255, 255, 0.67);
|
||||
$dark-body-bg: #141a21;
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.user-category {
|
||||
margin-top: -45px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
height: 400px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgba(33, 33, 33, 0.6);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.featured-overlay {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-card-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.blog-title {
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.user-category {
|
||||
margin-top: -45px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
height: 400px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgba(33, 33, 33, 0.6);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.featured-overlay {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-card-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.blog-title {
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,85 +1,85 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.cal-event-action {
|
||||
text-decoration: none;
|
||||
margin-left: 5px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.cal-month-view {
|
||||
background-color: transparent !important;
|
||||
|
||||
.cal-open-day-events {
|
||||
background-color: $dark-body-bg !important;
|
||||
}
|
||||
|
||||
.cal-day-badge {
|
||||
background-color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.cal-day-cell.cal-weekend .cal-day-number {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.cal-cell {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.add-event-date .mat-mdc-icon-button {
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
.cal-week-view,
|
||||
.cal-week-view .cal-hour-odd {
|
||||
background-color: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-cell-row:hover,
|
||||
.cal-month-view .cal-cell-row .cal-cell:hover,
|
||||
.cal-month-view .cal-cell.cal-has-events.cal-open,
|
||||
.cal-week-view .cal-time-events .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover,
|
||||
.cal-week-view .cal-day-headers .cal-header:hover,
|
||||
.cal-week-view .cal-day-headers .cal-drag-over {
|
||||
background-color: var(--mat-option-focus-state-layer-color);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-day-cell:not(:last-child) {
|
||||
border-right-color: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-days .cal-cell-row,
|
||||
.cal-week-view .cal-hour:not(:last-child) .cal-hour-segment,
|
||||
.cal-week-view .cal-hour:last-child :not(:last-child) .cal-hour-segment {
|
||||
border-bottom-color: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-days,
|
||||
.cal-week-view,
|
||||
.cal-week-view .cal-day-headers,
|
||||
.cal-week-view .cal-time-events,
|
||||
.cal-week-view .cal-day-column,
|
||||
.cal-week-view .cal-day-headers .cal-header:first-child,
|
||||
.cal-week-view .cal-day-headers .cal-header:not(:last-child) {
|
||||
border-color: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// ticket app
|
||||
//
|
||||
.max-text {
|
||||
max-width: 250px;
|
||||
line-height: 1.57;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@use "../variables" as *;
|
||||
|
||||
.cal-event-action {
|
||||
text-decoration: none;
|
||||
margin-left: 5px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.cal-month-view {
|
||||
background-color: transparent !important;
|
||||
|
||||
.cal-open-day-events {
|
||||
background-color: $dark-body-bg !important;
|
||||
}
|
||||
|
||||
.cal-day-badge {
|
||||
background-color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.cal-day-cell.cal-weekend .cal-day-number {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.cal-cell {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.add-event-date .mat-mdc-icon-button {
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
.cal-week-view,
|
||||
.cal-week-view .cal-hour-odd {
|
||||
background-color: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-cell-row:hover,
|
||||
.cal-month-view .cal-cell-row .cal-cell:hover,
|
||||
.cal-month-view .cal-cell.cal-has-events.cal-open,
|
||||
.cal-week-view .cal-time-events .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover,
|
||||
.cal-week-view .cal-day-headers .cal-header:hover,
|
||||
.cal-week-view .cal-day-headers .cal-drag-over {
|
||||
background-color: var(--mat-option-focus-state-layer-color);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-day-cell:not(:last-child) {
|
||||
border-right-color: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-days .cal-cell-row,
|
||||
.cal-week-view .cal-hour:not(:last-child) .cal-hour-segment,
|
||||
.cal-week-view .cal-hour:last-child :not(:last-child) .cal-hour-segment {
|
||||
border-bottom-color: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.cal-month-view .cal-days,
|
||||
.cal-week-view,
|
||||
.cal-week-view .cal-day-headers,
|
||||
.cal-week-view .cal-time-events,
|
||||
.cal-week-view .cal-day-column,
|
||||
.cal-week-view .cal-day-headers .cal-header:first-child,
|
||||
.cal-week-view .cal-day-headers .cal-header:not(:last-child) {
|
||||
border-color: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// ticket app
|
||||
//
|
||||
.max-text {
|
||||
max-width: 250px;
|
||||
line-height: 1.57;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,36 +1,36 @@
|
||||
.chat-list {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
|
||||
&.even {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
-moz-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-app {
|
||||
.mat-drawer {
|
||||
width: 320px;
|
||||
}
|
||||
.ng-scroll-content {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-listing {
|
||||
.mdc-list-item {
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
margin-bottom: -23px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-list {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
|
||||
&.even {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
-moz-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-app {
|
||||
.mat-drawer {
|
||||
width: 320px;
|
||||
}
|
||||
.ng-scroll-content {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-listing {
|
||||
.mdc-list-item {
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
margin-bottom: -23px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.detail-part.movetodetail {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
background: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.welcome-app {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.contact-detail-part {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-detail-part.activeContact {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
}
|
||||
|
||||
// contact app
|
||||
.uploader {
|
||||
.upload-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-listing {
|
||||
.mdc-list-item__primary-text {
|
||||
margin-bottom: -11px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.detail-part.movetodetail {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
background: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.welcome-app {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.contact-detail-part {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-detail-part.activeContact {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
}
|
||||
|
||||
// contact app
|
||||
.uploader {
|
||||
.upload-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-listing {
|
||||
.mdc-list-item__primary-text {
|
||||
margin-bottom: -11px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.course-header {
|
||||
padding: 12px !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.course-header,
|
||||
.detail-bg {
|
||||
&.Angular {
|
||||
background-color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
&.Web {
|
||||
background-color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
&.Design {
|
||||
background-color: var(--mat-sys-secondary);
|
||||
}
|
||||
|
||||
&.Android {
|
||||
background-color: $warning;
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.course-header {
|
||||
padding: 12px !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.course-header,
|
||||
.detail-bg {
|
||||
&.Angular {
|
||||
background-color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
&.Web {
|
||||
background-color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
&.Design {
|
||||
background-color: var(--mat-sys-secondary);
|
||||
}
|
||||
|
||||
&.Android {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
@@ -1,94 +1,94 @@
|
||||
body {
|
||||
|
||||
// Add Product
|
||||
|
||||
.NgxEditor__Wrapper {
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
.NgxEditor__Seperator {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
.NgxEditor__MenuBar {
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.NgxEditor {
|
||||
background: var(--mat-card-elevated-container-color);
|
||||
color: var(--mat-sys-on-background);
|
||||
}
|
||||
|
||||
.NgxEditor__MenuItem .NgxEditor__MenuItem--Icon:hover {
|
||||
background-color: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-background);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown:hover {
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.NgxEditor__Dropdown--Text {
|
||||
color: var(--mat-sys-background);
|
||||
}
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Open {
|
||||
color: var(--mat-sys-background);
|
||||
background-color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Item:hover {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu {
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
|
||||
|
||||
.dropzone-box {
|
||||
border: 1px dashed var(--mat-sys-primary);
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
|
||||
.dropzone-content {
|
||||
.preview-image {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: var(--mat-sys-corner-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.theme-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.theme-icon {
|
||||
display: block;
|
||||
color: white;
|
||||
width: 18px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
// Add Product
|
||||
|
||||
.NgxEditor__Wrapper {
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
.NgxEditor__Seperator {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
.NgxEditor__MenuBar {
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.NgxEditor {
|
||||
background: var(--mat-card-elevated-container-color);
|
||||
color: var(--mat-sys-on-background);
|
||||
}
|
||||
|
||||
.NgxEditor__MenuItem .NgxEditor__MenuItem--Icon:hover {
|
||||
background-color: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-background);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown:hover {
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.NgxEditor__Dropdown--Text {
|
||||
color: var(--mat-sys-background);
|
||||
}
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Open {
|
||||
color: var(--mat-sys-background);
|
||||
background-color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--Item:hover {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
|
||||
.NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu {
|
||||
background-color: var(--mat-card-elevated-container-color);
|
||||
}
|
||||
|
||||
|
||||
.dropzone-box {
|
||||
border: 1px dashed var(--mat-sys-primary);
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
|
||||
.dropzone-content {
|
||||
.preview-image {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: var(--mat-sys-corner-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.theme-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.theme-icon {
|
||||
display: block;
|
||||
color: white;
|
||||
width: 18px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,52 +1,52 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.ngx-pagination {
|
||||
margin-bottom: 15px !important;
|
||||
|
||||
.current {
|
||||
background: var(--mat-sys-primary) !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
html .mail-sidebar {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.email-box {
|
||||
@media (max-width: 991px) {
|
||||
.detail-part {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.detail-part.movetodetail {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// invoice app
|
||||
|
||||
.add-invoice-list,
|
||||
.edit-invoice-list {
|
||||
.table {
|
||||
.mat-mdc-form-field-infix {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.ngx-pagination {
|
||||
margin-bottom: 15px !important;
|
||||
|
||||
.current {
|
||||
background: var(--mat-sys-primary) !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
html .mail-sidebar {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.email-box {
|
||||
@media (max-width: 991px) {
|
||||
.detail-part {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.detail-part.movetodetail {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// invoice app
|
||||
|
||||
.add-invoice-list,
|
||||
.edit-invoice-list {
|
||||
.table {
|
||||
.mat-mdc-form-field-infix {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,39 +1,39 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.task-list-section {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
width: 258px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.connect-sorting {
|
||||
padding: 20px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.img-task {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cdk-drop-list {
|
||||
padding: 0px 0px 20px 0px !important
|
||||
@use "../variables" as *;
|
||||
|
||||
.task-list-section {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
width: 258px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.connect-sorting {
|
||||
padding: 20px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.img-task {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cdk-drop-list {
|
||||
padding: 0px 0px 20px 0px !important
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.todo-item {
|
||||
position: relative;
|
||||
|
||||
.edit-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
top: 15px;
|
||||
padding: 0 13px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-left-sidebar {
|
||||
&.mat-sidenav {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
@use "../variables" as *;
|
||||
|
||||
.todo-item {
|
||||
position: relative;
|
||||
|
||||
.edit-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
top: 15px;
|
||||
padding: 0 13px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-left-sidebar {
|
||||
&.mat-sidenav {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@@ -1,68 +1,68 @@
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
|
||||
.dark-theme {
|
||||
// typography
|
||||
color: $dark-text-secondary;
|
||||
|
||||
.mat-mdc-menu-panel {
|
||||
color: var(--mat-sys-on-background) !important;
|
||||
}
|
||||
|
||||
.bg-white,
|
||||
.mdc-menu-surface {
|
||||
background-color: var(--mat-sys-surface) !important;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background-color: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------
|
||||
// border
|
||||
// -------------------------------------------------------
|
||||
|
||||
.b-1 {
|
||||
border: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-b-1 {
|
||||
border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-t-1 {
|
||||
border-top: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-r-1 {
|
||||
border-right: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-l-1 {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
// fill
|
||||
.customizer-button-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked i-tabler.fill-icon {
|
||||
fill: var(--mat-sys-primary-fixed-dim);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// horizontal + dark
|
||||
|
||||
html.dark-theme {
|
||||
.logodark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.light-theme {
|
||||
.logolight {
|
||||
display: none;
|
||||
}
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
|
||||
.dark-theme {
|
||||
// typography
|
||||
color: $dark-text-secondary;
|
||||
|
||||
.mat-mdc-menu-panel {
|
||||
color: var(--mat-sys-on-background) !important;
|
||||
}
|
||||
|
||||
.bg-white,
|
||||
.mdc-menu-surface {
|
||||
background-color: var(--mat-sys-surface) !important;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background-color: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------
|
||||
// border
|
||||
// -------------------------------------------------------
|
||||
|
||||
.b-1 {
|
||||
border: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-b-1 {
|
||||
border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-t-1 {
|
||||
border-top: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-r-1 {
|
||||
border-right: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
}
|
||||
|
||||
.b-l-1 {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
// fill
|
||||
.customizer-button-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked i-tabler.fill-icon {
|
||||
fill: var(--mat-sys-primary-fixed-dim);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// horizontal + dark
|
||||
|
||||
html.dark-theme {
|
||||
.logodark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.light-theme {
|
||||
.logolight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,35 +1,35 @@
|
||||
@use 'variables';
|
||||
@use 'mixins';
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: variables.$grid-gutter * -.5;
|
||||
margin-left: variables.$grid-gutter * -.5;
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.make-grid-columns();
|
||||
|
||||
|
||||
@each $breakpoint, $infix in variables.$breakpoint-infixs {
|
||||
@if ($breakpoint== 'xsmall') {
|
||||
@include mixins.loop-grid-columns(variables.$grid-columns, $infix);
|
||||
}
|
||||
|
||||
@else {
|
||||
@include mixins.bp-gt($breakpoint) {
|
||||
@include mixins.loop-grid-columns(variables.$grid-columns, $infix);
|
||||
}
|
||||
}
|
||||
}
|
||||
@use 'variables';
|
||||
@use 'mixins';
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: variables.$grid-gutter * -.5;
|
||||
margin-left: variables.$grid-gutter * -.5;
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.make-grid-columns();
|
||||
|
||||
|
||||
@each $breakpoint, $infix in variables.$breakpoint-infixs {
|
||||
@if ($breakpoint== 'xsmall') {
|
||||
@include mixins.loop-grid-columns(variables.$grid-columns, $infix);
|
||||
}
|
||||
|
||||
@else {
|
||||
@include mixins.bp-gt($breakpoint) {
|
||||
@include mixins.loop-grid-columns(variables.$grid-columns, $infix);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use 'variables';
|
||||
|
||||
@function bp($name, $breakpoints: variables.$breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
|
||||
@return $min;
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width.
|
||||
@mixin bp-gt($name, $breakpoints: variables.$breakpoints) {
|
||||
$min: bp($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width.
|
||||
@mixin bp-lt($name, $breakpoints: variables.$breakpoints) {
|
||||
$max: bp($name, $breakpoints) - 1px;
|
||||
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-grid-columns($i: 1, $list: '.col') {
|
||||
@each $breakpoint, $infix in variables.$breakpoint-infixs {
|
||||
$infix: if($infix == '', '', '-#{$infix}');
|
||||
|
||||
@if ($infix != '') {
|
||||
$list: '#{$list}, .col#{$infix}';
|
||||
}
|
||||
|
||||
@for $i from 1 through variables.$grid-columns {
|
||||
$list: '#{$list}, .col#{$infix}-#{$i}';
|
||||
}
|
||||
}
|
||||
|
||||
#{$list} {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: variables.$grid-gutter * .5;
|
||||
padding-left: variables.$grid-gutter * .5;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin loop-grid-columns($columns: $grid-columns, $breakpoint-infix: '') {
|
||||
$infix: if($breakpoint-infix == '', '', '-#{$breakpoint-infix}');
|
||||
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
flex: 0 0 math.percentage(math.div($i, $columns));
|
||||
max-width: math.percentage(math.div($i, $columns));
|
||||
}
|
||||
|
||||
.offset#{$infix}-#{$i} {
|
||||
margin-left: math.percentage(math.div($i, $columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use 'variables';
|
||||
|
||||
@function bp($name, $breakpoints: variables.$breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
|
||||
@return $min;
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width.
|
||||
@mixin bp-gt($name, $breakpoints: variables.$breakpoints) {
|
||||
$min: bp($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width.
|
||||
@mixin bp-lt($name, $breakpoints: variables.$breakpoints) {
|
||||
$max: bp($name, $breakpoints) - 1px;
|
||||
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-grid-columns($i: 1, $list: '.col') {
|
||||
@each $breakpoint, $infix in variables.$breakpoint-infixs {
|
||||
$infix: if($infix == '', '', '-#{$infix}');
|
||||
|
||||
@if ($infix != '') {
|
||||
$list: '#{$list}, .col#{$infix}';
|
||||
}
|
||||
|
||||
@for $i from 1 through variables.$grid-columns {
|
||||
$list: '#{$list}, .col#{$infix}-#{$i}';
|
||||
}
|
||||
}
|
||||
|
||||
#{$list} {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: variables.$grid-gutter * .5;
|
||||
padding-left: variables.$grid-gutter * .5;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin loop-grid-columns($columns: $grid-columns, $breakpoint-infix: '') {
|
||||
$infix: if($breakpoint-infix == '', '', '-#{$breakpoint-infix}');
|
||||
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
flex: 0 0 math.percentage(math.div($i, $columns));
|
||||
max-width: math.percentage(math.div($i, $columns));
|
||||
}
|
||||
|
||||
.offset#{$infix}-#{$i} {
|
||||
margin-left: math.percentage(math.div($i, $columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter: 30px !default;
|
||||
|
||||
$breakpoints: (
|
||||
xsmall: 0,
|
||||
small: 600px,
|
||||
medium: 960px,
|
||||
large: 1280px,
|
||||
xlarge: 2100px
|
||||
) !default;
|
||||
|
||||
$breakpoint-infixs: (
|
||||
xsmall: '',
|
||||
small: 'sm',
|
||||
medium: 'md',
|
||||
large: 'lg',
|
||||
xlarge: 'xl'
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter: 30px !default;
|
||||
|
||||
$breakpoints: (
|
||||
xsmall: 0,
|
||||
small: 600px,
|
||||
medium: 960px,
|
||||
large: 1280px,
|
||||
xlarge: 2100px
|
||||
) !default;
|
||||
|
||||
$breakpoint-infixs: (
|
||||
xsmall: '',
|
||||
small: 'sm',
|
||||
medium: 'md',
|
||||
large: 'lg',
|
||||
xlarge: 'xl'
|
||||
) !default;
|
||||
@@ -1,18 +1,18 @@
|
||||
@use "../variables" as *;
|
||||
@use "sass:meta"; // Import meta module for working with keyword arguments
|
||||
|
||||
// Mixin to dynamically generate classes based on provided colors
|
||||
@mixin syntax-colors2($args2...) {
|
||||
@each $name2, $color2 in meta.keywords($args2) {
|
||||
html .border-#{$name2} {
|
||||
border: 1px solid #{$color2} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Including the mixin with variables and CSS variables
|
||||
@include syntax-colors2($primary: var(--mat-sys-primary),
|
||||
$secondary: var(--mat-sys-secondary),
|
||||
$success: $success,
|
||||
$warning: $warning,
|
||||
@use "../variables" as *;
|
||||
@use "sass:meta"; // Import meta module for working with keyword arguments
|
||||
|
||||
// Mixin to dynamically generate classes based on provided colors
|
||||
@mixin syntax-colors2($args2...) {
|
||||
@each $name2, $color2 in meta.keywords($args2) {
|
||||
html .border-#{$name2} {
|
||||
border: 1px solid #{$color2} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Including the mixin with variables and CSS variables
|
||||
@include syntax-colors2($primary: var(--mat-sys-primary),
|
||||
$secondary: var(--mat-sys-secondary),
|
||||
$success: $success,
|
||||
$warning: $warning,
|
||||
$error: var(--mat-sys-error));
|
||||
@@ -1,32 +1,32 @@
|
||||
@use 'variables';
|
||||
|
||||
$utilities: (
|
||||
'border': (
|
||||
property: border,
|
||||
class: b,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-top': (
|
||||
property: border-top,
|
||||
class: b-t,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-bottom': (
|
||||
property: border-bottom,
|
||||
class: b-b,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-left': (
|
||||
property: border-left,
|
||||
class: b-l,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-right': (
|
||||
property: border-right,
|
||||
class: b-r,
|
||||
values: variables.$borders
|
||||
),
|
||||
|
||||
);
|
||||
|
||||
|
||||
@use 'variables';
|
||||
|
||||
$utilities: (
|
||||
'border': (
|
||||
property: border,
|
||||
class: b,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-top': (
|
||||
property: border-top,
|
||||
class: b-t,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-bottom': (
|
||||
property: border-bottom,
|
||||
class: b-b,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-left': (
|
||||
property: border-left,
|
||||
class: b-l,
|
||||
values: variables.$borders
|
||||
),
|
||||
'border-right': (
|
||||
property: border-right,
|
||||
class: b-r,
|
||||
values: variables.$borders
|
||||
),
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
|
||||
@mixin syntax-colors($args...) {
|
||||
@each $name, $color in meta.keywords($args) {
|
||||
html .bg-#{$name} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
html .text-#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include syntax-colors($primary: var(--mat-sys-primary),
|
||||
$secondary: var(--mat-sys-secondary),
|
||||
$success: $success,
|
||||
$warning: $warning,
|
||||
$error: var(--mat-sys-error),
|
||||
$white: $white,
|
||||
$light: $light,
|
||||
$light-error: var(--mat-sys-error-fixed-dim),
|
||||
$light-secondary: var(--mat-sys-secondary-fixed-dim),
|
||||
$light-success: $light-success,
|
||||
$light-warning: $light-warning,
|
||||
$light-primary: var(--mat-sys-primary-fixed-dim));
|
||||
|
||||
.fill-warning svg {
|
||||
fill: $warning;
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.fill-light svg {
|
||||
fill: $light;
|
||||
color: $light;
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
|
||||
@mixin syntax-colors($args...) {
|
||||
@each $name, $color in meta.keywords($args) {
|
||||
html .bg-#{$name} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
html .text-#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include syntax-colors($primary: var(--mat-sys-primary),
|
||||
$secondary: var(--mat-sys-secondary),
|
||||
$success: $success,
|
||||
$warning: $warning,
|
||||
$error: var(--mat-sys-error),
|
||||
$white: $white,
|
||||
$light: $light,
|
||||
$light-error: var(--mat-sys-error-fixed-dim),
|
||||
$light-secondary: var(--mat-sys-secondary-fixed-dim),
|
||||
$light-success: $light-success,
|
||||
$light-warning: $light-warning,
|
||||
$light-primary: var(--mat-sys-primary-fixed-dim));
|
||||
|
||||
.fill-warning svg {
|
||||
fill: $warning;
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.fill-light svg {
|
||||
fill: $light;
|
||||
color: $light;
|
||||
}
|
||||
@@ -1,59 +1,59 @@
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
.d-lg-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-lg-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.d-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.align-items-lg-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.d-md-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
.d-sm-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.p-xs-6 {
|
||||
padding: 0 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-1-auto {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
.d-lg-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-lg-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.d-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.align-items-lg-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.d-md-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
.d-sm-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.p-xs-6 {
|
||||
padding: 0 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-1-auto {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"display": (property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid table table-row table-cell flex inline-flex none,
|
||||
),
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"display": (property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid table table-row table-cell flex inline-flex none,
|
||||
),
|
||||
);
|
||||
@@ -1,71 +1,71 @@
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"flex": (property: flex,
|
||||
class: flex,
|
||||
values: (fill: 1 1 auto,
|
||||
),
|
||||
),
|
||||
"flex-direction": (property: flex-direction,
|
||||
class: flex,
|
||||
values: (row: row,
|
||||
row-reverse: row-reverse,
|
||||
col: column,
|
||||
col-reverse: column-reverse,
|
||||
),
|
||||
),
|
||||
"flex-grow": (property: flex-grow,
|
||||
class: flex,
|
||||
values: (grow-0: 0,
|
||||
grow-1: 1,
|
||||
),
|
||||
),
|
||||
"flex-shrink": (property: flex-shrink,
|
||||
class: flex,
|
||||
values: (shrink-0: 0,
|
||||
shrink-1: 1,
|
||||
),
|
||||
),
|
||||
"flex-wrap": (property: flex-wrap,
|
||||
class: flex,
|
||||
values: wrap nowrap wrap-reverse,
|
||||
),
|
||||
"justify-content": (property: justify-content,
|
||||
class: justify-content,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
),
|
||||
),
|
||||
"align-content": (property: align-content,
|
||||
class: align-content,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
"align-items": (property: align-items,
|
||||
class: align-items,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
"align-self": (property: align-self,
|
||||
class: align-self,
|
||||
values: (auto: auto,
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"flex": (property: flex,
|
||||
class: flex,
|
||||
values: (fill: 1 1 auto,
|
||||
),
|
||||
),
|
||||
"flex-direction": (property: flex-direction,
|
||||
class: flex,
|
||||
values: (row: row,
|
||||
row-reverse: row-reverse,
|
||||
col: column,
|
||||
col-reverse: column-reverse,
|
||||
),
|
||||
),
|
||||
"flex-grow": (property: flex-grow,
|
||||
class: flex,
|
||||
values: (grow-0: 0,
|
||||
grow-1: 1,
|
||||
),
|
||||
),
|
||||
"flex-shrink": (property: flex-shrink,
|
||||
class: flex,
|
||||
values: (shrink-0: 0,
|
||||
shrink-1: 1,
|
||||
),
|
||||
),
|
||||
"flex-wrap": (property: flex-wrap,
|
||||
class: flex,
|
||||
values: wrap nowrap wrap-reverse,
|
||||
),
|
||||
"justify-content": (property: justify-content,
|
||||
class: justify-content,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
),
|
||||
),
|
||||
"align-content": (property: align-content,
|
||||
class: align-content,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
"align-items": (property: align-items,
|
||||
class: align-items,
|
||||
values: (start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
"align-self": (property: align-self,
|
||||
class: align-self,
|
||||
values: (auto: auto,
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -1,25 +1,25 @@
|
||||
@use "sass:map";
|
||||
|
||||
// It makes the value negative.
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
|
||||
@each $key, $value in $map {
|
||||
@if $key !=0 {
|
||||
$result: map.merge($result, ("-" + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// It allows to combine multiple maps together.
|
||||
@function map-collect($maps...) {
|
||||
$collection: ();
|
||||
|
||||
@each $map in $maps {
|
||||
$collection: map.merge($collection, $map);
|
||||
}
|
||||
|
||||
@return $collection;
|
||||
}
|
||||
@use "sass:map";
|
||||
|
||||
// It makes the value negative.
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
|
||||
@each $key, $value in $map {
|
||||
@if $key !=0 {
|
||||
$result: map.merge($result, ("-" + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// It allows to combine multiple maps together.
|
||||
@function map-collect($maps...) {
|
||||
$collection: ();
|
||||
|
||||
@each $map in $maps {
|
||||
$collection: map.merge($collection, $map);
|
||||
}
|
||||
|
||||
@return $collection;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@use "sass:meta";
|
||||
|
||||
$columns: 54;
|
||||
|
||||
@mixin icon_size {
|
||||
@for $i from 1 through $columns {
|
||||
.icon-#{$i} {
|
||||
height: #{$i}px !important;
|
||||
width: #{$i}px !important;
|
||||
line-height: #{$i + 8}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include icon_size;
|
||||
@use "sass:meta";
|
||||
|
||||
$columns: 54;
|
||||
|
||||
@mixin icon_size {
|
||||
@for $i from 1 through $columns {
|
||||
.icon-#{$i} {
|
||||
height: #{$i}px !important;
|
||||
width: #{$i}px !important;
|
||||
line-height: #{$i + 8}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include icon_size;
|
||||
|
||||
@@ -1,108 +1,108 @@
|
||||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "sass:list";
|
||||
@use "variables";
|
||||
|
||||
@use "functions";
|
||||
@use "flexbox";
|
||||
@use "display";
|
||||
@use "border";
|
||||
@use "text";
|
||||
@use "spacing";
|
||||
@use "rounded";
|
||||
|
||||
$utilities: functions.map-collect(variables.$utilities,
|
||||
display.$utilities,
|
||||
flexbox.$utilities,
|
||||
spacing.$utilities,
|
||||
border.$utilities,
|
||||
rounded.$utilities,
|
||||
text.$utilities);
|
||||
|
||||
@each $key, $utility in $utilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
.#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$ltrutilities: functions.map-collect(spacing.$ltr);
|
||||
|
||||
@each $key, $utility in $ltrutilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
[dir="ltr"] .#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$rtlutilities: functions.map-collect(spacing.$rtl);
|
||||
|
||||
@each $key, $utility in $rtlutilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
[dir="rtl"] .#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "sass:list";
|
||||
@use "variables";
|
||||
|
||||
@use "functions";
|
||||
@use "flexbox";
|
||||
@use "display";
|
||||
@use "border";
|
||||
@use "text";
|
||||
@use "spacing";
|
||||
@use "rounded";
|
||||
|
||||
$utilities: functions.map-collect(variables.$utilities,
|
||||
display.$utilities,
|
||||
flexbox.$utilities,
|
||||
spacing.$utilities,
|
||||
border.$utilities,
|
||||
rounded.$utilities,
|
||||
text.$utilities);
|
||||
|
||||
@each $key, $utility in $utilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
.#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$ltrutilities: functions.map-collect(spacing.$ltr);
|
||||
|
||||
@each $key, $utility in $ltrutilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
[dir="ltr"] .#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$rtlutilities: functions.map-collect(spacing.$rtl);
|
||||
|
||||
@each $key, $utility in $rtlutilities {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
|
||||
|
||||
{
|
||||
$values: list.zip($values, $values);
|
||||
}
|
||||
|
||||
$properties: map.get($utility, property);
|
||||
$property-class-prefix: map.get($utility, class);
|
||||
|
||||
// Utility class maybe empty, (e.g. with position class)
|
||||
$property-class-prefix-hyphen: if($property-class-prefix =="",
|
||||
$property-class-prefix,
|
||||
$property-class-prefix + "-"
|
||||
);
|
||||
|
||||
@each $class-modifier, $value in $values {
|
||||
[dir="rtl"] .#{$property-class-prefix-hyphen + $class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +1,40 @@
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"border-radius": (property: border-radius,
|
||||
class: rounded,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-left-radius": (property: border-top-left-radius,
|
||||
class: r-t-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-right-radius": (property: border-top-right-radius,
|
||||
class: r-t-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-right-radius": (property: border-bottom-right-radius,
|
||||
class: r-b-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-left-radius": (property: border-bottom-left-radius,
|
||||
class: r-b-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-radius": (property: border-top-left-radius border-top-right-radius,
|
||||
class: r-t,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-radius": (property: border-bottom-left-radius border-bottom-right-radius,
|
||||
class: r-b,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-left-radius": (property: border-top-left-radius border-bottom-left-radius,
|
||||
class: r-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-right-radius": (property: border-top-right-radius border-bottom-right-radius,
|
||||
class: r-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"border-radius": (property: border-radius,
|
||||
class: rounded,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-left-radius": (property: border-top-left-radius,
|
||||
class: r-t-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-right-radius": (property: border-top-right-radius,
|
||||
class: r-t-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-right-radius": (property: border-bottom-right-radius,
|
||||
class: r-b-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-left-radius": (property: border-bottom-left-radius,
|
||||
class: r-b-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-top-radius": (property: border-top-left-radius border-top-right-radius,
|
||||
class: r-t,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-bottom-radius": (property: border-bottom-left-radius border-bottom-right-radius,
|
||||
class: r-b,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-left-radius": (property: border-top-left-radius border-bottom-left-radius,
|
||||
class: r-l,
|
||||
values: variables.$radius,
|
||||
),
|
||||
"border-right-radius": (property: border-top-right-radius border-bottom-right-radius,
|
||||
class: r-r,
|
||||
values: variables.$radius,
|
||||
),
|
||||
);
|
||||
@@ -1,136 +1,136 @@
|
||||
@use "sass:map";
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"margin": (property: margin,
|
||||
class: m,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-x": (property: margin-left margin-right,
|
||||
class: m-x,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-y": (property: margin-top margin-bottom,
|
||||
class: m-y,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-top": (property: margin-top,
|
||||
class: m-t,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
|
||||
"margin-bottom": (property: margin-bottom,
|
||||
class: m-b,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
|
||||
"negative-margin": (property: margin,
|
||||
class: m,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-x": (property: margin-left margin-right,
|
||||
class: m-x,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-y": (property: margin-top margin-bottom,
|
||||
class: m-y,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-top": (property: margin-top,
|
||||
class: m-t,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-right": (property: margin-right,
|
||||
class: m-r,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-bottom": (property: margin-bottom,
|
||||
class: m-b,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-left": (property: margin-left,
|
||||
class: m-l,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"padding": (property: padding,
|
||||
class: p,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-x": (property: padding-left padding-right,
|
||||
class: p-x,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-y": (property: padding-top padding-bottom,
|
||||
class: p-y,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-top": (property: padding-top,
|
||||
class: p-t,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
|
||||
"padding-bottom": (property: padding-bottom,
|
||||
class: p-b,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"gap": (property: gap,
|
||||
class: gap,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
);
|
||||
|
||||
$ltr: (
|
||||
"margin-right": (property: margin-right,
|
||||
class: m-r,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-left": (property: margin-left,
|
||||
class: m-l,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"padding-left": (property: padding-left,
|
||||
class: p-l,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-right": (property: padding-right,
|
||||
class: p-r,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
);
|
||||
|
||||
$rtl: (
|
||||
"margin-right": (property: margin-left,
|
||||
class: m-r,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-left": (property: margin-right,
|
||||
class: m-l,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"padding-left": (property: padding-right,
|
||||
class: p-l,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-right": (property: padding-left,
|
||||
class: p-r,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
@use "sass:map";
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"margin": (property: margin,
|
||||
class: m,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-x": (property: margin-left margin-right,
|
||||
class: m-x,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-y": (property: margin-top margin-bottom,
|
||||
class: m-y,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-top": (property: margin-top,
|
||||
class: m-t,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
|
||||
"margin-bottom": (property: margin-bottom,
|
||||
class: m-b,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
|
||||
"negative-margin": (property: margin,
|
||||
class: m,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-x": (property: margin-left margin-right,
|
||||
class: m-x,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-y": (property: margin-top margin-bottom,
|
||||
class: m-y,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-top": (property: margin-top,
|
||||
class: m-t,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-right": (property: margin-right,
|
||||
class: m-r,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-bottom": (property: margin-bottom,
|
||||
class: m-b,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"negative-margin-left": (property: margin-left,
|
||||
class: m-l,
|
||||
values: variables.$negative-spacers,
|
||||
),
|
||||
"padding": (property: padding,
|
||||
class: p,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-x": (property: padding-left padding-right,
|
||||
class: p-x,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-y": (property: padding-top padding-bottom,
|
||||
class: p-y,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-top": (property: padding-top,
|
||||
class: p-t,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
|
||||
"padding-bottom": (property: padding-bottom,
|
||||
class: p-b,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"gap": (property: gap,
|
||||
class: gap,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
);
|
||||
|
||||
$ltr: (
|
||||
"margin-right": (property: margin-right,
|
||||
class: m-r,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-left": (property: margin-left,
|
||||
class: m-l,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"padding-left": (property: padding-left,
|
||||
class: p-l,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-right": (property: padding-right,
|
||||
class: p-r,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
);
|
||||
|
||||
$rtl: (
|
||||
"margin-right": (property: margin-left,
|
||||
class: m-r,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"margin-left": (property: margin-right,
|
||||
class: m-l,
|
||||
values: map.merge(variables.$spacers,
|
||||
(auto: auto,
|
||||
)),
|
||||
),
|
||||
"padding-left": (property: padding-right,
|
||||
class: p-l,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
"padding-right": (property: padding-left,
|
||||
class: p-r,
|
||||
values: variables.$spacers,
|
||||
),
|
||||
);
|
||||
@@ -1,84 +1,84 @@
|
||||
@use "sass:map";
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"font-size": (
|
||||
property: font-size,
|
||||
class: f-s,
|
||||
values: variables.$font-sizes,
|
||||
),
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: f-w,
|
||||
values: variables.$font-wieghts,
|
||||
),
|
||||
"font-style": (
|
||||
property: font-style,
|
||||
class: font,
|
||||
values: italic normal,
|
||||
),
|
||||
"text-align": (
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: center right left,
|
||||
),
|
||||
"text-decoration": (
|
||||
property: text-decoration,
|
||||
class: text,
|
||||
values: none underline line-through,
|
||||
),
|
||||
"text-transform": (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: capitalize uppercase lowercase,
|
||||
),
|
||||
"white-space": (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
),
|
||||
),
|
||||
"word-wrap": (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (
|
||||
break: break-word,
|
||||
),
|
||||
),
|
||||
"text-overflow": (
|
||||
property: text-overflow,
|
||||
class: text,
|
||||
values: ellipsis,
|
||||
),
|
||||
"text-color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: (
|
||||
reset: inherit,
|
||||
current: currentColor,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.lh-normal {
|
||||
line-height: normal !important;
|
||||
@use "sass:map";
|
||||
@use "variables";
|
||||
|
||||
$utilities: (
|
||||
"font-size": (
|
||||
property: font-size,
|
||||
class: f-s,
|
||||
values: variables.$font-sizes,
|
||||
),
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: f-w,
|
||||
values: variables.$font-wieghts,
|
||||
),
|
||||
"font-style": (
|
||||
property: font-style,
|
||||
class: font,
|
||||
values: italic normal,
|
||||
),
|
||||
"text-align": (
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: center right left,
|
||||
),
|
||||
"text-decoration": (
|
||||
property: text-decoration,
|
||||
class: text,
|
||||
values: none underline line-through,
|
||||
),
|
||||
"text-transform": (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: capitalize uppercase lowercase,
|
||||
),
|
||||
"white-space": (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
),
|
||||
),
|
||||
"word-wrap": (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (
|
||||
break: break-word,
|
||||
),
|
||||
),
|
||||
"text-overflow": (
|
||||
property: text-overflow,
|
||||
class: text,
|
||||
values: ellipsis,
|
||||
),
|
||||
"text-color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: (
|
||||
reset: inherit,
|
||||
current: currentColor,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.lh-normal {
|
||||
line-height: normal !important;
|
||||
}
|
||||
@@ -1,102 +1,102 @@
|
||||
@use "functions" as *;
|
||||
|
||||
// Utility Map
|
||||
|
||||
$utilities: () !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 16px !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
2: $spacer * 0.125,
|
||||
4: $spacer * 0.25,
|
||||
5: 5px,
|
||||
6: 7px,
|
||||
8: $spacer * 0.5,
|
||||
10: 10px,
|
||||
12: $spacer * 0.75,
|
||||
14: 14px,
|
||||
15: 15px,
|
||||
16: $spacer,
|
||||
20: 20px,
|
||||
24: $spacer * 1.5,
|
||||
30: 30px,
|
||||
32: $spacer * 2,
|
||||
44: 44px,
|
||||
48: $spacer * 3,
|
||||
60: 60px,
|
||||
66: 66px,
|
||||
80: 80px,
|
||||
) !default;
|
||||
$negative-spacers: negativify-map($spacers) !default;
|
||||
|
||||
// Border
|
||||
|
||||
$border-color: var(--mat-sys-outline-variant) !default;
|
||||
$borders: (
|
||||
0: 0,
|
||||
1: 1px solid $border-color,
|
||||
2: 2px solid $border-color,
|
||||
4: 4px solid $border-color,
|
||||
8: 8px solid $border-color,
|
||||
) !default;
|
||||
|
||||
// Border radius
|
||||
|
||||
$radius-base: 7px !default;
|
||||
$radius: (
|
||||
0: 0,
|
||||
7: $radius-base,
|
||||
8: $radius-base * 2,
|
||||
12: $radius-base * 3,
|
||||
16: $radius-base * 4,
|
||||
full: 9999px,
|
||||
) !default;
|
||||
|
||||
// Text
|
||||
|
||||
$font-wieghts: (
|
||||
100: 100,
|
||||
200: 200,
|
||||
300: 300,
|
||||
400: 400,
|
||||
500: 500,
|
||||
600: 600,
|
||||
700: 700,
|
||||
800: 800,
|
||||
900: 900,
|
||||
) !default;
|
||||
|
||||
$font-sizes: (
|
||||
0: 0,
|
||||
10: 10px,
|
||||
12: 12px,
|
||||
14: 14px,
|
||||
15: 15px,
|
||||
16: 16px,
|
||||
18: 18px,
|
||||
20: 20px,
|
||||
21: 21px,
|
||||
24: 24px,
|
||||
28: 28px,
|
||||
30: 30px,
|
||||
36: 36px,
|
||||
40: 40px,
|
||||
48: 48px,
|
||||
) !default;
|
||||
|
||||
// Sizing
|
||||
|
||||
$sizes: (
|
||||
0: 0,
|
||||
20: 20%,
|
||||
25: 25%,
|
||||
40: 40%,
|
||||
50: 50%,
|
||||
60: 60%,
|
||||
75: 75%,
|
||||
80: 80%,
|
||||
full: 100%,
|
||||
auto: auto,
|
||||
) !default;
|
||||
@use "functions" as *;
|
||||
|
||||
// Utility Map
|
||||
|
||||
$utilities: () !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 16px !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
2: $spacer * 0.125,
|
||||
4: $spacer * 0.25,
|
||||
5: 5px,
|
||||
6: 7px,
|
||||
8: $spacer * 0.5,
|
||||
10: 10px,
|
||||
12: $spacer * 0.75,
|
||||
14: 14px,
|
||||
15: 15px,
|
||||
16: $spacer,
|
||||
20: 20px,
|
||||
24: $spacer * 1.5,
|
||||
30: 30px,
|
||||
32: $spacer * 2,
|
||||
44: 44px,
|
||||
48: $spacer * 3,
|
||||
60: 60px,
|
||||
66: 66px,
|
||||
80: 80px,
|
||||
) !default;
|
||||
$negative-spacers: negativify-map($spacers) !default;
|
||||
|
||||
// Border
|
||||
|
||||
$border-color: var(--mat-sys-outline-variant) !default;
|
||||
$borders: (
|
||||
0: 0,
|
||||
1: 1px solid $border-color,
|
||||
2: 2px solid $border-color,
|
||||
4: 4px solid $border-color,
|
||||
8: 8px solid $border-color,
|
||||
) !default;
|
||||
|
||||
// Border radius
|
||||
|
||||
$radius-base: 7px !default;
|
||||
$radius: (
|
||||
0: 0,
|
||||
7: $radius-base,
|
||||
8: $radius-base * 2,
|
||||
12: $radius-base * 3,
|
||||
16: $radius-base * 4,
|
||||
full: 9999px,
|
||||
) !default;
|
||||
|
||||
// Text
|
||||
|
||||
$font-wieghts: (
|
||||
100: 100,
|
||||
200: 200,
|
||||
300: 300,
|
||||
400: 400,
|
||||
500: 500,
|
||||
600: 600,
|
||||
700: 700,
|
||||
800: 800,
|
||||
900: 900,
|
||||
) !default;
|
||||
|
||||
$font-sizes: (
|
||||
0: 0,
|
||||
10: 10px,
|
||||
12: 12px,
|
||||
14: 14px,
|
||||
15: 15px,
|
||||
16: 16px,
|
||||
18: 18px,
|
||||
20: 20px,
|
||||
21: 21px,
|
||||
24: 24px,
|
||||
28: 28px,
|
||||
30: 30px,
|
||||
36: 36px,
|
||||
40: 40px,
|
||||
48: 48px,
|
||||
) !default;
|
||||
|
||||
// Sizing
|
||||
|
||||
$sizes: (
|
||||
0: 0,
|
||||
20: 20%,
|
||||
25: 25%,
|
||||
40: 40%,
|
||||
50: 50%,
|
||||
60: 60%,
|
||||
75: 75%,
|
||||
80: 80%,
|
||||
full: 100%,
|
||||
auto: auto,
|
||||
) !default;
|
||||
|
||||
@@ -1,208 +1,208 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.sidebarNav-horizontal {
|
||||
.childBox {
|
||||
background: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
// header
|
||||
.horizontal-topbar {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
|
||||
.branding {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $boxedWidth;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// sidebar
|
||||
.horizontal-navbar {
|
||||
position: relative;
|
||||
gap: 3px !important;
|
||||
|
||||
.parentBox {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
margin: 5px 0;
|
||||
|
||||
&.mega-menu {
|
||||
position: static;
|
||||
|
||||
&:hover {
|
||||
>.childBox>.ddmenu {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
>.childBox {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
|
||||
>.ddmenu {
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.two-column {
|
||||
&:hover {
|
||||
>.childBox>.ddmenu {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
>.childBox {
|
||||
width: 600px;
|
||||
|
||||
>.ddmenu {
|
||||
width: 49%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuLink {
|
||||
padding: 10px;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover>.menuLink {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
}
|
||||
|
||||
&:hover>.activeMenu,
|
||||
.activeMenu {
|
||||
color: $white !important;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.down-icon .mat-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.childBox {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--mat-sys-level1);
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
background-color: var(--mat-sys-surface);
|
||||
|
||||
.ddmenu {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin: 6px;
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover>.childBox {
|
||||
left: 230px;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
left: 235px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarNav-horizontal {
|
||||
|
||||
.topbar,
|
||||
.mainWrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
|
||||
&.pactive>a,
|
||||
&.pactive>a:hover,
|
||||
&.pactive:hover>a {
|
||||
background-color: var(--mat-sys-primary);
|
||||
color: $white !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ltr {
|
||||
.sidebarNav-horizontal {
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
&:last-child:hover>.childBox>.ddmenu {
|
||||
&:hover>.childBox {
|
||||
right: 250px;
|
||||
left: unset;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
right: 250px;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.sidebarNav-horizontal {
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
&:last-child:hover>.childBox>.ddmenu {
|
||||
&:hover>.childBox {
|
||||
left: 250px;
|
||||
right: unset;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
left: 250px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.sidebarNav-horizontal {
|
||||
.childBox {
|
||||
background: var(--mat-sys-surface);
|
||||
}
|
||||
|
||||
// header
|
||||
.horizontal-topbar {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
|
||||
.branding {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $boxedWidth;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// sidebar
|
||||
.horizontal-navbar {
|
||||
position: relative;
|
||||
gap: 3px !important;
|
||||
|
||||
.parentBox {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
margin: 5px 0;
|
||||
|
||||
&.mega-menu {
|
||||
position: static;
|
||||
|
||||
&:hover {
|
||||
>.childBox>.ddmenu {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
>.childBox {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
|
||||
>.ddmenu {
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.two-column {
|
||||
&:hover {
|
||||
>.childBox>.ddmenu {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
>.childBox {
|
||||
width: 600px;
|
||||
|
||||
>.ddmenu {
|
||||
width: 49%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuLink {
|
||||
padding: 10px;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover>.menuLink {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
}
|
||||
|
||||
&:hover>.activeMenu,
|
||||
.activeMenu {
|
||||
color: $white !important;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.down-icon .mat-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.childBox {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--mat-sys-level1);
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
background-color: var(--mat-sys-surface);
|
||||
|
||||
.ddmenu {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin: 6px;
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu:hover>.childBox {
|
||||
left: 230px;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
left: 235px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
&:hover>.childBox>.ddmenu {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarNav-horizontal {
|
||||
|
||||
.topbar,
|
||||
.mainWrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
|
||||
&.pactive>a,
|
||||
&.pactive>a:hover,
|
||||
&.pactive:hover>a {
|
||||
background-color: var(--mat-sys-primary);
|
||||
color: $white !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ltr {
|
||||
.sidebarNav-horizontal {
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
&:last-child:hover>.childBox>.ddmenu {
|
||||
&:hover>.childBox {
|
||||
right: 250px;
|
||||
left: unset;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
right: 250px;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.sidebarNav-horizontal {
|
||||
.horizontal-navbar {
|
||||
.parentBox {
|
||||
&:last-child:hover>.childBox>.ddmenu {
|
||||
&:hover>.childBox {
|
||||
left: 250px;
|
||||
right: unset;
|
||||
|
||||
>.ddmenu:hover>.childBox {
|
||||
left: 250px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,33 +1,33 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.breadcrumb-icon {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 19px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
padding: 0 10px 0 0;
|
||||
|
||||
&:first-child {
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.breadcrumb-icon {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 19px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
padding: 0 10px 0 0;
|
||||
|
||||
&:first-child {
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,118 +1,118 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
html .customizerNav {
|
||||
border-radius: 0px !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.customizer-button-group {
|
||||
&.two-row {
|
||||
display: inline-block;
|
||||
|
||||
&.theme-colors {
|
||||
.mat-button-toggle-appearance-standard {
|
||||
margin-left: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-appearance-standard {
|
||||
width: 80px;
|
||||
height: 65px;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.mat-button-toggle-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
.theme-circle {
|
||||
.theme-icon {
|
||||
display: flex;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: var(--mat-sys-corner-full);
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.theme-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.orange_theme {
|
||||
background-color: rgb(250, 137, 107);
|
||||
}
|
||||
|
||||
&.blue_theme {
|
||||
background-color: rgb(93, 135, 255);
|
||||
}
|
||||
|
||||
&.aqua_theme {
|
||||
background-color: rgb(0, 116, 186);
|
||||
}
|
||||
|
||||
&.purple_theme {
|
||||
background-color: rgb(118, 62, 189);
|
||||
}
|
||||
|
||||
&.green_theme {
|
||||
background-color: rgb(10, 126, 164);
|
||||
}
|
||||
|
||||
&.cyan_theme {
|
||||
background-color: rgb(1, 192, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-appearance-standard {
|
||||
padding: 9px;
|
||||
border: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
box-shadow: none;
|
||||
border-radius: $border-radius;
|
||||
transition: all 0.1s ease-in 0s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
|
||||
i-tabler.fill-icon {
|
||||
color: var(--mat-sys-primary);
|
||||
fill: var(--mat-sys-on-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-button-toggle-group {
|
||||
overflow: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
|
||||
&.mat-button-toggle-group-appearance-standard {
|
||||
border: 0 !important;
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
html .customizerNav {
|
||||
border-radius: 0px !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.customizer-button-group {
|
||||
&.two-row {
|
||||
display: inline-block;
|
||||
|
||||
&.theme-colors {
|
||||
.mat-button-toggle-appearance-standard {
|
||||
margin-left: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-appearance-standard {
|
||||
width: 80px;
|
||||
height: 65px;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.mat-button-toggle-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
.theme-circle {
|
||||
.theme-icon {
|
||||
display: flex;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: var(--mat-sys-corner-full);
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.theme-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.orange_theme {
|
||||
background-color: rgb(250, 137, 107);
|
||||
}
|
||||
|
||||
&.blue_theme {
|
||||
background-color: rgb(93, 135, 255);
|
||||
}
|
||||
|
||||
&.aqua_theme {
|
||||
background-color: rgb(0, 116, 186);
|
||||
}
|
||||
|
||||
&.purple_theme {
|
||||
background-color: rgb(118, 62, 189);
|
||||
}
|
||||
|
||||
&.green_theme {
|
||||
background-color: rgb(10, 126, 164);
|
||||
}
|
||||
|
||||
&.cyan_theme {
|
||||
background-color: rgb(1, 192, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-appearance-standard {
|
||||
padding: 9px;
|
||||
border: 1px solid var(--mat-sys-outline-variant) !important;
|
||||
box-shadow: none;
|
||||
border-radius: $border-radius;
|
||||
transition: all 0.1s ease-in 0s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
|
||||
i-tabler.fill-icon {
|
||||
color: var(--mat-sys-primary);
|
||||
fill: var(--mat-sys-on-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-button-toggle-group {
|
||||
overflow: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
|
||||
&.mat-button-toggle-group-appearance-standard {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,64 +1,64 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
html .topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
height: $header-height;
|
||||
|
||||
.notification-badge{
|
||||
.mat-badge-content{
|
||||
left: 80%;
|
||||
bottom: 85%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-dd {
|
||||
min-width: 360px !important;
|
||||
}
|
||||
|
||||
.apps-dd {
|
||||
min-width: 830px !important;
|
||||
overflow: unset !important;
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-hover-primary:hover {
|
||||
.hover-text {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-bg {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-dd {
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
.topbar {
|
||||
.mat-mdc-icon-button {
|
||||
color: $dark-text-secondary !important;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
--mat-button-text-label-text-color: $dark-text-secondary !important;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
html .topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
height: $header-height;
|
||||
|
||||
.notification-badge{
|
||||
.mat-badge-content{
|
||||
left: 80%;
|
||||
bottom: 85%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-dd {
|
||||
min-width: 360px !important;
|
||||
}
|
||||
|
||||
.apps-dd {
|
||||
min-width: 830px !important;
|
||||
overflow: unset !important;
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-hover-primary:hover {
|
||||
.hover-text {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-bg {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-dd {
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
.topbar {
|
||||
.mat-mdc-icon-button {
|
||||
color: $dark-text-secondary !important;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
--mat-button-text-label-text-color: $dark-text-secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "sidebar";
|
||||
@use "header";
|
||||
@use "customizer";
|
||||
@use "sidebar";
|
||||
@use "header";
|
||||
@use "customizer";
|
||||
@use "breacrumb";
|
||||
@@ -1,210 +1,210 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.mat-drawer.sidebarNav {
|
||||
width: $sidenav-desktop;
|
||||
flex-shrink: 0;
|
||||
transition: swift-ease-out(width);
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid $borderColor;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.branding {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebarNav-mini {
|
||||
.sidebarNav {
|
||||
width: $sidenav-mini;
|
||||
|
||||
.profile-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
padding: 8px 17px;
|
||||
|
||||
.mdc-list-item__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidenav-desktop;
|
||||
|
||||
.profile-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
padding: 8px 10px;
|
||||
|
||||
.mdc-list-item__content {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.mdc-list {
|
||||
padding: 0 24px;
|
||||
max-width: $sidenav-desktop;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideMenu {
|
||||
overflow: hidden;
|
||||
width: $sidenav-mini;
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: $sidenav-mini - 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
&.mdc-list {
|
||||
padding: 0 12px;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
transition: swift-ease-out(width);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.sidebarNav-mini {
|
||||
.contentWrapper {
|
||||
margin-left: $sidenav-mini !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customizerBtn {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
&.mdc-list {
|
||||
padding: 0 24px;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
margin: 12px 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.menu-list-item {
|
||||
height: 45px;
|
||||
padding: 8px 10px !important;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&.twoline {
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:focus {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.item-chip {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.activeMenu {
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.mat-mdc-list-item-icon {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-right: 14px;
|
||||
margin-left: 0 !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 0px;
|
||||
fill: transparent !important;
|
||||
}
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.arrow-icon {
|
||||
display: flex;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-list .top-parent .menu-list-item.activemenu {
|
||||
background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-list-item-icon {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@use "../variables" as *;
|
||||
|
||||
.mat-drawer.sidebarNav {
|
||||
width: $sidenav-desktop;
|
||||
flex-shrink: 0;
|
||||
transition: swift-ease-out(width);
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid $borderColor;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.branding {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebarNav-mini {
|
||||
.sidebarNav {
|
||||
width: $sidenav-mini;
|
||||
|
||||
.profile-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
padding: 8px 17px;
|
||||
|
||||
.mdc-list-item__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidenav-desktop;
|
||||
|
||||
.profile-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
padding: 8px 10px;
|
||||
|
||||
.mdc-list-item__content {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.mdc-list {
|
||||
padding: 0 24px;
|
||||
max-width: $sidenav-desktop;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideMenu {
|
||||
overflow: hidden;
|
||||
width: $sidenav-mini;
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: $sidenav-mini - 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
&.mdc-list {
|
||||
padding: 0 12px;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
transition: swift-ease-out(width);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.sidebarNav-mini {
|
||||
.contentWrapper {
|
||||
margin-left: $sidenav-mini !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customizerBtn {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
&.mdc-list {
|
||||
padding: 0 24px;
|
||||
|
||||
.mdc-list-group__subheader {
|
||||
margin: 12px 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.menu-list-item {
|
||||
height: 45px;
|
||||
padding: 8px 10px !important;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&.twoline {
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:focus {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.item-chip {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.activeMenu {
|
||||
background-color: var(--mat-sys-primary);
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.mat-mdc-list-item-icon {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-list-item__start {
|
||||
margin-right: 14px;
|
||||
margin-left: 0 !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 0px;
|
||||
fill: transparent !important;
|
||||
}
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.arrow-icon {
|
||||
display: flex;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-list .top-parent .menu-list-item.activemenu {
|
||||
background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
|
||||
|
||||
.mdc-list-item__primary-text {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-list-item-icon {
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,17 +1,17 @@
|
||||
$swift-ease-out-duration: 400ms;
|
||||
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
|
||||
@function swift-ease-out($property) {
|
||||
// The Material default animation curves.
|
||||
$transition: $property $swift-ease-out-duration
|
||||
$swift-ease-out-timing-function;
|
||||
|
||||
@return $transition;
|
||||
}
|
||||
|
||||
@function fast-out-slow($property) {
|
||||
// The Material default animation curves.
|
||||
$transition: $property 225ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
@return $transition;
|
||||
}
|
||||
$swift-ease-out-duration: 400ms;
|
||||
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
|
||||
@function swift-ease-out($property) {
|
||||
// The Material default animation curves.
|
||||
$transition: $property $swift-ease-out-duration
|
||||
$swift-ease-out-timing-function;
|
||||
|
||||
@return $transition;
|
||||
}
|
||||
|
||||
@function fast-out-slow($property) {
|
||||
// The Material default animation curves.
|
||||
$transition: $property 225ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
@return $transition;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.autocomplete-overrides(
|
||||
(
|
||||
container-elevation-shadow: var(--mat-sys-level2),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.autocomplete-overrides(
|
||||
(
|
||||
container-elevation-shadow: var(--mat-sys-level2),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@include mat.badge-overrides(
|
||||
(
|
||||
background-color: var(--mat-sys-primary),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@include mat.badge-overrides(
|
||||
(
|
||||
background-color: var(--mat-sys-primary),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.button-toggle-overrides(
|
||||
(
|
||||
shape: $border-radius,
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.button-toggle-overrides(
|
||||
(
|
||||
shape: $border-radius,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,136 +1,136 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
protected-hover-container-elevation-shadow: var(--mat-sys-level1),
|
||||
filled-horizontal-padding: 15px,
|
||||
outlined-horizontal-padding: 15px,
|
||||
protected-horizontal-padding: 15px,
|
||||
text-horizontal-padding: 15px,
|
||||
filled-container-shape: var(--mat-sys-corner-small),
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
protected-container-shape: var(--mat-sys-corner-small),
|
||||
text-container-shape: var(--mat-sys-corner-small),
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: $text-color,
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-button-base.bg-light-primary:hover,
|
||||
.mat-mdc-button-base.bg-light-secondary:hover,
|
||||
.mat-mdc-button-base.bg-light-error:hover,
|
||||
.mat-mdc-button-base.bg-light-warning:hover,
|
||||
.mat-mdc-button-base.bg-light-success:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-primary {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-secondary {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-error {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-error) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-warning {
|
||||
&:hover {
|
||||
background-color: $warning !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-success {
|
||||
&:hover {
|
||||
background-color: $success !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled) {
|
||||
border-color: inherit !important;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-secondary:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-error:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-warning:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-success:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-secondary {
|
||||
color: var(--mat-sys-secondary);
|
||||
border-color: var(--mat-sys-secondary);
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-success {
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-error {
|
||||
color: $error;
|
||||
border-color: $error;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-warning {
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
protected-hover-container-elevation-shadow: var(--mat-sys-level1),
|
||||
filled-horizontal-padding: 15px,
|
||||
outlined-horizontal-padding: 15px,
|
||||
protected-horizontal-padding: 15px,
|
||||
text-horizontal-padding: 15px,
|
||||
filled-container-shape: var(--mat-sys-corner-small),
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
protected-container-shape: var(--mat-sys-corner-small),
|
||||
text-container-shape: var(--mat-sys-corner-small),
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: $text-color,
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-button-base.bg-light-primary:hover,
|
||||
.mat-mdc-button-base.bg-light-secondary:hover,
|
||||
.mat-mdc-button-base.bg-light-error:hover,
|
||||
.mat-mdc-button-base.bg-light-warning:hover,
|
||||
.mat-mdc-button-base.bg-light-success:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-primary {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-secondary {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-error {
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-error) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-warning {
|
||||
&:hover {
|
||||
background-color: $warning !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.bg-light-success {
|
||||
&:hover {
|
||||
background-color: $success !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled) {
|
||||
border-color: inherit !important;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-secondary:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-error:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-warning:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-button-base.text-success:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-secondary {
|
||||
color: var(--mat-sys-secondary);
|
||||
border-color: var(--mat-sys-secondary);
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-success {
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-error {
|
||||
color: $error;
|
||||
border-color: $error;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled).mat-warning {
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
|
||||
&:hover {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
elevated-container-color: $white,
|
||||
title-text-size: 1.125rem,
|
||||
subtitle-text-size: 14px,
|
||||
title-text-line-height: 1.6rem,
|
||||
title-text-weight: 600,
|
||||
subtitle-text-weight: 400,
|
||||
elevated-container-shape: var(--mat-sys-corner-small),
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
elevated-container-elevation: var(--mat-sys-level2),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-card {
|
||||
margin-bottom: $card-spacer;
|
||||
|
||||
.mat-mdc-card-header {
|
||||
padding: $card-spacer $card-spacer 0 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-card-header + .mat-mdc-card-content {
|
||||
padding: 0 $card-spacer $card-spacer;
|
||||
}
|
||||
|
||||
> .mat-mdc-card-content {
|
||||
padding: $card-spacer !important;
|
||||
}
|
||||
|
||||
.mdc-card__actions {
|
||||
padding: $card-spacer !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
|
||||
&:hover {
|
||||
scale: 1.01;
|
||||
transition: all 0.1s ease-in 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBorder {
|
||||
.mdc-card {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $borderColor !important;
|
||||
|
||||
&.shadow-none {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
elevated-container-color: $white,
|
||||
title-text-size: 1.125rem,
|
||||
subtitle-text-size: 14px,
|
||||
title-text-line-height: 1.6rem,
|
||||
title-text-weight: 600,
|
||||
subtitle-text-weight: 400,
|
||||
elevated-container-shape: var(--mat-sys-corner-small),
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
elevated-container-elevation: var(--mat-sys-level2),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-card {
|
||||
margin-bottom: $card-spacer;
|
||||
|
||||
.mat-mdc-card-header {
|
||||
padding: $card-spacer $card-spacer 0 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-card-header + .mat-mdc-card-content {
|
||||
padding: 0 $card-spacer $card-spacer;
|
||||
}
|
||||
|
||||
> .mat-mdc-card-content {
|
||||
padding: $card-spacer !important;
|
||||
}
|
||||
|
||||
.mdc-card__actions {
|
||||
padding: $card-spacer !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
|
||||
&:hover {
|
||||
scale: 1.01;
|
||||
transition: all 0.1s ease-in 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBorder {
|
||||
.mdc-card {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $borderColor !important;
|
||||
|
||||
&.shadow-none {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.checkbox-overrides(
|
||||
(
|
||||
unselected-focus-icon-color:
|
||||
var(--mat-checkbox-unselected-hover-state-layer-color),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mdc-checkbox__background {
|
||||
border-radius: 4px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
|
||||
background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.checkbox-overrides(
|
||||
(
|
||||
unselected-focus-icon-color:
|
||||
var(--mat-checkbox-unselected-hover-state-layer-color),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mdc-checkbox__background {
|
||||
border-radius: 4px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
.mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
|
||||
background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
focus-state-layer-color: var(--mat-option-focus-state-layer-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
focus-state-layer-color: var(--mat-option-focus-state-layer-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.datepicker-overrides(
|
||||
(
|
||||
calendar-container-background-color:
|
||||
var(--mat-card-elevated-container-color),
|
||||
calendar-container-touch-elevation-shadow: var(--mat-sys-level1),
|
||||
calendar-container-elevation-shadow: var(--mat-sys-level1),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.datepicker-overrides(
|
||||
(
|
||||
calendar-container-background-color:
|
||||
var(--mat-card-elevated-container-color),
|
||||
calendar-container-touch-elevation-shadow: var(--mat-sys-level1),
|
||||
calendar-container-elevation-shadow: var(--mat-sys-level1),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
container-shape: var(--mat-sys-corner-small),
|
||||
subhead-size: 18px,
|
||||
subhead-weight: 600,
|
||||
content-padding: 20px 24px,
|
||||
actions-padding: 20px 24px,
|
||||
container-min-width: 300px,
|
||||
subhead-tracking: unset,
|
||||
supporting-text-tracking: unset,
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
container-shape: var(--mat-sys-corner-small),
|
||||
subhead-size: 18px,
|
||||
subhead-weight: 600,
|
||||
content-padding: 20px 24px,
|
||||
actions-padding: 20px 24px,
|
||||
container-min-width: 300px,
|
||||
subhead-tracking: unset,
|
||||
supporting-text-tracking: unset,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.sidenav-overrides(
|
||||
(
|
||||
container-shape: 0,
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.sidenav-overrides(
|
||||
(
|
||||
container-shape: 0,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.fab-overrides(
|
||||
(
|
||||
small-container-shape: 30px,
|
||||
container-shape: 30px,
|
||||
container-elevation-shadow: none,
|
||||
small-container-elevation-shadow: none,
|
||||
small-hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
extended-hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
extended-container-elevation-shadow: none,
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.fab-overrides(
|
||||
(
|
||||
small-container-shape: 30px,
|
||||
container-shape: 30px,
|
||||
container-elevation-shadow: none,
|
||||
small-container-elevation-shadow: none,
|
||||
small-hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
extended-hover-container-elevation-shadow: var(--mat-sys-level3),
|
||||
extended-container-elevation-shadow: none,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-height: 37px,
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
container-vertical-padding: 6px,
|
||||
)
|
||||
);
|
||||
|
||||
// forms
|
||||
html {
|
||||
.hide-hint {
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
|
||||
top: calc(var(--mat-form-field-container-height) / 2.15);
|
||||
}
|
||||
|
||||
.demo-inline-calendar-card {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-height: 37px,
|
||||
outlined-container-shape: var(--mat-sys-corner-small),
|
||||
container-vertical-padding: 6px,
|
||||
)
|
||||
);
|
||||
|
||||
// forms
|
||||
html {
|
||||
.hide-hint {
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
|
||||
top: calc(var(--mat-form-field-container-height) / 2.15);
|
||||
}
|
||||
|
||||
.demo-inline-calendar-card {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
@use "autocomplete";
|
||||
@use "badge";
|
||||
@use "button";
|
||||
@use "button-toggle";
|
||||
@use "card";
|
||||
@use "checkbox";
|
||||
@use "chip";
|
||||
@use "dialog";
|
||||
@use "datepicker";
|
||||
@use "fab";
|
||||
@use "form-field";
|
||||
@use "radio";
|
||||
@use "list";
|
||||
@use "menu";
|
||||
@use "paginator";
|
||||
@use "theme";
|
||||
@use "table";
|
||||
@use "tree";
|
||||
@use "typography";
|
||||
@use "stepper";
|
||||
@use "expansion";
|
||||
@use "drawer";
|
||||
@use "autocomplete";
|
||||
@use "badge";
|
||||
@use "button";
|
||||
@use "button-toggle";
|
||||
@use "card";
|
||||
@use "checkbox";
|
||||
@use "chip";
|
||||
@use "dialog";
|
||||
@use "datepicker";
|
||||
@use "fab";
|
||||
@use "form-field";
|
||||
@use "radio";
|
||||
@use "list";
|
||||
@use "menu";
|
||||
@use "paginator";
|
||||
@use "theme";
|
||||
@use "table";
|
||||
@use "tree";
|
||||
@use "typography";
|
||||
@use "stepper";
|
||||
@use "expansion";
|
||||
@use "drawer";
|
||||
@use "progress";
|
||||
@@ -1,12 +1,12 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-hover-state-layer-color: var(--mat-sys-primary),
|
||||
list-item-container-shape: var(--mat-sys-corner-small),
|
||||
active-indicator-shape: var(--mat-sys-corner-small),
|
||||
list-item-two-line-container-height: 70px,
|
||||
list-item-three-line-container-height: 100px,
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-hover-state-layer-color: var(--mat-sys-primary),
|
||||
list-item-container-shape: var(--mat-sys-corner-small),
|
||||
active-indicator-shape: var(--mat-sys-corner-small),
|
||||
list-item-two-line-container-height: 70px,
|
||||
list-item-three-line-container-height: 100px,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.menu-overrides(
|
||||
(
|
||||
container-shape: var(--mat-sys-corner-small),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-menu-panel {
|
||||
box-shadow: var(--mat-sys-level3) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-select-panel {
|
||||
padding: 8px !important;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.menu-overrides(
|
||||
(
|
||||
container-shape: var(--mat-sys-corner-small),
|
||||
)
|
||||
);
|
||||
|
||||
// styles
|
||||
html {
|
||||
.mat-mdc-menu-panel {
|
||||
box-shadow: var(--mat-sys-level3) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-select-panel {
|
||||
padding: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.paginator-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.paginator-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
html {
|
||||
.mat-secondary {
|
||||
.mdc-linear-progress__bar-inner {
|
||||
border-color: var(--mat-sys-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
html {
|
||||
.mat-secondary {
|
||||
.mdc-linear-progress__bar-inner {
|
||||
border-color: var(--mat-sys-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.radio-overrides(
|
||||
(
|
||||
unselected-icon-color: var(--mat-sys-outline-variant),
|
||||
)
|
||||
);
|
||||
|
||||
html {
|
||||
.mat-mdc-radio-button .mdc-radio__outer-circle {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.radio-overrides(
|
||||
(
|
||||
unselected-icon-color: var(--mat-sys-outline-variant),
|
||||
)
|
||||
);
|
||||
|
||||
html {
|
||||
.mat-mdc-radio-button .mdc-radio__outer-circle {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.stepper-overrides(
|
||||
(
|
||||
container-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.stepper-overrides(
|
||||
(
|
||||
container-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.table-overrides(
|
||||
(
|
||||
background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.table-overrides(
|
||||
(
|
||||
background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
@include mat.theme(
|
||||
(
|
||||
color: mat.$azure-palette,
|
||||
typography: $font-family,
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.theme-overrides(
|
||||
(
|
||||
primary: rgb(93, 135, 255),
|
||||
error: rgb(250, 137, 107),
|
||||
body-medium-size: 14px,
|
||||
body-large-size: 14px,
|
||||
outline-variant: #d7dde2,
|
||||
level1: 0px 12px 24px -4px rgb(145 158 171 / 30%),
|
||||
level2: rgba(145, 158, 171, 0.12) 0px 1px 16px,
|
||||
level3: 0px 12px 24px -4px rgb(145 158 171 / 30%),
|
||||
)
|
||||
);
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
@include mat.theme(
|
||||
(
|
||||
color: mat.$azure-palette,
|
||||
typography: $font-family,
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.theme-overrides(
|
||||
(
|
||||
primary: rgb(93, 135, 255),
|
||||
error: rgb(250, 137, 107),
|
||||
body-medium-size: 14px,
|
||||
body-large-size: 14px,
|
||||
outline-variant: #d7dde2,
|
||||
level1: 0px 12px 24px -4px rgb(145 158 171 / 30%),
|
||||
level2: rgba(145, 158, 171, 0.12) 0px 1px 16px,
|
||||
level3: 0px 12px 24px -4px rgb(145 158 171 / 30%),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.tree-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@include mat.tree-overrides(
|
||||
(
|
||||
container-background-color: var(--mat-card-elevated-container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@use "../variables" as *;
|
||||
html {
|
||||
.mdc-list-item__primary-text,
|
||||
.mat-drawer-container,
|
||||
.mat-drawer,
|
||||
.text-body {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
html {
|
||||
.mdc-list-item__primary-text,
|
||||
.mat-drawer-container,
|
||||
.mat-drawer,
|
||||
.text-body {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,109 +1,109 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.blank-layout-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.bg-gredient {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(rgb(210, 241, 223),
|
||||
rgb(211, 215, 250),
|
||||
rgb(186, 216, 244)) 0% 0% / 400% 400%;
|
||||
animation: 15s ease 0s infinite normal none running gradient;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-height {
|
||||
height: calc(100vh - 83px);
|
||||
}
|
||||
|
||||
.custom-row {
|
||||
&.row {
|
||||
margin-right: -8px;
|
||||
margin-left: -8px;
|
||||
|
||||
.col-2,
|
||||
.col-12 {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.or-border {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-auth {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.max-width-form {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-form-field-invalid {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: $error !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
right: 3px;
|
||||
@use "../variables" as *;
|
||||
|
||||
.blank-layout-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.bg-gredient {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(rgb(210, 241, 223),
|
||||
rgb(211, 215, 250),
|
||||
rgb(186, 216, 244)) 0% 0% / 400% 400%;
|
||||
animation: 15s ease 0s infinite normal none running gradient;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-height {
|
||||
height: calc(100vh - 83px);
|
||||
}
|
||||
|
||||
.custom-row {
|
||||
&.row {
|
||||
margin-right: -8px;
|
||||
margin-left: -8px;
|
||||
|
||||
.col-2,
|
||||
.col-12 {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.or-border {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-auth {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.max-width-form {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-form-field-invalid {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: $error !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
right: 3px;
|
||||
}
|
||||
@@ -1,126 +1,126 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.social-chips {
|
||||
img {
|
||||
margin-left: -9px;
|
||||
border: 2px solid $white;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-img {
|
||||
margin-bottom: -65px !important;
|
||||
}
|
||||
|
||||
// theme select
|
||||
.theme-select {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
// dashboard 2
|
||||
.welcome-img {
|
||||
margin-bottom: -82px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
|
||||
.time {
|
||||
padding: 6px 16px 6px 0;
|
||||
min-width: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.timline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.point {
|
||||
flex-direction: column;
|
||||
|
||||
.timeline-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50px;
|
||||
background-color: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.border-primary {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
&.border-accent {
|
||||
border: 2px solid $accent;
|
||||
}
|
||||
|
||||
&.border-success {
|
||||
border: 2px solid $success;
|
||||
}
|
||||
|
||||
&.border-warning {
|
||||
border: 2px solid $warning;
|
||||
}
|
||||
|
||||
&.border-error {
|
||||
border: 2px solid $error;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-border {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expansion panel
|
||||
|
||||
html .mat-expansion-panel:not([class*="mat-elevation-z"]) {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.most-visit-chart {
|
||||
.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// User Profile Tab
|
||||
.profileTabs {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
.mat-mdc-tab-label-container{
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active{
|
||||
.mdc-tab__text-label{
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.social-chips {
|
||||
img {
|
||||
margin-left: -9px;
|
||||
border: 2px solid $white;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-img {
|
||||
margin-bottom: -65px !important;
|
||||
}
|
||||
|
||||
// theme select
|
||||
.theme-select {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
// dashboard 2
|
||||
.welcome-img {
|
||||
margin-bottom: -82px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
|
||||
.time {
|
||||
padding: 6px 16px 6px 0;
|
||||
min-width: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.timline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.point {
|
||||
flex-direction: column;
|
||||
|
||||
.timeline-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50px;
|
||||
background-color: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.border-primary {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
&.border-accent {
|
||||
border: 2px solid $accent;
|
||||
}
|
||||
|
||||
&.border-success {
|
||||
border: 2px solid $success;
|
||||
}
|
||||
|
||||
&.border-warning {
|
||||
border: 2px solid $warning;
|
||||
}
|
||||
|
||||
&.border-error {
|
||||
border: 2px solid $error;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-border {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expansion panel
|
||||
|
||||
html .mat-expansion-panel:not([class*="mat-elevation-z"]) {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.most-visit-chart {
|
||||
.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// User Profile Tab
|
||||
.profileTabs {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
.mat-mdc-tab-label-container{
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active{
|
||||
.mdc-tab__text-label{
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,143 +1,143 @@
|
||||
.front-topbar {
|
||||
&.fixed-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--mat-sys-background) !important;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
|
||||
.profileTabs {
|
||||
|
||||
.mat-mdc-tab {
|
||||
padding: 30px 16px;
|
||||
height: auto;
|
||||
border-right: 1px solid var(--mat-sys-outline);
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home-page .expansion-panel .mat-expansion-panel-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel-body {
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar {
|
||||
.mdc-list {
|
||||
.mdc-list-item {
|
||||
.mat-mdc-button {
|
||||
color: var(--mat-sys-on-background);
|
||||
min-width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.section-sub-title {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.section-sub-title {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-content .left-side-content {
|
||||
padding: 30px !important;
|
||||
}
|
||||
.front-topbar {
|
||||
&.fixed-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--mat-sys-background) !important;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
|
||||
.profileTabs {
|
||||
|
||||
.mat-mdc-tab {
|
||||
padding: 30px 16px;
|
||||
height: auto;
|
||||
border-right: 1px solid var(--mat-sys-outline);
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home-page .expansion-panel .mat-expansion-panel-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel-body {
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar {
|
||||
.mdc-list {
|
||||
.mdc-list-item {
|
||||
.mat-mdc-button {
|
||||
color: var(--mat-sys-on-background);
|
||||
min-width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.section-sub-title {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.section-sub-title {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-content .left-side-content {
|
||||
padding: 30px !important;
|
||||
}
|
||||
}
|
||||
@@ -1,244 +1,244 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.demos-dd {
|
||||
max-width: $boxedWidth !important;
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: relative;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
.overlay-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
background-color: rgba(55, 114, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-xl {
|
||||
height: 80px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// banner
|
||||
// ----------------------------------------------------------
|
||||
@media (min-width: 900px) {
|
||||
.banner-title {
|
||||
font-size: 54px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.banner-section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
height: 56px !important;
|
||||
padding: 0 52px !important;
|
||||
font-size: 16px;
|
||||
|
||||
&.sm {
|
||||
padding: 0 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.btn-custom {
|
||||
padding: 0 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
background-color: $light-primary;
|
||||
min-width: 2000px;
|
||||
height: calc(100vh - 100px);
|
||||
max-height: 790px;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-img {
|
||||
animation: slideup 35s linear infinite;
|
||||
}
|
||||
|
||||
.slider-img2 {
|
||||
animation: slidedown 35s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slideup {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, -100%, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidedown {
|
||||
0% {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, 0, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
// sections
|
||||
|
||||
.spacer {
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
line-height: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
// demo slider
|
||||
.demo-slider {
|
||||
margin-top: 40px;
|
||||
|
||||
.demo-slide {
|
||||
animation: slide 45s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
// call to action
|
||||
|
||||
.shape-card {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacer-sm {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title2 {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.c2a-card {
|
||||
margin-top: -70px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border: 1px solid $white !important;
|
||||
}
|
||||
|
||||
.border-accent {
|
||||
border: 1px solid $accent !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-size-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.shapes-component {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -32px;
|
||||
width: 388px;
|
||||
height: 382px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-2.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -125px;
|
||||
right: -96px;
|
||||
width: 267px;
|
||||
height: 252px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.demos-dd {
|
||||
max-width: $boxedWidth !important;
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: relative;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
.overlay-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
background-color: rgba(55, 114, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-xl {
|
||||
height: 80px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// banner
|
||||
// ----------------------------------------------------------
|
||||
@media (min-width: 900px) {
|
||||
.banner-title {
|
||||
font-size: 54px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.banner-section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
height: 56px !important;
|
||||
padding: 0 52px !important;
|
||||
font-size: 16px;
|
||||
|
||||
&.sm {
|
||||
padding: 0 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.btn-custom {
|
||||
padding: 0 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
background-color: $light-primary;
|
||||
min-width: 2000px;
|
||||
height: calc(100vh - 100px);
|
||||
max-height: 790px;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-img {
|
||||
animation: slideup 35s linear infinite;
|
||||
}
|
||||
|
||||
.slider-img2 {
|
||||
animation: slidedown 35s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slideup {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, -100%, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidedown {
|
||||
0% {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, 0, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
// sections
|
||||
|
||||
.spacer {
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
line-height: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
// demo slider
|
||||
.demo-slider {
|
||||
margin-top: 40px;
|
||||
|
||||
.demo-slide {
|
||||
animation: slide 45s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
// call to action
|
||||
|
||||
.shape-card {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacer-sm {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title2 {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.c2a-card {
|
||||
margin-top: -70px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border: 1px solid $white !important;
|
||||
}
|
||||
|
||||
.border-accent {
|
||||
border: 1px solid $accent !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-size-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.shapes-component {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -32px;
|
||||
width: 388px;
|
||||
height: 382px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-2.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -125px;
|
||||
right: -96px;
|
||||
width: 267px;
|
||||
height: 252px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
.plan-title {
|
||||
font-size: 50px;
|
||||
margin-top: 40px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dollar-sign {
|
||||
margin-top: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.per-month {
|
||||
margin-top: 45px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
// widget cards
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -21px;
|
||||
}
|
||||
.plan-title {
|
||||
font-size: 50px;
|
||||
margin-top: 40px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dollar-sign {
|
||||
margin-top: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.per-month {
|
||||
margin-top: 45px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
// widget cards
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -21px;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.toast-container .ngx-toastr {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.toast-container .ngx-toastr {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@@ -1,99 +1,99 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
[dir="rtl"] {
|
||||
|
||||
.mat-drawer.mat-drawer-end {
|
||||
transform: translate3d(0, 0, 0);
|
||||
&.mat-drawer-opened {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// header
|
||||
// ------------------------------------------------------
|
||||
.upgrade-bg {
|
||||
left: 0;
|
||||
right: unset;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
// highlight
|
||||
td.hljs-ln-line.hljs-ln-numbers {
|
||||
padding-left: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// customizer
|
||||
.customizerBtn {
|
||||
left: 30px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
// logo flip
|
||||
.branding img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.breadcrumb-icon {
|
||||
left: 19px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// sidebar
|
||||
|
||||
.mat-drawer.sidebarNav {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__start {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 14px !important;
|
||||
}
|
||||
|
||||
// minisidebar
|
||||
&.sidebarNav-mini {
|
||||
.contentWrapper {
|
||||
margin-right: $sidenav-mini !important;
|
||||
margin-left: 0 !important;
|
||||
transition: swift-ease-out(width);
|
||||
}
|
||||
|
||||
.sidebarNav {
|
||||
|
||||
// sidebar
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
.mdc-list-item__start {
|
||||
margin-right: 8px !important;
|
||||
margin-left: 7px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
.mdc-list-item__start {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
[dir="rtl"] {
|
||||
|
||||
.mat-drawer.mat-drawer-end {
|
||||
transform: translate3d(0, 0, 0);
|
||||
&.mat-drawer-opened {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// header
|
||||
// ------------------------------------------------------
|
||||
.upgrade-bg {
|
||||
left: 0;
|
||||
right: unset;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
// highlight
|
||||
td.hljs-ln-line.hljs-ln-numbers {
|
||||
padding-left: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// customizer
|
||||
.customizerBtn {
|
||||
left: 30px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
// logo flip
|
||||
.branding img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.breadcrumb-icon {
|
||||
left: 19px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// sidebar
|
||||
|
||||
.mat-drawer.sidebarNav {
|
||||
border-left: 1px solid var(--mat-sys-outline-variant);
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__start {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 14px !important;
|
||||
}
|
||||
|
||||
// minisidebar
|
||||
&.sidebarNav-mini {
|
||||
.contentWrapper {
|
||||
margin-right: $sidenav-mini !important;
|
||||
margin-left: 0 !important;
|
||||
transition: swift-ease-out(width);
|
||||
}
|
||||
|
||||
.sidebarNav {
|
||||
|
||||
// sidebar
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
.mdc-list-item__start {
|
||||
margin-right: 8px !important;
|
||||
margin-left: 7px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.sidebar-list {
|
||||
.menu-list-item {
|
||||
.mdc-list-item__start {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,51 @@
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@use "themecolors/blue_theme";
|
||||
@use "themecolors/orange_theme";
|
||||
@use "themecolors/aqua_theme";
|
||||
@use "themecolors/cyan_theme";
|
||||
@use "themecolors/green_theme";
|
||||
@use "themecolors/purple_theme";
|
||||
|
||||
@use "variables" as *;
|
||||
@use "override-component";
|
||||
@use "theme-variables/default-variables";
|
||||
@use "theme-variables/light-theme-variables";
|
||||
@use "theme-variables/dark-theme-variables";
|
||||
|
||||
//container layout
|
||||
@use "layouts/transitions";
|
||||
@use "helpers/color";
|
||||
@use "helpers/border-color";
|
||||
@use "helpers/icon-size";
|
||||
@use "container";
|
||||
@use "layouts/layouts";
|
||||
@use "grid/grid";
|
||||
@use "helpers/custom-flex";
|
||||
@use "helpers";
|
||||
|
||||
// horizontal
|
||||
@use "horizontal/horizontal";
|
||||
@use "dark/dark";
|
||||
|
||||
// apps
|
||||
@use "apps/calendar";
|
||||
@use "apps/email";
|
||||
@use "apps/blogs";
|
||||
@use "apps/chat";
|
||||
@use "apps/contact-list";
|
||||
@use "apps/kanban";
|
||||
@use "apps/courses";
|
||||
@use "apps/todo";
|
||||
@use "apps/ecommerce";
|
||||
|
||||
@use "pages/auth";
|
||||
@use "pages/dashboards";
|
||||
@use "pages/landingpage";
|
||||
@use "pages/toast";
|
||||
@use "pages/pricing";
|
||||
@use "pages/frontend";
|
||||
|
||||
// RTL Theme
|
||||
@use "sass:map";
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
@use "themecolors/blue_theme";
|
||||
@use "themecolors/orange_theme";
|
||||
@use "themecolors/aqua_theme";
|
||||
@use "themecolors/cyan_theme";
|
||||
@use "themecolors/green_theme";
|
||||
@use "themecolors/purple_theme";
|
||||
|
||||
@use "variables" as *;
|
||||
@use "override-component";
|
||||
@use "theme-variables/default-variables";
|
||||
@use "theme-variables/light-theme-variables";
|
||||
@use "theme-variables/dark-theme-variables";
|
||||
|
||||
//container layout
|
||||
@use "layouts/transitions";
|
||||
@use "helpers/color";
|
||||
@use "helpers/border-color";
|
||||
@use "helpers/icon-size";
|
||||
@use "container";
|
||||
@use "layouts/layouts";
|
||||
@use "grid/grid";
|
||||
@use "helpers/custom-flex";
|
||||
@use "helpers";
|
||||
|
||||
// horizontal
|
||||
@use "horizontal/horizontal";
|
||||
@use "dark/dark";
|
||||
|
||||
// apps
|
||||
@use "apps/calendar";
|
||||
@use "apps/email";
|
||||
@use "apps/blogs";
|
||||
@use "apps/chat";
|
||||
@use "apps/contact-list";
|
||||
@use "apps/kanban";
|
||||
@use "apps/courses";
|
||||
@use "apps/todo";
|
||||
@use "apps/ecommerce";
|
||||
|
||||
@use "pages/auth";
|
||||
@use "pages/dashboards";
|
||||
@use "pages/landingpage";
|
||||
@use "pages/toast";
|
||||
@use "pages/pricing";
|
||||
@use "pages/frontend";
|
||||
|
||||
// RTL Theme
|
||||
@use "rtl/rtl";
|
||||
@@ -1,32 +1,32 @@
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
html.dark-theme {
|
||||
color-scheme: dark;
|
||||
--mat-sys-background: #141a21;
|
||||
--mat-sys-on-background: rgba(255, 255, 255, 0.9);
|
||||
--mat-sys-on-primary: #fff;
|
||||
--mat-sys-surface-bright: #ffffff05;
|
||||
--mat-sys-surface: #141a21;
|
||||
--mat-sys-surface-container: #141a21;
|
||||
--mat-sys-surface-container-low: #141a21;
|
||||
--mat-sys-outline-variant: #2e3f50;
|
||||
--mat-sys-outline: #2e3f50;
|
||||
--mat-form-field-outlined-hover-outline-color: #465670;
|
||||
--mat-checkbox-unselected-hover-state-layer-color: #19212a;
|
||||
--mat-menu-item-hover-state-layer-color: #19212a;
|
||||
--mat-button-toggle-state-layer-color: #19212a;
|
||||
--mat-option-focus-state-layer-color: #19212a;
|
||||
--mat-option-hover-state-layer-color: #19212a;
|
||||
--mat-slide-toggle-unselected-track-color: #19212a;
|
||||
--mat-stepper-header-focus-state-layer-color: #19212a;
|
||||
--mat-stepper-header-hover-state-layer-color: #19212a;
|
||||
--mat-expansion-header-hover-state-layer-color: #19212a;
|
||||
@include mat.card-overrides((elevated-container-color: #1c252e,
|
||||
elevated-container-elevation: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px,
|
||||
subtitle-text-color: rgba(255, 255, 255, 0.67),
|
||||
));
|
||||
@include mat.theme-overrides((level1: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
level2: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
level3: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
));
|
||||
@use "@angular/material" as mat;
|
||||
|
||||
html.dark-theme {
|
||||
color-scheme: dark;
|
||||
--mat-sys-background: #141a21;
|
||||
--mat-sys-on-background: rgba(255, 255, 255, 0.9);
|
||||
--mat-sys-on-primary: #fff;
|
||||
--mat-sys-surface-bright: #ffffff05;
|
||||
--mat-sys-surface: #141a21;
|
||||
--mat-sys-surface-container: #141a21;
|
||||
--mat-sys-surface-container-low: #141a21;
|
||||
--mat-sys-outline-variant: #2e3f50;
|
||||
--mat-sys-outline: #2e3f50;
|
||||
--mat-form-field-outlined-hover-outline-color: #465670;
|
||||
--mat-checkbox-unselected-hover-state-layer-color: #19212a;
|
||||
--mat-menu-item-hover-state-layer-color: #19212a;
|
||||
--mat-button-toggle-state-layer-color: #19212a;
|
||||
--mat-option-focus-state-layer-color: #19212a;
|
||||
--mat-option-hover-state-layer-color: #19212a;
|
||||
--mat-slide-toggle-unselected-track-color: #19212a;
|
||||
--mat-stepper-header-focus-state-layer-color: #19212a;
|
||||
--mat-stepper-header-hover-state-layer-color: #19212a;
|
||||
--mat-expansion-header-hover-state-layer-color: #19212a;
|
||||
@include mat.card-overrides((elevated-container-color: #1c252e,
|
||||
elevated-container-elevation: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px,
|
||||
subtitle-text-color: rgba(255, 255, 255, 0.67),
|
||||
));
|
||||
@include mat.theme-overrides((level1: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
level2: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
level3: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
|
||||
));
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
html {
|
||||
--mat-sys-error-fixed-dim: rgba(247, 68, 86, 0.15);
|
||||
--mat-select-container-elevation-shadow: var(--mat-sys-level3);
|
||||
--mat-list-list-item-label-text-tracking: 0;
|
||||
--mat-slide-toggle-track-height: 28px;
|
||||
--mat-sidenav-container-divider-color: var(--mat-sys-outline-variant);
|
||||
--mat-dialog-with-actions-content-padding: 20px 24px;
|
||||
--mat-form-field-container-text-tracking: unset;
|
||||
--mat-slide-toggle-with-icon-handle-size: 21px;
|
||||
--mat-badge-text-color: white;
|
||||
--mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 26px;
|
||||
html {
|
||||
--mat-sys-error-fixed-dim: rgba(247, 68, 86, 0.15);
|
||||
--mat-select-container-elevation-shadow: var(--mat-sys-level3);
|
||||
--mat-list-list-item-label-text-tracking: 0;
|
||||
--mat-slide-toggle-track-height: 28px;
|
||||
--mat-sidenav-container-divider-color: var(--mat-sys-outline-variant);
|
||||
--mat-dialog-with-actions-content-padding: 20px 24px;
|
||||
--mat-form-field-container-text-tracking: unset;
|
||||
--mat-slide-toggle-with-icon-handle-size: 21px;
|
||||
--mat-badge-text-color: white;
|
||||
--mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 26px;
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
html.light-theme {
|
||||
color-scheme: light;
|
||||
--mat-sys-corner-small: 7px;
|
||||
--mat-sys-background: #fff;
|
||||
--mat-sys-surface-bright: #f2f6fa;
|
||||
--mat-sys-surface: #fff;
|
||||
--mat-sys-surface-container: #fff;
|
||||
--mat-sys-surface-container-low: #fff;
|
||||
--mat-sys-on-background: #2a3547;
|
||||
--mat-sys-outline: #d7dde2;
|
||||
--mat-sys-outline-variant: #d7dde2;
|
||||
--mat-form-field-outlined-hover-outline-color: #d7dde2;
|
||||
--mat-checkbox-unselected-hover-state-layer-color: #d7dde2;
|
||||
--mat-menu-item-hover-state-layer-color: #f6f9fc;
|
||||
--mat-button-toggle-state-layer-color: #f6f9fc;
|
||||
--mat-option-focus-state-layer-color: #f6f9fc;
|
||||
--mat-option-hover-state-layer-color: #f6f9fc;
|
||||
--mat-slide-toggle-unselected-track-color: #f6f9fc;
|
||||
--mat-stepper-header-focus-state-layer-color: #f6f9fc;
|
||||
--mat-stepper-header-hover-state-layer-color: #f6f9fc;
|
||||
--mat-dialog-supporting-text-color: var(--mat-sys-on-background);
|
||||
--mat-expansion-header-hover-state-layer-color: #f6f9fc;
|
||||
html.light-theme {
|
||||
color-scheme: light;
|
||||
--mat-sys-corner-small: 7px;
|
||||
--mat-sys-background: #fff;
|
||||
--mat-sys-surface-bright: #f2f6fa;
|
||||
--mat-sys-surface: #fff;
|
||||
--mat-sys-surface-container: #fff;
|
||||
--mat-sys-surface-container-low: #fff;
|
||||
--mat-sys-on-background: #2a3547;
|
||||
--mat-sys-outline: #d7dde2;
|
||||
--mat-sys-outline-variant: #d7dde2;
|
||||
--mat-form-field-outlined-hover-outline-color: #d7dde2;
|
||||
--mat-checkbox-unselected-hover-state-layer-color: #d7dde2;
|
||||
--mat-menu-item-hover-state-layer-color: #f6f9fc;
|
||||
--mat-button-toggle-state-layer-color: #f6f9fc;
|
||||
--mat-option-focus-state-layer-color: #f6f9fc;
|
||||
--mat-option-hover-state-layer-color: #f6f9fc;
|
||||
--mat-slide-toggle-unselected-track-color: #f6f9fc;
|
||||
--mat-stepper-header-focus-state-layer-color: #f6f9fc;
|
||||
--mat-stepper-header-hover-state-layer-color: #f6f9fc;
|
||||
--mat-dialog-supporting-text-color: var(--mat-sys-on-background);
|
||||
--mat-expansion-header-hover-state-layer-color: #f6f9fc;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
html.aqua_theme {
|
||||
--mat-sys-primary: rgb(0, 116, 186);
|
||||
--mat-sys-primary-fixed-dim: rgb(0, 116, 186, 0.15);
|
||||
--mat-sys-secondary: rgb(71, 215, 188);
|
||||
--mat-sys-secondary-fixed-dim: rgb(71, 215, 188, 0.15);
|
||||
--mat-sys-tertiary: rgb(71, 215, 188);
|
||||
html.aqua_theme {
|
||||
--mat-sys-primary: rgb(0, 116, 186);
|
||||
--mat-sys-primary-fixed-dim: rgb(0, 116, 186, 0.15);
|
||||
--mat-sys-secondary: rgb(71, 215, 188);
|
||||
--mat-sys-secondary-fixed-dim: rgb(71, 215, 188, 0.15);
|
||||
--mat-sys-tertiary: rgb(71, 215, 188);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
html.blue_theme {
|
||||
--mat-sys-primary: rgb(93, 135, 255);
|
||||
--mat-sys-primary-fixed-dim: rgb(93, 135, 255, 0.15);
|
||||
--mat-sys-secondary: rgb(68, 183, 247);
|
||||
--mat-sys-secondary-fixed-dim: rgb(68, 183, 247, 0.15);
|
||||
html.blue_theme {
|
||||
--mat-sys-primary: rgb(93, 135, 255);
|
||||
--mat-sys-primary-fixed-dim: rgb(93, 135, 255, 0.15);
|
||||
--mat-sys-secondary: rgb(68, 183, 247);
|
||||
--mat-sys-secondary-fixed-dim: rgb(68, 183, 247, 0.15);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
html.cyan_theme {
|
||||
--mat-sys-primary: rgb(0, 185, 192);
|
||||
--mat-sys-primary-fixed-dim: rgb(0, 185, 192, 0.15);
|
||||
--mat-sys-secondary: rgb(244, 139, 108);
|
||||
--mat-sys-secondary-fixed-dim: rgb(244, 139, 108, 0.15);
|
||||
--mat-sys-tertiary: rgb(244, 139, 108);
|
||||
html.cyan_theme {
|
||||
--mat-sys-primary: rgb(0, 185, 192);
|
||||
--mat-sys-primary-fixed-dim: rgb(0, 185, 192, 0.15);
|
||||
--mat-sys-secondary: rgb(244, 139, 108);
|
||||
--mat-sys-secondary-fixed-dim: rgb(244, 139, 108, 0.15);
|
||||
--mat-sys-tertiary: rgb(244, 139, 108);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
html.green_theme {
|
||||
--mat-sys-primary: rgb(6, 118, 154);
|
||||
--mat-sys-primary-fixed-dim: rgb(6, 118, 154, 0.15);
|
||||
--mat-sys-secondary: rgb(195, 208, 70);
|
||||
--mat-sys-secondary-fixed-dim: rgb(195, 208, 70, 0.15);
|
||||
--mat-sys-tertiary: rgb(195, 208, 70);
|
||||
html.green_theme {
|
||||
--mat-sys-primary: rgb(6, 118, 154);
|
||||
--mat-sys-primary-fixed-dim: rgb(6, 118, 154, 0.15);
|
||||
--mat-sys-secondary: rgb(195, 208, 70);
|
||||
--mat-sys-secondary-fixed-dim: rgb(195, 208, 70, 0.15);
|
||||
--mat-sys-tertiary: rgb(195, 208, 70);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
html.orange_theme {
|
||||
--mat-sys-primary: rgb(250, 137, 107);
|
||||
--mat-sys-primary-fixed-dim: rgb(250, 137, 107, 0.15);
|
||||
--mat-sys-secondary: rgb(0, 127, 180);
|
||||
--mat-sys-secondary-fixed-dim: rgb(0, 127, 180, 0.15);
|
||||
--mat-sys-error-fixed-dim: rgba(247, 68, 86, 0.15);
|
||||
html.orange_theme {
|
||||
--mat-sys-primary: rgb(250, 137, 107);
|
||||
--mat-sys-primary-fixed-dim: rgb(250, 137, 107, 0.15);
|
||||
--mat-sys-secondary: rgb(0, 127, 180);
|
||||
--mat-sys-secondary-fixed-dim: rgb(0, 127, 180, 0.15);
|
||||
--mat-sys-error-fixed-dim: rgba(247, 68, 86, 0.15);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
html.purple_theme {
|
||||
--mat-sys-primary: rgb(110, 53, 183);
|
||||
--mat-sys-primary-fixed-dim: rgb(110, 53, 183, 0.15);
|
||||
--mat-sys-secondary: rgb(139, 200, 206);
|
||||
--mat-sys-secondary-fixed-dim: rgb(139, 200, 206, 0.15);
|
||||
--mat-sys-tertiary: rgb(139, 200, 206);
|
||||
html.purple_theme {
|
||||
--mat-sys-primary: rgb(110, 53, 183);
|
||||
--mat-sys-primary-fixed-dim: rgb(110, 53, 183, 0.15);
|
||||
--mat-sys-secondary: rgb(139, 200, 206);
|
||||
--mat-sys-secondary-fixed-dim: rgb(139, 200, 206, 0.15);
|
||||
--mat-sys-tertiary: rgb(139, 200, 206);
|
||||
}
|
||||
Reference in New Issue
Block a user