Importation des concours
This commit is contained in:
hugol
50
public/assets/sass/_body.scss
Normal file
50
public/assets/sass/_body.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
body {
|
||||
font-family: $fontFamily;
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
letter-spacing: $letterSpacing;
|
||||
color: $colorText;
|
||||
background: $colorBackground;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// close all the scroll bars
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// Selection color
|
||||
::selection {
|
||||
background: rgba($colorPrimary, 0.3);
|
||||
}
|
||||
|
||||
// default link options
|
||||
a {
|
||||
transition: none;
|
||||
color: $colorPrimary;
|
||||
outline: 0 !important;
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
color: $colorPrimary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
outline: 0 !important;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Safearea
|
||||
$safeBottom: env(safe-area-inset-bottom);
|
||||
$safeTop: env(safe-area-inset-top);
|
||||
1072
public/assets/sass/_darkmode.scss
Normal file
1072
public/assets/sass/_darkmode.scss
Normal file
File diff suppressed because it is too large
Load Diff
730
public/assets/sass/_rtl.scss
Normal file
730
public/assets/sass/_rtl.scss
Normal file
@@ -0,0 +1,730 @@
|
||||
html[dir="rtl"],
|
||||
body.rtl-mode {
|
||||
direction: rtl;
|
||||
|
||||
.ms-0 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ms-05 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.ms-1 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
.ms-2 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 16px !important;
|
||||
}
|
||||
.ms-3 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 24px !important;
|
||||
}
|
||||
.ms-4 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 32px !important;
|
||||
}
|
||||
.ms-5 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
.me-0 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.me-05 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.me-1 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
.me-2 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
.me-3 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
.me-4 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 32px !important;
|
||||
}
|
||||
.me-5 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
|
||||
.ps-0 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.ps-05 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
.ps-1 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
.ps-2 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
.ps-3 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
.ps-4 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 32px !important;
|
||||
}
|
||||
.ps-5 {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
.pe-0 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
.pe-05 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
.pe-1 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
.pe-2 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
.pe-3 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
.pe-4 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
.pe-5 {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.appHeader {
|
||||
.left {
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
.right {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-listview,
|
||||
.image-listview {
|
||||
> li {
|
||||
a {
|
||||
padding: 11px 16px 11px 36px;
|
||||
&:after {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.text {
|
||||
> li:after {
|
||||
left: 0;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
&.media {
|
||||
> li {
|
||||
.imageWrapper {
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-listview {
|
||||
> li {
|
||||
&:after {
|
||||
left: 0;
|
||||
right: 68px;
|
||||
}
|
||||
.item {
|
||||
.image,
|
||||
.icon-box {
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
.accordion-header {
|
||||
.btn,
|
||||
.accordion-button {
|
||||
padding: 8px 16px 8px 50px;
|
||||
&:after {
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 16px;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-button-list {
|
||||
> li {
|
||||
.btn {
|
||||
.icon,
|
||||
ion-icon {
|
||||
margin-right: -5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
&.alert-dismissible {
|
||||
padding-right: 14px;
|
||||
padding-left: 56px;
|
||||
}
|
||||
.btn-close {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.img-wrap,
|
||||
.icon-wrap {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn:last-child {
|
||||
border-radius: $borderRadius 0 0 $borderRadius !important;
|
||||
}
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&:first-child {
|
||||
& + .btn {
|
||||
border-radius: 0 $borderRadius $borderRadius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-single,
|
||||
.carousel-multiple {
|
||||
.splide__slide {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
.carousel-small {
|
||||
.splide__slide {
|
||||
margin-right: 8px !important;
|
||||
margin-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
.form-check-label {
|
||||
padding: 0 32px 0 0;
|
||||
&:after,
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-list {
|
||||
.form-check {
|
||||
&:after {
|
||||
margin-left: auto;
|
||||
margin-right: 54px;
|
||||
}
|
||||
.form-check-label {
|
||||
padding: 6px 54px 6px 16px;
|
||||
&:after,
|
||||
&:before {
|
||||
right: 16px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chip {
|
||||
&.chip-media {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.chip-icon,
|
||||
img {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.chip-delete {
|
||||
margin-left: 0;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialogbox {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.btn-inline {
|
||||
.btn {
|
||||
border-radius: 0 !important;
|
||||
margin-left: 0;
|
||||
margin-right: 1px;
|
||||
&:last-child {
|
||||
margin-right: 1px;
|
||||
}
|
||||
&:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
i.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.spinner-border,
|
||||
.spinner-grow {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
margin-left: 0;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
.dropdown,
|
||||
.dropup {
|
||||
.dropdown-menu {
|
||||
.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
.form-label {
|
||||
text-align: start;
|
||||
}
|
||||
.form-control {
|
||||
padding-right: 0;
|
||||
padding-left: 40px;
|
||||
}
|
||||
select.form-control {
|
||||
padding-left: 0;
|
||||
}
|
||||
.clear-input {
|
||||
left: -10px;
|
||||
}
|
||||
&.boxed {
|
||||
.clear-input {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.form-control {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
&.basic {
|
||||
.clear-input {
|
||||
left: -10px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.message-item {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.notification-dialog.android-style {
|
||||
.notification-header {
|
||||
.imaged {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
span {
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
&:before {
|
||||
margin-right: 0;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification-content {
|
||||
.in {
|
||||
padding-right: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
.notification-footer {
|
||||
.notification-button {
|
||||
border-left: 1px solid $colorLine;
|
||||
border-right: 0 !important;
|
||||
&:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-dialog.ios-style {
|
||||
.notification-header {
|
||||
.imaged {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
span {
|
||||
margin-left: 6px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.notification-content {
|
||||
.in {
|
||||
padding-right: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
.notification-footer {
|
||||
.notification-button {
|
||||
border-right: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
&:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
.input-icon {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.form-control {
|
||||
padding: 0 36px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs.capsuled,
|
||||
.nav-tabs.lined {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.content {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
.text {
|
||||
padding-right: 0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
}
|
||||
&.timed {
|
||||
padding-left: 0;
|
||||
padding-right: 80px;
|
||||
&:before {
|
||||
right: 80px;
|
||||
}
|
||||
.time {
|
||||
left: auto;
|
||||
right: -80px;
|
||||
text-align: left;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toast-box {
|
||||
.in {
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
.icon,
|
||||
ion-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
&.toast-center {
|
||||
.in {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
.form-check-label {
|
||||
&:before {
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panelbox-left,
|
||||
.panelbox-right {
|
||||
.link-listview {
|
||||
> li {
|
||||
a {
|
||||
padding: 10px 16px 10px 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-listview {
|
||||
> li {
|
||||
a.item {
|
||||
padding-right: 16px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-start {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
#sidebarPanel {
|
||||
.profileBox {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&:before{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.image-wrapper {
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.in {
|
||||
padding-right: 0;
|
||||
padding-left: 25px;
|
||||
}
|
||||
.close-sidebar-button {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-listview .multi-level,
|
||||
.multi-level {
|
||||
> ul {
|
||||
> li {
|
||||
a,
|
||||
.item {
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-block {
|
||||
.item {
|
||||
.avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 14px;
|
||||
}
|
||||
.comment-header {
|
||||
.title {
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.comment-footer {
|
||||
.comment-button {
|
||||
margin-right: 0;
|
||||
margin-left: 14px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stepper {
|
||||
.stepper-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin stepperOutlineColorRTL($color) {
|
||||
.stepper-button {
|
||||
&:first-child {
|
||||
border-right: 2px solid $color;
|
||||
border-left: 0;
|
||||
border-radius: 0 $borderRadius $borderRadius 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-left: 2px solid $color;
|
||||
border-right: 0;
|
||||
border-radius: $borderRadius 0 0 $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-outline-primary {
|
||||
@include stepperOutlineColorRTL($colorPrimary);
|
||||
}
|
||||
.stepper-outline-secondary {
|
||||
@include stepperOutlineColorRTL($colorSecondary);
|
||||
}
|
||||
.stepper-outline-danger {
|
||||
@include stepperOutlineColorRTL($colorDanger);
|
||||
}
|
||||
.stepper-outline-success {
|
||||
@include stepperOutlineColorRTL($colorSuccess);
|
||||
}
|
||||
.stepper-outline-warning {
|
||||
@include stepperOutlineColorRTL($colorWarning);
|
||||
}
|
||||
.stepper-outline-info {
|
||||
@include stepperOutlineColorRTL($colorInfo);
|
||||
}
|
||||
.stepper-outline-dark {
|
||||
@include stepperOutlineColorRTL(#333);
|
||||
}
|
||||
|
||||
#search {
|
||||
.searchbox {
|
||||
.close {
|
||||
left: 8px;
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-head {
|
||||
.avatar {
|
||||
margin-left: 16px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.profile-stats {
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
.rate-block {
|
||||
i.bi,
|
||||
ion-icon,
|
||||
i.icon {
|
||||
margin-right: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
.in {
|
||||
.text {
|
||||
margin-left: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invoice {
|
||||
.invoice-person {
|
||||
.invoice-to,
|
||||
.i {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.invoice-from {
|
||||
padding-right: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.story-block {
|
||||
.splide__slide {
|
||||
padding-right: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding-left: 26px !important;
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.boxed,
|
||||
.form-group.basic {
|
||||
.form-control.form-select {
|
||||
background-position: left center !important;
|
||||
}
|
||||
}
|
||||
.form-group.boxed {
|
||||
.form-control.form-select {
|
||||
background-position: left 12px center !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
55
public/assets/sass/_theme-settings.scss
Normal file
55
public/assets/sass/_theme-settings.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
//--------------------------------------------------
|
||||
// ------ C O L O R S ------------------------------
|
||||
//--------------------------------------------------
|
||||
// Theme Colors
|
||||
$colorPrimary: #1E74FD;
|
||||
$colorSecondary: #6C7C94;
|
||||
$colorSuccess: #34C759;
|
||||
$colorDanger: #EC4433;
|
||||
$colorWarning: #FE9500;
|
||||
$colorInfo: #592BCA;
|
||||
// Background
|
||||
$colorBackground: #F9F9F9;
|
||||
// Line Colors
|
||||
$colorLine: #E1E1E1;
|
||||
// Text Colors
|
||||
$colorHeading: #141515;
|
||||
$colorText: #4F5050;
|
||||
$colorLight: #A1A1A2;
|
||||
|
||||
// Dark Mode Colors
|
||||
$darkModeBackground: #0c1624;
|
||||
$darkModeContentBackground: #0F1C2F;
|
||||
$darkModeColorHeading: #FFFFFF;
|
||||
$darkModeColorText: #8195a6;
|
||||
$darkModeColorLight: #586d7f;
|
||||
$darkModeColorLine: #1B283B;
|
||||
|
||||
//--------------------------------------------------
|
||||
// ------ FONT ------------------------------
|
||||
//--------------------------------------------------
|
||||
// Google font
|
||||
@import url('https://fonts.googleapis.com/css?family=Inter:400,500,700&display=swap');
|
||||
|
||||
// Font Family
|
||||
$fontFamily: 'Inter', sans-serif;
|
||||
// Define font weight
|
||||
$regular : 400; // font regular
|
||||
$medium : 500; // font medium (if font does not support medium, define the semibold)
|
||||
$bold : 700; // font bold or black
|
||||
// Typography
|
||||
$lineHeight: 1.55rem;
|
||||
$letterSpacing: -0.015rem;
|
||||
// Sizes
|
||||
$fontSizeHeadingXLarge: 34px;
|
||||
$fontSizeHeadingLarge: 24px;
|
||||
$fontSizeHeading: 17px;
|
||||
$fontSize: 15px;
|
||||
$fontSizeSub: 13px;
|
||||
$fontSizeCaption: 11px;
|
||||
|
||||
//--------------------------------------------------
|
||||
// ------ OTHERS -----------------------------------
|
||||
//--------------------------------------------------
|
||||
$borderRadius: 6px;
|
||||
$boxShadow : 0 3px 6px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.08);
|
||||
49
public/assets/sass/_ui-framework.scss
Normal file
49
public/assets/sass/_ui-framework.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@import 'framework/grid';
|
||||
@import 'framework/typography';
|
||||
@import 'framework/icon';
|
||||
@import 'framework/image';
|
||||
@import 'framework/loader';
|
||||
@import 'framework/badge';
|
||||
@import 'framework/listview';
|
||||
@import 'framework/card';
|
||||
@import 'framework/button';
|
||||
@import 'framework/accordion';
|
||||
@import 'framework/actionsheet';
|
||||
@import 'framework/dialog';
|
||||
@import 'framework/modal';
|
||||
@import 'framework/offcanvas';
|
||||
@import 'framework/tooltip';
|
||||
@import 'framework/dropdown';
|
||||
@import 'framework/color-class';
|
||||
@import 'framework/alert';
|
||||
@import 'framework/table';
|
||||
@import 'framework/inputs';
|
||||
@import 'framework/tabs';
|
||||
@import 'framework/checkbox-radio-toggle';
|
||||
@import 'framework/messages';
|
||||
@import 'framework/progressbar';
|
||||
@import 'framework/chips';
|
||||
@import 'framework/search';
|
||||
@import 'framework/carousel';
|
||||
@import 'framework/login';
|
||||
@import 'framework/timeline';
|
||||
@import 'framework/form-wizard';
|
||||
@import 'framework/adbox';
|
||||
@import 'framework/os-detection';
|
||||
@import 'framework/fab-button';
|
||||
@import 'framework/notification';
|
||||
@import 'framework/toast';
|
||||
@import 'framework/divider';
|
||||
@import 'framework/comment';
|
||||
@import 'framework/pagination';
|
||||
@import 'framework/error-page';
|
||||
@import 'framework/online-detection';
|
||||
@import 'framework/add-to-home';
|
||||
@import 'framework/go-to-top';
|
||||
@import 'framework/form-validation';
|
||||
@import 'framework/blog';
|
||||
@import 'framework/profile';
|
||||
@import 'framework/stepper';
|
||||
@import 'framework/e-commerce';
|
||||
@import 'framework/invoice';
|
||||
@import 'framework/stories';
|
||||
119
public/assets/sass/framework/_accordion.scss
Normal file
119
public/assets/sass/framework/_accordion.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
@function svg-bg-color($color) {
|
||||
@return "%23" + str-slice("#{$color}", 2, -1);
|
||||
}
|
||||
|
||||
.accordion {
|
||||
border-top: 1px solid $colorLine;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
background: #fff;
|
||||
&.accordion-flush {
|
||||
background: transparent;
|
||||
}
|
||||
.accordion-collapse {
|
||||
border: 0;
|
||||
}
|
||||
.accordion-item {
|
||||
border: 0;
|
||||
}
|
||||
.accordion-body {
|
||||
padding: 8px 16px 20px 16px;
|
||||
}
|
||||
.accordion-content {
|
||||
padding: 0;
|
||||
}
|
||||
.accordion-header {
|
||||
position: relative;
|
||||
.btn,
|
||||
.accordion-button {
|
||||
box-shadow: none !important;
|
||||
justify-content: flex-start !important;
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
text-align: left !important;
|
||||
font-weight: $regular;
|
||||
background: transparent !important;
|
||||
font-size: $fontSize;
|
||||
padding: 8px 50px 8px 16px;
|
||||
border: 0 !important;
|
||||
min-height: 50px;
|
||||
color: $colorHeading;
|
||||
&:active {
|
||||
background: rgba($colorLine, 0.3) !important;
|
||||
}
|
||||
&:after {
|
||||
background: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='#{svg-bg-color($colorLight)}' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
|
||||
no-repeat center center !important;
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: $colorLight;
|
||||
line-height: 1em;
|
||||
transition: 0s all;
|
||||
height: 18px;
|
||||
top: 50%;
|
||||
opacity: 0.5;
|
||||
margin-top: -9px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 1px;
|
||||
right: 0;
|
||||
}
|
||||
&.collapsed {
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&:before {
|
||||
background: $colorLine;
|
||||
}
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion-item:first-child {
|
||||
border-radius: $borderRadius $borderRadius 0 0;
|
||||
}
|
||||
.accordion-item:last-child {
|
||||
border-radius: 0 0 $borderRadius $borderRadius;
|
||||
.accordion-header .accordion-button:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inset {
|
||||
.accordion {
|
||||
border-radius: $borderRadius;
|
||||
border: 1px solid $colorLine;
|
||||
.accordion-item {
|
||||
&:first-child {
|
||||
.btn {
|
||||
border-radius: $borderRadius $borderRadius 0 0 !important;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.btn {
|
||||
border-radius: 0 0 $borderRadius $borderRadius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
133
public/assets/sass/framework/_actionsheet.scss
Normal file
133
public/assets/sass/framework/_actionsheet.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
.offcanvas.action-sheet {
|
||||
border: 0;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
.offcanvas-body {
|
||||
padding: 0;
|
||||
.action-sheet-content{
|
||||
padding: 20px 16px;
|
||||
max-height: 460px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.offcanvas-header {
|
||||
padding: 2px 20px;
|
||||
display: block;
|
||||
min-height: auto;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
.offcanvas-title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: $fontSizeSub;
|
||||
padding: 6px 0;
|
||||
color: $colorHeading;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.close-button{
|
||||
font-size: 20px;
|
||||
color: $colorLight;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover,
|
||||
&:active{
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas.action-sheet.inset {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
width: auto;
|
||||
bottom: 16px;
|
||||
border-radius: 16px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: $safeBottom;
|
||||
.action-button-list {
|
||||
> li:last-child {
|
||||
.btn {
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-button-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
> li {
|
||||
display: block;
|
||||
.btn {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
font-size: $fontSize;
|
||||
color: $colorHeading;
|
||||
line-height: 1.1em;
|
||||
justify-content: space-between;
|
||||
font-weight: $regular;
|
||||
border-radius: 0 !important;
|
||||
padding: 10px 16px;
|
||||
&:active,
|
||||
&.active {
|
||||
background: rgba($colorLine, 0.3);
|
||||
}
|
||||
&.text-primary {
|
||||
color: $colorPrimary !important;
|
||||
}
|
||||
&.text-secondary {
|
||||
color: $colorSecondary !important;
|
||||
}
|
||||
&.text-danger {
|
||||
color: $colorDanger !important;
|
||||
}
|
||||
&.text-success {
|
||||
color: $colorSuccess !important;
|
||||
}
|
||||
&.text-warning {
|
||||
color: $colorWarning !important;
|
||||
}
|
||||
&.text-info {
|
||||
color: $colorInfo !important;
|
||||
}
|
||||
&.text-light {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.text-dark {
|
||||
color: $colorHeading !important;
|
||||
}
|
||||
> span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
width: 24px !important;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
margin-left: -5px;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
&.action-divider {
|
||||
height: 1px;
|
||||
background: $colorLine;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
public/assets/sass/framework/_adbox.scss
Normal file
42
public/assets/sass/framework/_adbox.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.adbox{
|
||||
text-align: center;
|
||||
&.fixed{
|
||||
position: fixed;
|
||||
bottom: 56px;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
width: 300px;
|
||||
z-index: 100;
|
||||
padding-bottom: $safeBottom;
|
||||
.closebutton{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 22px;
|
||||
background: rgba(0,0,0,.4);
|
||||
color: rgba(255,255,255,.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
&.fixed{
|
||||
bottom: -100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.adbox-300-50{
|
||||
img{
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.adbox-300-250{
|
||||
img{
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
119
public/assets/sass/framework/_add-to-home.scss
Normal file
119
public/assets/sass/framework/_add-to-home.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
.ios-add-to-home {
|
||||
.action-sheet-content {
|
||||
position: relative;
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorHeading;
|
||||
line-height: 1.5em;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 22px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 14px solid transparent;
|
||||
border-right: 14px solid transparent;
|
||||
border-top: 10px solid #fff;
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
z-index: 10;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
.android-add-to-home{
|
||||
bottom: auto !important;
|
||||
padding-top: 0;
|
||||
margin-top: $safeTop;
|
||||
top: 16px;
|
||||
left: 6px !important;
|
||||
right: 6px !important;
|
||||
z-index: 99999;
|
||||
border-radius: 6px !important;
|
||||
.action-sheet-content {
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorHeading;
|
||||
line-height: 1.5em;
|
||||
h4 {
|
||||
font-size: $fontSize;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 14px solid transparent;
|
||||
border-right: 14px solid transparent;
|
||||
border-top: 10px solid #fff;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
z-index: 10;
|
||||
right: 8px;
|
||||
transform: rotate(180deg);
|
||||
margin-left: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
.android-add-to-home2 {
|
||||
z-index: 200000;
|
||||
.modal-dialog {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
padding: 6px !important;
|
||||
transform: translate(0, -100%) !important;
|
||||
transition: 0.5s all !important;
|
||||
}
|
||||
&.show .modal-dialog {
|
||||
transform: translate(0, 0) !important;
|
||||
top: 10px;
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px !important;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 14px solid transparent;
|
||||
border-right: 14px solid transparent;
|
||||
border-top: 10px solid #fff;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
z-index: 10;
|
||||
right: 9px;
|
||||
transform: rotate(180deg);
|
||||
margin-left: -16px;
|
||||
}
|
||||
.action-sheet-content {
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorHeading;
|
||||
line-height: 1.5em;
|
||||
h4 {
|
||||
font-size: $fontSize;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
142
public/assets/sass/framework/_alert.scss
Normal file
142
public/assets/sass/framework/_alert.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
.alert {
|
||||
margin: 0;
|
||||
padding: 6px 16px;
|
||||
border: 0;
|
||||
font-size: $fontSizeSub;
|
||||
border-radius: $borderRadius;
|
||||
.btn-close {
|
||||
text-shadow: none !important;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
line-height: 1em;
|
||||
height: 36px !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background: none;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus{
|
||||
outline: 0 !important;
|
||||
}
|
||||
&:hover{
|
||||
opacity: .7;
|
||||
}
|
||||
&:before,
|
||||
&:after{
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
left: 12px;
|
||||
top: 16px;
|
||||
content: '';
|
||||
display: block;
|
||||
background: #FFF;
|
||||
border-radius: 20px;
|
||||
}
|
||||
&:before{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after{
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.alert-title{
|
||||
margin: 4px 0;
|
||||
font-size: $fontSize;
|
||||
font-weight: $medium;
|
||||
}
|
||||
&.alert-dismissible{
|
||||
padding-right: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin alertStyle($color) {
|
||||
background: $color;
|
||||
color: #fff;
|
||||
border: 1px solid $color;
|
||||
a{
|
||||
color: #fff !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.alert-title{
|
||||
color: #FFF;
|
||||
}
|
||||
.close{
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
@mixin alertOutlineStyle($color) {
|
||||
background: transparent;
|
||||
color: $color;
|
||||
border: 1px solid $color;
|
||||
a{
|
||||
color: $color !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.alert-title{
|
||||
color: $color;
|
||||
}
|
||||
.btn-close {
|
||||
color: $color;
|
||||
opacity: 1;
|
||||
&:before,
|
||||
&:after{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
@include alertStyle($colorPrimary);
|
||||
}
|
||||
.alert-outline-primary {
|
||||
@include alertOutlineStyle($colorPrimary);
|
||||
}
|
||||
.alert-secondary {
|
||||
@include alertStyle($colorSecondary);
|
||||
}
|
||||
.alert-outline-secondary {
|
||||
@include alertOutlineStyle($colorSecondary);
|
||||
}
|
||||
.alert-success {
|
||||
@include alertStyle($colorSuccess);
|
||||
}
|
||||
.alert-outline-success {
|
||||
@include alertOutlineStyle($colorSuccess);
|
||||
}
|
||||
.alert-danger {
|
||||
@include alertStyle($colorDanger);
|
||||
}
|
||||
.alert-outline-danger {
|
||||
@include alertOutlineStyle($colorDanger);
|
||||
}
|
||||
.alert-warning {
|
||||
@include alertStyle($colorWarning);
|
||||
}
|
||||
.alert-outline-warning {
|
||||
@include alertOutlineStyle($colorWarning);
|
||||
}
|
||||
.alert-info {
|
||||
@include alertStyle($colorInfo);
|
||||
}
|
||||
.alert-outline-info {
|
||||
@include alertOutlineStyle($colorInfo);
|
||||
}
|
||||
.alert-light {
|
||||
background: #FFF;
|
||||
color: $colorHeading;
|
||||
}
|
||||
.alert-dark {
|
||||
background: #333;
|
||||
color: #FFF;
|
||||
a{
|
||||
color: #FFF !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
.alert-outline-dark {
|
||||
background: transparent;
|
||||
color: #333;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
87
public/assets/sass/framework/_badge.scss
Normal file
87
public/assets/sass/framework/_badge.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
.badge{
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
border-radius: 100px;
|
||||
letter-spacing: 0;
|
||||
height: 22px;
|
||||
min-width: 22px;
|
||||
padding: 0 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: $regular;
|
||||
}
|
||||
.badge-primary,
|
||||
a.badge-primary{
|
||||
background: $colorPrimary !important;
|
||||
}
|
||||
.badge-secondary,
|
||||
a.badge-secondary{
|
||||
background: $colorSecondary !important;
|
||||
}
|
||||
.badge-success,
|
||||
a.badge-success{
|
||||
background: $colorSuccess !important;
|
||||
}
|
||||
.badge-danger,
|
||||
a.badge-danger{
|
||||
background: $colorDanger !important;
|
||||
}
|
||||
.badge-warning,
|
||||
a.badge-warning{
|
||||
background: $colorWarning !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.badge-info,
|
||||
a.badge-info{
|
||||
background: $colorInfo !important;
|
||||
}
|
||||
.badge-light,
|
||||
a.badge-light{
|
||||
background: rgba(255,255,255,.6) !important;
|
||||
color: $colorHeading;
|
||||
}
|
||||
.badge-dark,
|
||||
a.badge-dark{
|
||||
background: #222 !important;
|
||||
}
|
||||
.badge-empty{
|
||||
display: block !important;
|
||||
min-width: 8px !important;
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
padding: 0 !important;
|
||||
font-size: 0px;
|
||||
}
|
||||
.appHeader{
|
||||
.badge{
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
line-height: 9px !important;
|
||||
font-size: 10px;
|
||||
padding: 0 4px !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 10px;
|
||||
}
|
||||
.badge-empty{
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
.appBottomMenu{
|
||||
.badge{
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
line-height: 9px !important;
|
||||
font-size: 10px;
|
||||
padding: 0 4px !important;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translateX(120%);
|
||||
top: 10px;
|
||||
}
|
||||
.badge-empty{
|
||||
transform: translateX(200%);
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
30
public/assets/sass/framework/_blog.scss
Normal file
30
public/assets/sass/framework/_blog.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.blog-post{
|
||||
.title{
|
||||
padding: 0px 16px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.post-header{
|
||||
font-size: $fontSizeCaption;
|
||||
padding: 10px 0;
|
||||
margin: 16px 16px;
|
||||
color: $colorLight;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $colorLine;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
a{
|
||||
color: $colorHeading;
|
||||
font-weight: $bold;
|
||||
}
|
||||
}
|
||||
.post-body{
|
||||
padding: 0 16px;
|
||||
img{
|
||||
width: calc(100% + 32px);
|
||||
height: auto;
|
||||
margin: 0px -16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
497
public/assets/sass/framework/_button.scss
Normal file
497
public/assets/sass/framework/_button.scss
Normal file
@@ -0,0 +1,497 @@
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 3px 18px;
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.2em;
|
||||
font-weight: $medium;
|
||||
box-shadow: none !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: none;
|
||||
text-decoration: none !important;
|
||||
border-radius: $borderRadius;
|
||||
border-width: 2px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 22px;
|
||||
margin-right: 10px;
|
||||
margin-top: -2px;
|
||||
font-weight: 700;
|
||||
}
|
||||
&.rounded {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
&.square {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
&.shadowed {
|
||||
box-shadow: $boxShadow !important;
|
||||
}
|
||||
}
|
||||
.btn-lg {
|
||||
height: 48px;
|
||||
padding: 3px 24px;
|
||||
font-size: 18px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.btn-sm {
|
||||
height: 30px;
|
||||
padding: 0px 12px;
|
||||
font-size: 12px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-group {
|
||||
.btn {
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
text-align: center;
|
||||
margin: 0 !important;
|
||||
}
|
||||
&.btn-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonStyle($color) {
|
||||
background: $color !important;
|
||||
border-color: $color !important;
|
||||
color: #ffffff !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken($color, 5%) !important;
|
||||
border-color: darken($color, 5%) !important;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
@include buttonStyle($colorPrimary);
|
||||
}
|
||||
.btn-secondary {
|
||||
@include buttonStyle($colorSecondary);
|
||||
}
|
||||
.btn-success {
|
||||
@include buttonStyle($colorSuccess);
|
||||
}
|
||||
.btn-danger {
|
||||
@include buttonStyle($colorDanger);
|
||||
}
|
||||
.btn-warning {
|
||||
color: #fff !important;
|
||||
@include buttonStyle($colorWarning);
|
||||
}
|
||||
.btn-link {
|
||||
color: $colorPrimary !important;
|
||||
}
|
||||
.btn-info {
|
||||
@include buttonStyle($colorInfo);
|
||||
}
|
||||
.btn-dark {
|
||||
@include buttonStyle(#333);
|
||||
}
|
||||
.btn-light {
|
||||
@include buttonStyle(rgba(255, 255, 255, 0.5));
|
||||
color: $colorHeading !important;
|
||||
}
|
||||
@mixin buttonOutlineStyle($color) {
|
||||
background: transparent;
|
||||
border-color: $color;
|
||||
border-width: 1px !important;
|
||||
color: $color;
|
||||
transition: none;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: rgba($color, 0.15) !important;
|
||||
border-color: $color !important;
|
||||
color: $color !important;
|
||||
}
|
||||
&.active {
|
||||
background: $color !important;
|
||||
color: #fff !important;
|
||||
border-color: $color !important;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color !important;
|
||||
border-color: $color !important;
|
||||
background: transparent !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.btn-outline-primary {
|
||||
@include buttonOutlineStyle($colorPrimary);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
@include buttonOutlineStyle($colorSecondary);
|
||||
}
|
||||
.btn-outline-success {
|
||||
@include buttonOutlineStyle($colorSuccess);
|
||||
}
|
||||
.btn-outline-danger {
|
||||
@include buttonOutlineStyle($colorDanger);
|
||||
}
|
||||
.btn-outline-warning {
|
||||
@include buttonOutlineStyle($colorWarning);
|
||||
}
|
||||
.btn-outline-info {
|
||||
@include buttonOutlineStyle($colorInfo);
|
||||
}
|
||||
.btn-outline-light {
|
||||
@include buttonOutlineStyle(#fff);
|
||||
&:active {
|
||||
color: $colorHeading !important;
|
||||
}
|
||||
}
|
||||
.btn-outline-dark {
|
||||
border-width: 1px;
|
||||
}
|
||||
@mixin buttonTextStyle($color) {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: $color !important;
|
||||
transition: none;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: rgba($color, 0.15) !important;
|
||||
border-color: transparent !important;
|
||||
color: $color !important;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color !important;
|
||||
border-color: $color !important;
|
||||
background: transparent !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.btn-text-primary {
|
||||
@include buttonTextStyle($colorPrimary);
|
||||
}
|
||||
.btn-text-secondary {
|
||||
@include buttonTextStyle($colorSecondary);
|
||||
}
|
||||
.btn-text-success {
|
||||
@include buttonTextStyle($colorSuccess);
|
||||
}
|
||||
.btn-text-danger {
|
||||
@include buttonTextStyle($colorDanger);
|
||||
}
|
||||
.btn-text-warning {
|
||||
@include buttonTextStyle($colorWarning);
|
||||
}
|
||||
.btn-text-info {
|
||||
@include buttonTextStyle($colorInfo);
|
||||
}
|
||||
.btn-text-light {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
.btn-text-dark {
|
||||
@include buttonTextStyle($colorHeading);
|
||||
}
|
||||
.btn-group {
|
||||
.btn {
|
||||
margin-left: -1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
color: #fff !important;
|
||||
background: #39579b;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#39579b, 5%);
|
||||
}
|
||||
}
|
||||
.bg-facebook {
|
||||
background: #39579b;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
color: #fff !important;
|
||||
background: #049ff6;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#049ff6, 5%);
|
||||
}
|
||||
}
|
||||
.bg-twitter {
|
||||
background: #049ff6;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
color: #fff !important;
|
||||
background: #df237b;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#df237b, 5%);
|
||||
}
|
||||
}
|
||||
.bg-instagram {
|
||||
background: #de0067;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
color: #fff !important;
|
||||
background: #0075aa;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#0075aa, 5%);
|
||||
}
|
||||
}
|
||||
.bg-linkedin {
|
||||
background: #0075aa;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-twitch {
|
||||
color: #fff !important;
|
||||
background: #923cff;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#923cff, 5%);
|
||||
}
|
||||
}
|
||||
.bg-twitch {
|
||||
background: #923cff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-whatsapp {
|
||||
color: #fff !important;
|
||||
background: #0ad561;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#0ad561, 5%);
|
||||
}
|
||||
}
|
||||
.bg-whatsapp {
|
||||
background: #0ad561;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
color: #fff !important;
|
||||
background: #ff0000;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#ff0000, 5%);
|
||||
}
|
||||
}
|
||||
.bg-youtube {
|
||||
background: #ff0000;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-amazon {
|
||||
color: #fff !important;
|
||||
background: #292929;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#292929, 5%);
|
||||
}
|
||||
}
|
||||
.bg-amazon {
|
||||
background: #292929;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-android {
|
||||
color: #fff !important;
|
||||
background: #7dd159;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#7dd159, 5%);
|
||||
}
|
||||
}
|
||||
.bg-android {
|
||||
background: #7dd159;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-apple {
|
||||
color: #fff !important;
|
||||
background: #000;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: #222;
|
||||
}
|
||||
}
|
||||
.bg-apple {
|
||||
background: #000;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
color: #fff !important;
|
||||
background: #ec4989;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#ec4989, 5%);
|
||||
}
|
||||
}
|
||||
.bg-dribbble {
|
||||
background: #ec4989;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-skype {
|
||||
color: #fff !important;
|
||||
background: #00a8f3;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#00a8f3, 5%);
|
||||
}
|
||||
}
|
||||
.bg-skype {
|
||||
background: #00a8f3;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
color: #fff !important;
|
||||
background: #f12a2c;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#f12a2c, 5%);
|
||||
}
|
||||
}
|
||||
.bg-pinterest {
|
||||
background: #f12a2c;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-dropbox {
|
||||
color: #fff !important;
|
||||
background: #005cff;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#005cff, 5%);
|
||||
}
|
||||
}
|
||||
.bg-dropbox {
|
||||
background: #005cff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-bitcoin {
|
||||
color: #fff !important;
|
||||
background: #f99400;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#f99400, 5%);
|
||||
}
|
||||
}
|
||||
.bg-bitcoin {
|
||||
background: #f99400;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
color: #fff !important;
|
||||
background: #323131;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken(#323131, 5%);
|
||||
}
|
||||
}
|
||||
.bg-github {
|
||||
background: #323131;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@mixin radiobuttons($color) {
|
||||
background: $color !important;
|
||||
border-color: $color !important;
|
||||
}
|
||||
.btn-check:checked + .btn-outline-primary,
|
||||
.btn-check:checked + .btn-outline-secondary,
|
||||
.btn-check:checked + .btn-outline-danger,
|
||||
.btn-check:checked + .btn-outline-warning,
|
||||
.btn-check:checked + .btn-outline-success,
|
||||
.btn-check:checked + .btn-outline-info,
|
||||
.btn-check:checked + .btn-outline-dark{
|
||||
color: #fff !important;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-check:checked + .btn-outline-primary {
|
||||
@include radiobuttons($colorPrimary);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-secondary {
|
||||
@include radiobuttons($colorSecondary);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-warning {
|
||||
@include radiobuttons($colorWarning);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-danger {
|
||||
@include radiobuttons($colorDanger);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-success {
|
||||
@include radiobuttons($colorSuccess);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-info {
|
||||
@include radiobuttons($colorInfo);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-dark {
|
||||
@include radiobuttons(#222);
|
||||
}
|
||||
|
||||
|
||||
117
public/assets/sass/framework/_card.scss
Normal file
117
public/assets/sass/framework/_card.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: $borderRadius;
|
||||
border: 0;
|
||||
box-shadow: $boxShadow;
|
||||
.card-body {
|
||||
padding: 24px 16px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.card-title {
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
font-weight: $bold;
|
||||
}
|
||||
.card-subtitle {
|
||||
color: $colorText;
|
||||
font-weight: $medium;
|
||||
letter-spacing: .01em;
|
||||
font-size: $fontSizeCaption;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.listview {
|
||||
> li:first-child {
|
||||
.item {
|
||||
border-radius: $borderRadius $borderRadius 0 0;
|
||||
}
|
||||
}
|
||||
> li:last-child {
|
||||
.item {
|
||||
border-radius: 0 0 $borderRadius $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
background: transparent;
|
||||
color: $colorHeading;
|
||||
font-weight: $medium;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
}
|
||||
.card-footer {
|
||||
background: transparent;
|
||||
border-top: 1px solid $colorLine;
|
||||
color: $colorText;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.card-img-top {
|
||||
border-radius: $borderRadius $borderRadius 0 0;
|
||||
}
|
||||
.overlay-img {
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
.card-img-overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: $borderRadius;
|
||||
.card-title {
|
||||
color: #fff;
|
||||
}
|
||||
.card-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-danger,
|
||||
&.bg-success,
|
||||
&.bg-warning,
|
||||
&.bg-info,
|
||||
&.bg-dark {
|
||||
border: 0;
|
||||
.card-title {
|
||||
color: #fff;
|
||||
}
|
||||
.card-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.card-header {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
&.bg-light {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.card.product-card{
|
||||
.card-body{
|
||||
padding: 8px;
|
||||
}
|
||||
.image{
|
||||
width: 100%;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
.title{
|
||||
font-size: $fontSize;
|
||||
margin: 10px 0 0 0;
|
||||
padding: 0 4px;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.text{
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
margin: 0;
|
||||
padding: 0 4px 10px 4px;
|
||||
}
|
||||
.price{
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0px 4px;
|
||||
display: block;
|
||||
font-size: $fontSize;
|
||||
font-weight: $medium;
|
||||
color: $colorPrimary;
|
||||
}
|
||||
}
|
||||
64
public/assets/sass/framework/_carousel.scss
Normal file
64
public/assets/sass/framework/_carousel.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.splide {
|
||||
margin-bottom: -20px !important;
|
||||
&:active{
|
||||
cursor: grab;
|
||||
}
|
||||
.splide__list {
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
}
|
||||
.carousel-single,
|
||||
.carousel-small {
|
||||
.splide__slide {
|
||||
margin-left: -16px !important;
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
}
|
||||
.carousel-multiple{
|
||||
.splide__slide {
|
||||
margin-left: -8px !important;
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
}
|
||||
.carousel-slider {
|
||||
text-align: center;
|
||||
.splide__list {
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
.imaged.w-100 {
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.splide__pagination {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 120px;
|
||||
button {
|
||||
background: $colorLine;
|
||||
margin: 0 5px !important;
|
||||
&.is-active {
|
||||
background: $colorLight;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-button-footer {
|
||||
min-height: 84px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: $safeBottom;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 990;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
128
public/assets/sass/framework/_checkbox-radio-toggle.scss
Normal file
128
public/assets/sass/framework/_checkbox-radio-toggle.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
// Form check
|
||||
.form-check {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
.form-check-input {
|
||||
display: none;
|
||||
}
|
||||
.form-check-label {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
min-height: 20px;
|
||||
padding: 0px 0 0 32px;
|
||||
line-height: 1.7em;
|
||||
color: $colorHeading;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: transparent;
|
||||
border-radius: 100px;
|
||||
border: 1px solid $colorLine;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-input[type="radio"] ~ .form-check-label:before {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='8px' height='8px' viewBox='0 0 8 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Ccircle id='Oval' fill='%23FFFFFF' cx='4' cy='4' r='4'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label {
|
||||
&:after {
|
||||
background-color: $colorPrimary;
|
||||
border-color: $colorPrimary !important;
|
||||
}
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
.form-check-label {
|
||||
margin-bottom: -3px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-list {
|
||||
.form-check {
|
||||
&:after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: $colorLine;
|
||||
display: block;
|
||||
margin-left: 54px;
|
||||
}
|
||||
.form-check-label {
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: 0.1s all;
|
||||
padding: 6px 16px 6px 54px;
|
||||
&:before,
|
||||
&:after {
|
||||
left: 16px;
|
||||
top: 14px;
|
||||
}
|
||||
&:active {
|
||||
background: rgba($colorLine, 0.3);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
&:after {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-switch {
|
||||
height: 30px;
|
||||
.form-check-label {
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:after {
|
||||
height: 30px;
|
||||
width: 56px;
|
||||
background: $colorLine;
|
||||
border: 1px solid darken($colorLine, 5%);
|
||||
transition: .1s linear;
|
||||
}
|
||||
&:before {
|
||||
opacity: 1;
|
||||
border-radius: 100px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
|
||||
transition: .15s ease-in-out;
|
||||
}
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label {
|
||||
&:before {
|
||||
left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
public/assets/sass/framework/_chips.scss
Normal file
146
public/assets/sass/framework/_chips.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.chip {
|
||||
background: $colorLine;
|
||||
font-size: 13px;
|
||||
color: $colorHeading;
|
||||
line-height: 1em;
|
||||
height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
border-radius: 100px;
|
||||
.chip-label {
|
||||
padding: 0 12px;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1px $colorLine;
|
||||
}
|
||||
&.chip-media {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.chip-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
background: $colorText;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.chip-delete {
|
||||
width: 26px;
|
||||
margin-left: -10px;
|
||||
height: 26px;
|
||||
display: inline-flex;
|
||||
color: $colorHeading;
|
||||
opacity: 0.7;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
border-radius: 100px;
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chip-primary {
|
||||
background: $colorPrimary !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: $colorPrimary !important;
|
||||
box-shadow: inset 0 0 0 1px $colorPrimary !important;
|
||||
}
|
||||
}
|
||||
.chip-danger {
|
||||
background: $colorDanger !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: $colorDanger !important;
|
||||
box-shadow: inset 0 0 0 1px $colorDanger !important;
|
||||
}
|
||||
}
|
||||
.chip-success {
|
||||
background: $colorSuccess !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: $colorSuccess !important;
|
||||
box-shadow: inset 0 0 0 1px $colorSuccess !important;
|
||||
}
|
||||
}
|
||||
.chip-warning {
|
||||
background: $colorWarning !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: $colorWarning !important;
|
||||
box-shadow: inset 0 0 0 1px $colorWarning !important;
|
||||
}
|
||||
}
|
||||
.chip-info {
|
||||
background: $colorInfo !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: $colorInfo !important;
|
||||
box-shadow: inset 0 0 0 1px $colorInfo !important;
|
||||
}
|
||||
}
|
||||
.chip-light {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
.chip-delete {
|
||||
color: #000 !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
box-shadow: inset 0 0 0 1px #fff !important;
|
||||
}
|
||||
}
|
||||
.chip-dark {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
.chip-delete {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.chip-outline {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: inset 0 0 0 1px #000 !important;
|
||||
}
|
||||
}
|
||||
153
public/assets/sass/framework/_color-class.scss
Normal file
153
public/assets/sass/framework/_color-class.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
.bg-primary{
|
||||
background: $colorPrimary !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-secondary{
|
||||
background: $colorSecondary !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-success{
|
||||
background: $colorSuccess !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-danger{
|
||||
background: $colorDanger !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-warning{
|
||||
background: $colorWarning !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-info{
|
||||
background: $colorInfo !important;
|
||||
color: #FFF;
|
||||
}
|
||||
.bg-light{
|
||||
background: rgba(255,255,255,.5) !important;
|
||||
}
|
||||
.bg-dark{
|
||||
background: #222 !important;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.bg-primary{
|
||||
background: $colorPrimary !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorPrimary, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-secondary{
|
||||
background: $colorSecondary !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorSecondary, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-success{
|
||||
background: $colorSuccess !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorSuccess, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-danger{
|
||||
background: $colorDanger !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorDanger, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-warning{
|
||||
background: $colorWarning !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorWarning, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-info{
|
||||
background: $colorInfo !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken($colorInfo, 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-light{
|
||||
background: rgba(255,255,255,.5) !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken(rgba(255,255,255,.5), 5%) !important;
|
||||
}
|
||||
}
|
||||
a.bg-dark{
|
||||
background: #222 !important;
|
||||
color: #FFF !important;
|
||||
&:hover,
|
||||
&:active{
|
||||
background:darken(#222, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary,
|
||||
a.text-primary{
|
||||
color: $colorPrimary !important;
|
||||
}
|
||||
.text-secondary,
|
||||
a.text-secondary{
|
||||
color: $colorSecondary !important;
|
||||
}
|
||||
.text-success,
|
||||
a.text-success{
|
||||
color: $colorSuccess !important;
|
||||
}
|
||||
.text-danger,
|
||||
a.text-danger{
|
||||
color: $colorDanger !important;
|
||||
}
|
||||
.text-warning,
|
||||
a.text-warning{
|
||||
color: $colorWarning !important;
|
||||
}
|
||||
.text-info,
|
||||
a.text-info{
|
||||
color: $colorInfo !important;
|
||||
}
|
||||
.text-light,
|
||||
a.text-light{
|
||||
color: #FFF !important;
|
||||
}
|
||||
.text-dark,
|
||||
a.text-dark{
|
||||
color: $colorHeading !important;
|
||||
}
|
||||
|
||||
.border-primary{
|
||||
border-color: $colorPrimary !important;
|
||||
}
|
||||
.border-secondary{
|
||||
border-color: $colorSecondary !important;
|
||||
}
|
||||
.border-success{
|
||||
border-color: $colorSuccess !important;
|
||||
}
|
||||
.border-danger{
|
||||
border-color: $colorDanger !important;
|
||||
}
|
||||
.border-warning{
|
||||
border-color: $colorWarning !important;
|
||||
}
|
||||
.border-info{
|
||||
border-color: $colorInfo !important;
|
||||
}
|
||||
.border-light{
|
||||
border-color: #FFF !important;
|
||||
}
|
||||
.border-dark{
|
||||
border-color: $colorHeading !important;
|
||||
}
|
||||
77
public/assets/sass/framework/_comment.scss
Normal file
77
public/assets/sass/framework/_comment.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.comment-block{
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.6em;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 30px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.avatar{
|
||||
margin-right: 14px;
|
||||
}
|
||||
.in{
|
||||
width: 100%;
|
||||
}
|
||||
.text{
|
||||
color: $colorText;
|
||||
}
|
||||
.comment-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
.title{
|
||||
margin: 0;
|
||||
padding-right: 10px;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSize;
|
||||
}
|
||||
.time{
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
}
|
||||
}
|
||||
.comment-footer{
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
font-size: $fontSizeCaption;
|
||||
.comment-button{
|
||||
font-weight: $medium;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
margin-right: 14px;
|
||||
color: $colorText !important;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
margin-right: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-box{
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
.imaged{
|
||||
margin: 0 auto 10px auto;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
.card-title{
|
||||
margin: 0;
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.card-text{
|
||||
font-size: $fontSizeCaption;
|
||||
}
|
||||
.text{
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
112
public/assets/sass/framework/_dialog.scss
Normal file
112
public/assets/sass/framework/_dialog.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
.dialogbox {
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 12000;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(0, 0) !important;
|
||||
transform: scale(0.8) !important;
|
||||
.form-group{
|
||||
text-align: left;
|
||||
}
|
||||
.modal-content {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
.btn-list {
|
||||
margin: 0;
|
||||
.btn {
|
||||
padding: 0px 10px;
|
||||
min-height: 58px;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $colorLine !important;
|
||||
font-size: $fontSize;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: rgba($colorLine,.3) !important;
|
||||
}
|
||||
}
|
||||
.btn:last-child{
|
||||
border-radius: 0 0 16px 16px;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.btn-inline{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
background: $colorLine;
|
||||
.btn{
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
min-height: 58px;
|
||||
border: 0 !important;
|
||||
font-size: $fontSize;
|
||||
margin-right: 1px;
|
||||
background: #FFF;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: rgba(255,255,255,.8) !important;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
border-radius: 0 0 16px 0 !important;
|
||||
}
|
||||
&:first-child{
|
||||
border-radius: 0 0 0 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 20px 20px 10px 20px;
|
||||
.modal-title {
|
||||
color: $colorHeading;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-size: $fontSize;
|
||||
}
|
||||
.modal-footer {
|
||||
border: 0;
|
||||
border-top: 1px solid $colorLine;
|
||||
padding: 0;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show .modal-dialog {
|
||||
transform: translate(0, 0) !important;
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-icon{
|
||||
font-size: 60px;
|
||||
line-height: 1em;
|
||||
margin-top: 30px;
|
||||
margin-bottom: -10px;
|
||||
color: $colorPrimary;
|
||||
text-align: center;
|
||||
}
|
||||
22
public/assets/sass/framework/_divider.scss
Normal file
22
public/assets/sass/framework/_divider.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.divider{
|
||||
height: 1px;
|
||||
background: $colorLine;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon-box{
|
||||
background: $colorLine;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFF;
|
||||
border-radius: 100%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
&.inset{
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
62
public/assets/sass/framework/_dropdown.scss
Normal file
62
public/assets/sass/framework/_dropdown.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.dropdown,
|
||||
.dropup{
|
||||
.dropdown-menu {
|
||||
border: 1px solid transparent;
|
||||
min-width: 120px;
|
||||
padding: 8px 0;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $boxShadow;
|
||||
margin-top: 3px !important;
|
||||
.dropdown-item {
|
||||
padding: 12px 16px;
|
||||
line-height: 1.2em;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: rgba($colorLine, .5);
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid $colorLine;
|
||||
}
|
||||
.dropdown-header{
|
||||
padding: 9px 16px;
|
||||
color: $colorText;
|
||||
font-weight: $regular;
|
||||
font-size: $fontSizeCaption;
|
||||
}
|
||||
.text{
|
||||
padding: 9px 16px;
|
||||
color: $colorText;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
margin-right: 10px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 22px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1em;
|
||||
display: inline-flex;
|
||||
color: $colorHeading
|
||||
}
|
||||
}
|
||||
}
|
||||
.appHeader{
|
||||
.dropdown-menu{
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle{
|
||||
&:after{
|
||||
border-radius: 4px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
91
public/assets/sass/framework/_e-commerce.scss
Normal file
91
public/assets/sass/framework/_e-commerce.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
.rate-block{
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
color: $colorLight;
|
||||
i.bi,
|
||||
ion-icon,
|
||||
i.icon{
|
||||
margin-right: 3px;
|
||||
&.active{
|
||||
color: $colorWarning;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-block{
|
||||
.rate-block{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.product-detail-header{
|
||||
.title{
|
||||
margin: 0 0 2px 0;
|
||||
font-weight: $medium;
|
||||
font-size: $fontSizeHeading;
|
||||
color: $colorHeading;
|
||||
}
|
||||
.text{
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorText;
|
||||
}
|
||||
.detail-footer{
|
||||
margin: 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.price{
|
||||
.old-price{
|
||||
font-size: $fontSize;
|
||||
color: $colorText;
|
||||
text-decoration: line-through;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.current-price{
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
color: $colorPrimary;
|
||||
font-weight: $medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item{
|
||||
.card-body{
|
||||
padding: 16px;
|
||||
}
|
||||
.imaged{
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
.in{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
margin-left: 16px;
|
||||
.title{
|
||||
font-weight: $medium;
|
||||
font-size: $fontSize;
|
||||
line-height: 1.2em;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
.detail{
|
||||
line-height: 1.2em;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
}
|
||||
.price{
|
||||
font-weight: $medium;
|
||||
font-size: $fontSize;
|
||||
color: $colorPrimary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-item-footer{
|
||||
border-top: 1px solid $colorLine;
|
||||
padding: 16px 0 0 0;
|
||||
margin: 16px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
44
public/assets/sass/framework/_error-page.scss
Normal file
44
public/assets/sass/framework/_error-page.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.error-page{
|
||||
text-align: center;
|
||||
padding: 40px 16px;
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
.icon-box{
|
||||
font-size: 86px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title{
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
#countDown{
|
||||
font-size: 20px;
|
||||
font-weight: $bold;
|
||||
text-transform: uppercase;
|
||||
color: $colorHeading;
|
||||
margin: 0 -40px;
|
||||
.alert{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
> div{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
border: 1px solid $colorLine;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
border-radius: $borderRadius;
|
||||
padding: 10px 5px;
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
font-weight: $regular;
|
||||
color: $colorLight;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
161
public/assets/sass/framework/_fab-button.scss
Normal file
161
public/assets/sass/framework/_fab-button.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
.fab-button {
|
||||
.fab {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $colorPrimary;
|
||||
border-radius: 100%;
|
||||
color: #fff !important;
|
||||
> i.bi,
|
||||
> i.icon,
|
||||
> ion-icon {
|
||||
font-size: 26px;
|
||||
transition: .2s all;
|
||||
--ionicon-stroke-width: 42px;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
}
|
||||
&.text{
|
||||
.fab{
|
||||
> i.bi,
|
||||
> i.icon,
|
||||
> ion-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
width: auto;
|
||||
border-radius: 300px;
|
||||
font-size: $fontSizeHeading;
|
||||
padding: 0px 24px;
|
||||
}
|
||||
}
|
||||
&.animate {
|
||||
.fab.show {
|
||||
ion-icon[name=add],
|
||||
ion-icon[name=add-sharp],
|
||||
ion-icon[name=add-outline]{
|
||||
transform: rotate(45deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown.show{
|
||||
.fab{
|
||||
background: darken($colorPrimary, 5%);
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0px 7px;
|
||||
width: 56px;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
text-align: center;
|
||||
.dropdown-item {
|
||||
padding: 0;
|
||||
background: $colorPrimary;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
margin: 14px 0;
|
||||
border-radius: 100%;
|
||||
box-shadow: $boxShadow;
|
||||
position: relative;
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
--ionicon-stroke-width: 32px;
|
||||
line-height: 1em;
|
||||
margin-right: 0;
|
||||
color: #fff !important;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1em;
|
||||
display: inline-flex;
|
||||
}
|
||||
p{
|
||||
background: #FFF;
|
||||
position: absolute;
|
||||
left: 58px;
|
||||
top: 7px;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeSub;
|
||||
padding: 4px 12px;
|
||||
line-height: 1.5em;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bottom-right {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 100;
|
||||
margin-bottom: $safeBottom;
|
||||
}
|
||||
&.bottom-left {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
z-index: 100;
|
||||
margin-bottom: $safeBottom;
|
||||
}
|
||||
&.bottom-center{
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0%);
|
||||
margin-bottom: $safeBottom;
|
||||
}
|
||||
&.top-center{
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0%);
|
||||
margin-top: $safeTop;
|
||||
}
|
||||
&.top-left {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 16px;
|
||||
z-index: 100;
|
||||
margin-top: $safeTop;
|
||||
}
|
||||
&.top-right {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
right: 16px;
|
||||
z-index: 100;
|
||||
margin-top: $safeTop;
|
||||
}
|
||||
|
||||
&.top-right,
|
||||
&.bottom-right{
|
||||
.dropdown-menu{
|
||||
.dropdown-item{
|
||||
p{
|
||||
left: auto;
|
||||
right: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
public/assets/sass/framework/_form-validation.scss
Normal file
129
public/assets/sass/framework/_form-validation.scss
Normal file
@@ -0,0 +1,129 @@
|
||||
.needs-validation.was-validated {
|
||||
.form-group.basic,
|
||||
.form-group.boxed {
|
||||
.invalid-feedback,
|
||||
.valid-feedback {
|
||||
height: 16px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.invalid-feedback {
|
||||
color: $colorDanger;
|
||||
}
|
||||
.valid-feedback {
|
||||
color: $colorSuccess;
|
||||
}
|
||||
.clear-input {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control.is-valid,
|
||||
.was-validated .form-control:valid {
|
||||
border-color: $colorSuccess;
|
||||
box-shadow: 0 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
.form-control.is-valid:focus,
|
||||
.was-validated .form-control:valid:focus {
|
||||
border-color: $colorSuccess;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.custom-select.is-valid,
|
||||
.was-validated .custom-select:valid {
|
||||
border-color: $colorSuccess;
|
||||
}
|
||||
.custom-select.is-valid:focus,
|
||||
.was-validated .custom-select:valid:focus {
|
||||
border-color: $colorSuccess;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.form-check-input.is-valid ~ .form-check-label,
|
||||
.was-validated .form-check-input:valid ~ .form-check-label {
|
||||
color: $colorSuccess;
|
||||
}
|
||||
.custom-control-input.is-valid ~ .custom-control-label,
|
||||
.was-validated .custom-control-input:valid ~ .custom-control-label {
|
||||
color: $colorSuccess;
|
||||
}
|
||||
.custom-control-input.is-valid ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:valid ~ .custom-control-label::before {
|
||||
border-color: $colorSuccess;
|
||||
}
|
||||
.custom-control-input.is-valid:checked ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
|
||||
border-color: $colorSuccess;
|
||||
background-color: $colorSuccess;
|
||||
}
|
||||
|
||||
.custom-control-input.is-valid:focus ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: $colorSuccess;
|
||||
}
|
||||
|
||||
.custom-file-input.is-valid ~ .custom-file-label,
|
||||
.was-validated .custom-file-input:valid ~ .custom-file-label {
|
||||
border-color: $colorSuccess;
|
||||
}
|
||||
|
||||
.custom-file-input.is-valid:focus ~ .custom-file-label,
|
||||
.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
|
||||
border-color: $colorSuccess;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.form-control.is-invalid,
|
||||
.was-validated .form-control:invalid {
|
||||
border-color: $colorDanger;
|
||||
background-image: none !important;
|
||||
}
|
||||
.form-control.is-invalid:focus,
|
||||
.was-validated .form-control:invalid:focus {
|
||||
border-color: $colorDanger;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.custom-select.is-invalid,
|
||||
.was-validated .custom-select:invalid {
|
||||
border-color: $colorDanger;
|
||||
}
|
||||
.custom-select.is-invalid:focus,
|
||||
.was-validated .custom-select:invalid:focus {
|
||||
border-color: $colorDanger;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.form-check-input.is-invalid ~ .form-check-label,
|
||||
.was-validated .form-check-input:invalid ~ .form-check-label {
|
||||
color: $colorDanger;
|
||||
}
|
||||
.custom-control-input.is-invalid ~ .custom-control-label,
|
||||
.was-validated .custom-control-input:invalid ~ .custom-control-label {
|
||||
color: $colorDanger;
|
||||
}
|
||||
.custom-control-input.is-invalid ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
|
||||
border-color: $colorDanger;
|
||||
}
|
||||
.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before {
|
||||
border-color: $colorDanger;
|
||||
background-color: $colorDanger;
|
||||
}
|
||||
.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
|
||||
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: $colorDanger;
|
||||
}
|
||||
.custom-file-input.is-invalid ~ .custom-file-label,
|
||||
.was-validated .custom-file-input:invalid ~ .custom-file-label {
|
||||
border-color: $colorDanger;
|
||||
}
|
||||
.custom-file-input.is-invalid:focus ~ .custom-file-label,
|
||||
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
|
||||
border-color: $colorDanger;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
89
public/assets/sass/framework/_form-wizard.scss
Normal file
89
public/assets/sass/framework/_form-wizard.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
.form-wizard-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 4px 0 0 0;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: $colorLine;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
.button-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
strong {
|
||||
background: $colorLine;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 100%;
|
||||
color: $colorLight;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 10px;
|
||||
line-height: 1em;
|
||||
color: $colorLight;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
&.active {
|
||||
strong {
|
||||
background: $colorPrimary;
|
||||
color: #fff;
|
||||
}
|
||||
p {
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extraHeader {
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-success,
|
||||
&.bg-danger,
|
||||
&.bg-warning,
|
||||
&.bg-dark{
|
||||
.form-wizard-section {
|
||||
&:before {
|
||||
background: transparent;
|
||||
}
|
||||
.button-item {
|
||||
strong {
|
||||
background: rgba(255,255,255,.4);
|
||||
color: #FFF;
|
||||
}
|
||||
p {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
&.active {
|
||||
strong {
|
||||
background: rgba(0,0,0, .5);
|
||||
color: #fff;
|
||||
}
|
||||
p {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
public/assets/sass/framework/_go-to-top.scss
Normal file
24
public/assets/sass/framework/_go-to-top.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
.button.goTop{
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
background: $colorSecondary;
|
||||
color: #FFF;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
right: 16px;
|
||||
bottom: 70px;
|
||||
font-size: 18px;
|
||||
margin-bottom: $safeBottom;
|
||||
box-shadow: $boxShadow;
|
||||
&:hover,
|
||||
&:active{
|
||||
background: darken($colorSecondary, 5%);
|
||||
}
|
||||
&.show{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
315
public/assets/sass/framework/_grid.scss
Normal file
315
public/assets/sass/framework/_grid.scss
Normal file
@@ -0,0 +1,315 @@
|
||||
// Example box
|
||||
.exampleBox {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid $colorLine;
|
||||
background: rgba($colorLine, 0.3);
|
||||
font-size: 10px;
|
||||
}
|
||||
.demoPage {
|
||||
.appHeader {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
&:before {
|
||||
height: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.appBottomMenu {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
// Col
|
||||
.row {
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-xl-1,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12 {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
// Spacing
|
||||
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.m-05 {
|
||||
margin: 5px !important;
|
||||
}
|
||||
.m-1 {
|
||||
margin: 8px !important;
|
||||
}
|
||||
.m-2 {
|
||||
margin: 16px !important;
|
||||
}
|
||||
.m-3 {
|
||||
margin: 24px !important;
|
||||
}
|
||||
.m-4 {
|
||||
margin: 32px !important;
|
||||
}
|
||||
.m-5 {
|
||||
margin: 40px !important;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.mt-05 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
.mt-3 {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 32px !important;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.mb-05 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
.mb-5 {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.ms-0 {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ms-05 {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.ms-1 {
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
.ms-2 {
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
.ms-3 {
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
.ms-4 {
|
||||
margin-left: 32px !important;
|
||||
}
|
||||
.ms-5 {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
|
||||
.me-0 {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
.me-05 {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.me-1 {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
.me-2 {
|
||||
margin-right: 16px !important;
|
||||
}
|
||||
.me-3 {
|
||||
margin-right: 24px !important;
|
||||
}
|
||||
.me-4 {
|
||||
margin-right: 32px !important;
|
||||
}
|
||||
.me-5 {
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.p-05 {
|
||||
padding: 5px !important;
|
||||
}
|
||||
.p-1 {
|
||||
padding: 8px !important;
|
||||
}
|
||||
.p-2 {
|
||||
padding: 16px !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: 24px !important;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 32px !important;
|
||||
}
|
||||
.p-5 {
|
||||
padding: 40px !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
.pt-05 {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
.pt-2 {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: 24px !important;
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: 32px !important;
|
||||
}
|
||||
.pt-5 {
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
.pb-05 {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: 24px !important;
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: 32px !important;
|
||||
}
|
||||
.pb-5 {
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.ps-0 {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
.ps-05 {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
.ps-1 {
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
.ps-2 {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
.ps-3 {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
.ps-4 {
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
.ps-5 {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.pe-0 {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.pe-05 {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
.pe-1 {
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
.pe-2 {
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
.pe-3 {
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
.pe-4 {
|
||||
padding-right: 32px !important;
|
||||
}
|
||||
.pe-5 {
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
52
public/assets/sass/framework/_icon.scss
Normal file
52
public/assets/sass/framework/_icon.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
ion-icon {
|
||||
--ionicon-stroke-width: 32px;
|
||||
}
|
||||
i.icon,
|
||||
i.bi{
|
||||
line-height: 1em !important;
|
||||
}
|
||||
i.bi{
|
||||
transform: scale(0.91);
|
||||
}
|
||||
.demoIcons{
|
||||
font-size: 32px;
|
||||
color: $colorHeading;
|
||||
}
|
||||
|
||||
.iconedbox{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $borderRadius;
|
||||
i.bi{
|
||||
transform: scale(0.8);
|
||||
}
|
||||
&.iconedbox-sm{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 18px;
|
||||
line-height: 1em;
|
||||
}
|
||||
&.iconedbox-lg{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 42px;
|
||||
line-height: 1em;
|
||||
}
|
||||
&.iconedbox-xl{
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
font-size: 64px;
|
||||
line-height: 1em;
|
||||
}
|
||||
&.iconedbox-xxl{
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
font-size: 90px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
74
public/assets/sass/framework/_image.scss
Normal file
74
public/assets/sass/framework/_image.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.imaged{
|
||||
height: auto;
|
||||
border-radius: $borderRadius;
|
||||
&.w16{
|
||||
width: 16px !important;
|
||||
}
|
||||
&.w24{
|
||||
width: 24px !important;
|
||||
}
|
||||
&.w32{
|
||||
width: 32px !important;
|
||||
}
|
||||
&.w36{
|
||||
width: 36px !important;
|
||||
}
|
||||
&.w48{
|
||||
width: 48px !important;
|
||||
}
|
||||
&.w64{
|
||||
width: 64px !important;
|
||||
}
|
||||
&.w76{
|
||||
width: 76px !important;
|
||||
}
|
||||
&.w86{
|
||||
width: 86px !important;
|
||||
}
|
||||
&.w100{
|
||||
width: 100px !important;
|
||||
}
|
||||
&.w120{
|
||||
width: 120px !important;
|
||||
}
|
||||
&.w140{
|
||||
width: 140px !important;
|
||||
}
|
||||
&.w160{
|
||||
width: 160px !important;
|
||||
}
|
||||
&.w180{
|
||||
width: 180px !important;
|
||||
}
|
||||
&.w200{
|
||||
width: 200px !important;
|
||||
}
|
||||
&.img-fluid{
|
||||
width: 100%;
|
||||
}
|
||||
&.rounded{
|
||||
border-radius: 100% !important;
|
||||
}
|
||||
&.radius{
|
||||
border-radius: $borderRadius !important;
|
||||
}
|
||||
&.square{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
&.filter-grayscale{
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
&.filter-sepia{
|
||||
filter: sepia(80%);
|
||||
}
|
||||
&.filter-blur{
|
||||
filter: blur(1px);
|
||||
}
|
||||
&.shadowed{
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
&.mirrored{
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
}
|
||||
271
public/assets/sass/framework/_inputs.scss
Normal file
271
public/assets/sass/framework/_inputs.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
textarea,
|
||||
.form-control {
|
||||
background-clip: padding-box;
|
||||
background-image: linear-gradient(transparent, transparent);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.form-group {
|
||||
width: 100%;
|
||||
.form-label {
|
||||
font-size: $fontSizeCaption;
|
||||
font-weight: $medium;
|
||||
color: $colorHeading;
|
||||
display: block;
|
||||
line-height: 1.2em;
|
||||
text-align: left;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
.input-info {
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
}
|
||||
.clear-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $colorText;
|
||||
height: 38px;
|
||||
font-size: 22px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -10px;
|
||||
bottom: 0;
|
||||
width: 32px;
|
||||
opacity: 0.5;
|
||||
display: none;
|
||||
i.bi {
|
||||
font-size: 20px;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
&.not-empty {
|
||||
.clear-input {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.form-label {
|
||||
color: $colorPrimary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group.basic {
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
.form-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control,
|
||||
.custom-select {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
padding: 0 30px 0 0;
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSize;
|
||||
&:focus {
|
||||
border-bottom-color: $colorPrimary;
|
||||
box-shadow: inset 0 -1px 0 0 $colorPrimary;
|
||||
}
|
||||
}
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
padding: 7px 40px 7px 0;
|
||||
}
|
||||
}
|
||||
.form-group.basic.animated {
|
||||
.form-label {
|
||||
margin-top: 20px;
|
||||
opacity: 0;
|
||||
top: -3px;
|
||||
transition: 0.2s all;
|
||||
position: absolute;
|
||||
}
|
||||
.input-wrapper {
|
||||
padding-top: 5px;
|
||||
&.not-empty {
|
||||
.form-label {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.boxed {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
.form-control {
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
height: 42px;
|
||||
border-radius: $borderRadius;
|
||||
padding: 0 40px 0 16px;
|
||||
border-color: $colorLine;
|
||||
&:focus {
|
||||
border-color: $colorPrimary;
|
||||
}
|
||||
}
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
padding: 7px 40px 7px 16px;
|
||||
}
|
||||
.clear-input {
|
||||
right: 0;
|
||||
height: 42px;
|
||||
width: 40px;
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.input-group-text {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
border-radius: 0;
|
||||
font-size: 20px;
|
||||
font-weight: $regular;
|
||||
color: $colorHeading;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-upload {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
input[type="file"] {
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
background-color: rgba($colorLine, 0.2);
|
||||
background-size: 45px 58px;
|
||||
border: 1px solid $colorLine;
|
||||
border-radius: $borderRadius;
|
||||
margin: 0;
|
||||
span {
|
||||
display: block;
|
||||
font-size: $fontSize;
|
||||
color: $colorLight;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: $medium;
|
||||
transform: translate(0%, -50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
--ionicon-stroke-width: 32px;
|
||||
font-size: 48px;
|
||||
color: $colorLight;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
font-weight: $medium;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.file-uploaded {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
&:before {
|
||||
content: "";
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: $colorSuccess;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='23px' height='20px' viewBox='0 0 23 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline id='Path' stroke='%23FFFFFF' stroke-width='2.4' points='21.2 2 7.76 18 2 12'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(50% + -22px);
|
||||
box-shadow: $boxShadow;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
label {
|
||||
border-color: transparent;
|
||||
}
|
||||
span {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: auto;
|
||||
transform: translate(0, 0);
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorText;
|
||||
background-color: $colorLine;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verify-input {
|
||||
height: 72px !important;
|
||||
font-size: 32px;
|
||||
font-weight: $bold;
|
||||
color: $colorHeading;
|
||||
letter-spacing: 5px;
|
||||
padding: 0 0 0 5px !important;
|
||||
max-width: 190px;
|
||||
margin: auto;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.form-group.boxed,
|
||||
.form-group.basic {
|
||||
.form-control.form-select {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='13px' height='8px' viewBox='0 0 13 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline id='Path' stroke='%23A9ABAD' stroke-width='2' points='1.59326172 1.79663086 6.59326172 6.79663086 11.5932617 1.79663086'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: right center !important;
|
||||
}
|
||||
}
|
||||
.form-group.boxed {
|
||||
.form-control.form-select {
|
||||
background-position: right 12px center !important;
|
||||
}
|
||||
}
|
||||
117
public/assets/sass/framework/_invoice.scss
Normal file
117
public/assets/sass/framework/_invoice.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
.invoiceBackgroundLogo{
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(25deg);
|
||||
img{
|
||||
opacity: .1;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.invoice{
|
||||
background: #FFF;
|
||||
box-shadow: $boxShadow;
|
||||
padding: 24px 16px;
|
||||
margin: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.invoice-page-header{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.invoice-logo{
|
||||
img{
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.invoice-id{
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorText;
|
||||
}
|
||||
}
|
||||
.invoice-person{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
.invoice-to,
|
||||
.invoice-from{
|
||||
font-size: $fontSizeCaption;
|
||||
h4{
|
||||
margin-bottom: 8px;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeSub;
|
||||
}
|
||||
p{
|
||||
margin: 0 0 3px 0;
|
||||
line-height: 1.4em;
|
||||
color: $colorLight;
|
||||
}
|
||||
}
|
||||
.invoice-to{
|
||||
padding-right: 12px;
|
||||
}
|
||||
.invoice-from{
|
||||
text-align: right;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
.invoice-detail{
|
||||
.table{
|
||||
border-bottom: 1px solid $colorLine;
|
||||
thead,
|
||||
tbody{
|
||||
font-size: $fontSizeCaption;
|
||||
font-weight: $bold;
|
||||
td{
|
||||
text-align: center;
|
||||
&:first-child{
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
thead{
|
||||
color: $colorLight;
|
||||
}
|
||||
tbody{
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-total{
|
||||
font-size: $fontSizeCaption;
|
||||
font-weight: $bold;
|
||||
.listview{
|
||||
padding: 0;
|
||||
li{
|
||||
min-height: auto;
|
||||
padding: 12px 0;
|
||||
.hightext{
|
||||
font-size: $fontSizeSub;
|
||||
}
|
||||
.totaltext{
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-signature{
|
||||
.signature-block{
|
||||
display: inline-flex;
|
||||
font-size: $fontSizeCaption;
|
||||
padding: 5px 32px 42px 32px;
|
||||
border: 2px dashed $colorLine;
|
||||
}
|
||||
}
|
||||
.invoice-bottom{
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 24px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
350
public/assets/sass/framework/_listview.scss
Normal file
350
public/assets/sass/framework/_listview.scss
Normal file
@@ -0,0 +1,350 @@
|
||||
@function svg-bg-color($color) {
|
||||
@return "%23" + str-slice("#{$color}", 2, -1);
|
||||
}
|
||||
.listview-title {
|
||||
color: $colorText;
|
||||
padding: 7px 16px;
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $medium;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.link {
|
||||
color: $colorLight;
|
||||
font-weight: $medium;
|
||||
font-size: $fontSizeCaption;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: $fontSize;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
&.sticky-title {
|
||||
background: $colorBackground;
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -o-sticky;
|
||||
position: -ms-sticky;
|
||||
position: sticky;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
z-index: 500;
|
||||
top: 56px;
|
||||
font-weight: $medium;
|
||||
color: $colorHeading;
|
||||
box-shadow: 0px 1px 0 $colorLine, 0px -1px 0 $colorLine;
|
||||
strong {
|
||||
font-size: $fontSize;
|
||||
}
|
||||
}
|
||||
.text-small {
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
.listview {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: $colorHeading;
|
||||
background: #fff;
|
||||
border-top: 1px solid $colorLine;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
line-height: 1.3em;
|
||||
.text-muted {
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorLight !important;
|
||||
}
|
||||
> li {
|
||||
padding: 8px 16px;
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
.item {
|
||||
position: relative;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: $colorLine;
|
||||
}
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
footer,
|
||||
header {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
footer {
|
||||
color: $colorText;
|
||||
margin-top: 3px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
> li.divider-title {
|
||||
background: rgba($colorLine, 0.5);
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid $colorLine;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
padding: 12px 16px;
|
||||
font-size: $fontSizeSub;
|
||||
min-height: auto;
|
||||
color: $colorText;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.flush {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.simple-listview {
|
||||
> li {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.link-listview {
|
||||
> li {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
a {
|
||||
padding: 8px 36px 8px 16px;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: $colorHeading !important;
|
||||
&:after {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='#{svg-bg-color($colorLight)}' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
opacity: 0.5;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
&:active {
|
||||
background: rgba($colorLine, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-listview {
|
||||
> li {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
&:after {
|
||||
left: 68px;
|
||||
}
|
||||
.item {
|
||||
padding: 10px 16px;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.image {
|
||||
min-width: 36px;
|
||||
max-width: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 400px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.icon-box {
|
||||
min-width: 36px;
|
||||
max-width: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1em;
|
||||
font-size: 20px;
|
||||
border-radius: 400px;
|
||||
margin-right: 16px;
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-success,
|
||||
&.bg-danger,
|
||||
&.bg-warning,
|
||||
&.bg-info,
|
||||
&.bg-dark,
|
||||
&.bg-light {
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
.in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
a.item {
|
||||
color: $colorHeading !important;
|
||||
padding-right: 36px;
|
||||
&:active {
|
||||
background: rgba($colorLine, 0.3);
|
||||
}
|
||||
&:after {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='#{svg-bg-color($colorLight)}' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
opacity: 0.5;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.text {
|
||||
> li {
|
||||
&:after {
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.media {
|
||||
> li {
|
||||
border-bottom: 1px solid $colorLine;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.imageWrapper {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listview.no-line {
|
||||
> li,
|
||||
.item {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listview.no-space {
|
||||
> li .item {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-level Listview
|
||||
.multi-level {
|
||||
> a {
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.15s ease-in-out !important;
|
||||
> li {
|
||||
border: 0 !important;
|
||||
&:after {
|
||||
height: 0;
|
||||
}
|
||||
a,
|
||||
.item {
|
||||
padding-left: 68px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> a {
|
||||
&:after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-listview {
|
||||
.link-listview,
|
||||
.image-listview {
|
||||
a,
|
||||
.item {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
.image-listview.media {
|
||||
> li {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.simple-listview {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.image-listview {
|
||||
.simple-listview {
|
||||
padding-left: 52px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image-listview.text {
|
||||
.simple-listview {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.link-listview,
|
||||
.image-listview {
|
||||
a,
|
||||
.item {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-listview.media {
|
||||
.simple-listview {
|
||||
padding-left: 80px !important;
|
||||
}
|
||||
.link-listview,
|
||||
.image-listview {
|
||||
a,
|
||||
.item {
|
||||
padding-left: 96px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
public/assets/sass/framework/_loader.scss
Normal file
26
public/assets/sass/framework/_loader.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
#loader{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99999;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.loading-icon{
|
||||
width: 42px;
|
||||
height: auto;
|
||||
animation: loadingAnimation 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
31
public/assets/sass/framework/_login.scss
Normal file
31
public/assets/sass/framework/_login.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.login-form{
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
.form-image{
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.form-button-group{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
background: #FFF;
|
||||
min-height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: $safeBottom;
|
||||
}
|
||||
.form-links{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
94
public/assets/sass/framework/_messages.scss
Normal file
94
public/assets/sass/framework/_messages.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
.message-divider{
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
color: $colorLight;
|
||||
}
|
||||
.message-item{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
padding: 2px 16px;
|
||||
margin-right: 60px;
|
||||
.bubble{
|
||||
padding: 10px 16px;
|
||||
background: #FFF;
|
||||
border-radius: 16px 16px 16px 0;
|
||||
box-shadow: $boxShadow;
|
||||
color: $colorHeading;
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
line-height: 1.4em;
|
||||
.imaged{
|
||||
margin: 0px -6px;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 12px;
|
||||
font-weight: $medium;
|
||||
color: $colorText;
|
||||
line-height: 1.2em;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.footer{
|
||||
font-size: 12px;
|
||||
padding: 0 10px;
|
||||
text-align: right;
|
||||
line-height: 1em;
|
||||
margin-top: 5px;
|
||||
color: $colorHeading;
|
||||
opacity: .4;
|
||||
height: 14px;
|
||||
}
|
||||
.avatar{
|
||||
margin-right: 10px;
|
||||
width: 32px;
|
||||
height: auto;
|
||||
border-radius: 100%;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
&.user{
|
||||
justify-content: flex-end;
|
||||
margin-right: 0;
|
||||
margin-left: 60px;
|
||||
.bubble{
|
||||
background: $colorPrimary;
|
||||
color: #FFF;
|
||||
border-radius: 16px 16px 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatFooter{
|
||||
min-height: 56px;
|
||||
background: #FFF;
|
||||
border-top: 1px solid $colorLine;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
padding-bottom: $safeBottom;
|
||||
.form-group{
|
||||
width: calc(100% - 100px);
|
||||
.form-control{
|
||||
font-size: $fontSizeSub;
|
||||
border-radius: 300px;
|
||||
height: 40px;
|
||||
}
|
||||
.clear-input{
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
form{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
60
public/assets/sass/framework/_modal.scss
Normal file
60
public/assets/sass/framework/_modal.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
.modalbox {
|
||||
padding-top: $safeTop;
|
||||
overflow: hidden;
|
||||
.modal-dialog {
|
||||
transform: translate(0, 100%) !important;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
transition: 0.5s all !important;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-top: $safeTop;
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding-top: 56px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
min-height: 56px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background: #FFF;
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 20px 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show .modal-dialog {
|
||||
transform: translate(0, 0) !important;
|
||||
}
|
||||
}
|
||||
227
public/assets/sass/framework/_notification.scss
Normal file
227
public/assets/sass/framework/_notification.scss
Normal file
@@ -0,0 +1,227 @@
|
||||
.notification-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
transition: 0.3s all;
|
||||
margin-top: $safeTop;
|
||||
&.show {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-dialog.android-style {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 16px 16px;
|
||||
.notification-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.imaged {
|
||||
margin-right: 8px;
|
||||
}
|
||||
strong {
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $regular;
|
||||
color: $colorHeading;
|
||||
}
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 6px;
|
||||
font-size: $fontSizeCaption;
|
||||
&:before {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-button {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: $colorLight;
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $colorText;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification-content {
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.4em;
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
.subtitle {
|
||||
font-size: $fontSize;
|
||||
margin: 0 0 5px 0;
|
||||
line-height: 1.4em;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.in {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
.icon-box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
font-size: 46px;
|
||||
color: $colorLight;
|
||||
}
|
||||
.notification-footer {
|
||||
border-top: 1px solid $colorLine;
|
||||
margin: 16px -16px -16px -16px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.notification-button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $colorPrimary !important;
|
||||
font-size: $fontSizeSub;
|
||||
border-right: 1px solid $colorLine;
|
||||
padding: 16px 6px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
color: darken($colorPrimary, 5%);
|
||||
background: rgba($colorLine, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-dialog.ios-style {
|
||||
margin: 10px;
|
||||
background: #3b4859;
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
.notification-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px 10px 0 0;
|
||||
.in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.imaged {
|
||||
margin-right: 8px;
|
||||
}
|
||||
strong {
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $regular;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: $fontSizeCaption;
|
||||
}
|
||||
}
|
||||
.close-button {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
font-size: 46px;
|
||||
color: $colorLight;
|
||||
}
|
||||
.notification-content {
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.4em;
|
||||
padding: 14px 16px 20px 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
.subtitle {
|
||||
font-size: $fontSize;
|
||||
margin: 0 0 5px 0;
|
||||
line-height: 1.4em;
|
||||
color: #fff;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.in {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
.notification-footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.notification-button {
|
||||
color: #fff !important;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $fontSizeSub;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 15px 6px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
color: darken($colorPrimary, 5%);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
public/assets/sass/framework/_offcanvas.scss
Normal file
71
public/assets/sass/framework/_offcanvas.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
$offcanvasWidth: 300px;
|
||||
|
||||
.offcanvas {
|
||||
width: $offcanvasWidth;
|
||||
border: 0;
|
||||
.offcanvas-header {
|
||||
box-shadow: $boxShadow;
|
||||
min-height: 56px;
|
||||
padding: 10px 16px;
|
||||
.offcanvas-title {
|
||||
font-size: $fontSize;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.offcanvas-close {
|
||||
color: $colorPrimary;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas-body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
.offcanvas-start,
|
||||
.offcanvas-end,
|
||||
.offcanvas-top {
|
||||
padding-top: $safeTop;
|
||||
}
|
||||
.offcanvas-top {
|
||||
transform: translateY(-120%);
|
||||
}
|
||||
.offcanvas-bottom {
|
||||
padding-bottom: $safeBottom;
|
||||
transform: translateY(120%);
|
||||
}
|
||||
.offcanvas-top,
|
||||
.offcanvas-bottom {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.cookies-modal{
|
||||
background: #FFF;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $boxShadow;
|
||||
border: 1px solid $colorLine;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
bottom: 72px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
padding: 16px;
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.56em;
|
||||
transform: translate(0%, 150%);
|
||||
transition: .4s ease-in-out;
|
||||
.title{
|
||||
font-size: $fontSize;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
&.show{
|
||||
transform: translate(0%, 0%);
|
||||
}
|
||||
}
|
||||
5
public/assets/sass/framework/_online-detection.scss
Normal file
5
public/assets/sass/framework/_online-detection.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
#offline-toast,
|
||||
#online-toast{
|
||||
color: #FFF;
|
||||
font-weight: $medium;
|
||||
}
|
||||
9
public/assets/sass/framework/_os-detection.scss
Normal file
9
public/assets/sass/framework/_os-detection.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.windowsphone-detection,
|
||||
.ios-detection,
|
||||
.android-detection,
|
||||
.non-mobile-detection {
|
||||
display: none;
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
47
public/assets/sass/framework/_pagination.scss
Normal file
47
public/assets/sass/framework/_pagination.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.pagination{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.page-item{
|
||||
.page-link{
|
||||
background: $colorPrimary;
|
||||
border: 0;
|
||||
color: #FFF;
|
||||
box-shadow: 0 !important;
|
||||
outline: 0 !important;
|
||||
margin: 0 4px;
|
||||
border-radius: $borderRadius !important;
|
||||
font-size: $fontSizeSub;
|
||||
&:focus{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-secondary{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background: #FFF;
|
||||
color: $colorText;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rounded{
|
||||
.page-item{
|
||||
.page-link{
|
||||
border-radius: 400px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-square{
|
||||
.page-item{
|
||||
.page-link{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
public/assets/sass/framework/_preloader.scss
Normal file
0
public/assets/sass/framework/_preloader.scss
Normal file
50
public/assets/sass/framework/_profile.scss
Normal file
50
public/assets/sass/framework/_profile.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.profile-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
margin-right: 16px;
|
||||
}
|
||||
.in{
|
||||
.name{
|
||||
margin: 0 0 5px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.subtext{
|
||||
color: $colorLight;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.5em;
|
||||
.bio{
|
||||
color: $colorText;
|
||||
}
|
||||
.link{
|
||||
margin-top: 4px;
|
||||
color: $colorPrimary;
|
||||
}
|
||||
}
|
||||
.profile-stats{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
font-size: $fontSizeCaption;
|
||||
line-height: 1.6em;
|
||||
padding: 5px;
|
||||
color: $colorText;
|
||||
text-align: center;
|
||||
&:last-child{
|
||||
border-right-color: transparent;
|
||||
}
|
||||
strong{
|
||||
display: block;
|
||||
line-height: 1.4em;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
public/assets/sass/framework/_progressbar.scss
Normal file
68
public/assets/sass/framework/_progressbar.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.progress {
|
||||
height: 14px;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
.progress-bar {
|
||||
background: $colorPrimary;
|
||||
height: 14px;
|
||||
line-height: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: $medium;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.circle-progress2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.inner {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: $fontSizeCaption !important;
|
||||
line-height: 1.2em;
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: $bold;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
& > svg {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.circle-progress-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
.inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $fontSizeCaption !important;
|
||||
line-height: 1.2em;
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: $bold;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
116
public/assets/sass/framework/_search.scss
Normal file
116
public/assets/sass/framework/_search.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
.search-form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.form-control {
|
||||
height: 36px;
|
||||
border-radius: $borderRadius;
|
||||
border: 1px solid $colorLine !important;
|
||||
padding: 0 16px 0 36px;
|
||||
font-size: $fontSize;
|
||||
box-shadow: none !important;
|
||||
color: $colorHeading;
|
||||
&:focus {
|
||||
border-color: darken($colorLine, 10%) !important;
|
||||
& ~ .input-icon {
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 26px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.close {
|
||||
opacity: 1;
|
||||
color: $colorLight;
|
||||
width: 46px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
.input-icon {
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $colorLight;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
display: block;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #FFF;
|
||||
position: fixed;
|
||||
box-shadow: $boxShadow;
|
||||
left: 0;
|
||||
top: -100px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1001;
|
||||
transition: 0.3s all ease-in-out;
|
||||
&.show {
|
||||
top: $safeTop;
|
||||
transition: 0.22s all ease-in-out;
|
||||
}
|
||||
.searchbox {
|
||||
.form-control {
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
height: 56px;
|
||||
padding: 0 56px 0 56px;
|
||||
background: transparent;
|
||||
font-size: $fontSizeHeading;
|
||||
color: $colorHeading;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
border-color: darken($colorLine, 15%);
|
||||
& ~ .input-icon {
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
width: 46px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $colorLight;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result{
|
||||
li > .item,
|
||||
li > a{
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
142
public/assets/sass/framework/_stepper.scss
Normal file
142
public/assets/sass/framework/_stepper.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
.stepper {
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
border-radius: $borderRadius;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
.stepper-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $colorPrimary;
|
||||
position: relative;
|
||||
border: 2px solid $colorPrimary;
|
||||
}
|
||||
.form-control {
|
||||
padding: 0 3px;
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
border: 2px solid $colorPrimary;
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $medium;
|
||||
color: $colorPrimary;
|
||||
}
|
||||
}
|
||||
.stepper-sm {
|
||||
height: 30px;
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
.stepper-button {
|
||||
height: 30px;
|
||||
width: 24px;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
.form-control {
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
font-size: $fontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-lg {
|
||||
height: 48px;
|
||||
.stepper-button {
|
||||
height: 48px;
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
}
|
||||
.form-control {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin stepperColor($color) {
|
||||
.stepper-button {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-primary {
|
||||
@include stepperColor($colorPrimary);
|
||||
}
|
||||
|
||||
.stepper-secondary {
|
||||
@include stepperColor($colorSecondary);
|
||||
}
|
||||
.stepper-success {
|
||||
@include stepperColor($colorSuccess);
|
||||
}
|
||||
.stepper-danger {
|
||||
@include stepperColor($colorDanger);
|
||||
}
|
||||
.stepper-warning {
|
||||
@include stepperColor($colorWarning);
|
||||
}
|
||||
.stepper-info {
|
||||
@include stepperColor($colorInfo);
|
||||
}
|
||||
.stepper-dark {
|
||||
@include stepperColor(#333);
|
||||
}
|
||||
|
||||
|
||||
@mixin stepperOutlineColor($color) {
|
||||
.stepper-button {
|
||||
background: transparent;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
&.stepper-down{
|
||||
border-radius: $borderRadius 0 0 $borderRadius;
|
||||
}
|
||||
&.stepper-up{
|
||||
border-radius: 0 $borderRadius $borderRadius 0;
|
||||
}
|
||||
&:first-child{
|
||||
border-right: 0;
|
||||
}
|
||||
&:last-child{
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-outline-primary{
|
||||
@include stepperOutlineColor($colorPrimary);
|
||||
}
|
||||
.stepper-outline-secondary{
|
||||
@include stepperOutlineColor($colorSecondary);
|
||||
}
|
||||
.stepper-outline-success{
|
||||
@include stepperOutlineColor($colorSuccess);
|
||||
}
|
||||
.stepper-outline-danger{
|
||||
@include stepperOutlineColor($colorDanger);
|
||||
}
|
||||
.stepper-outline-warning{
|
||||
@include stepperOutlineColor($colorWarning);
|
||||
}
|
||||
.stepper-outline-info{
|
||||
@include stepperOutlineColor($colorInfo);
|
||||
}
|
||||
.stepper-outline-dark{
|
||||
@include stepperOutlineColor(#333);
|
||||
}
|
||||
182
public/assets/sass/framework/_stories.scss
Normal file
182
public/assets/sass/framework/_stories.scss
Normal file
@@ -0,0 +1,182 @@
|
||||
.story-block {
|
||||
.splide__slide {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 26px !important;
|
||||
margin-right: -10px !important;
|
||||
img {
|
||||
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px $colorPrimary;
|
||||
}
|
||||
}
|
||||
.seen {
|
||||
img {
|
||||
box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px $colorLight;
|
||||
}
|
||||
}
|
||||
.passive {
|
||||
img {
|
||||
box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px $colorLight;
|
||||
filter: grayscale(100%) opacity(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal.stories {
|
||||
padding-top: $safeTop;
|
||||
overflow: hidden;
|
||||
.modal-dialog {
|
||||
transform: translate(0, 100%) scale(0.1) !important;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
transition: 0.2s ease-in-out !important;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-top: $safeTop;
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding-top: 56px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
min-height: 56px;
|
||||
padding: 16px 16px 42px 16px;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background: transparent;
|
||||
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
color: $colorHeading;
|
||||
font-size: $fontSizeHeading;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
padding: 100px 24px;
|
||||
p {
|
||||
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.59);
|
||||
opacity: 0.9;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: #fff;
|
||||
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.59);
|
||||
}
|
||||
.btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fixed-btn {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
margin-bottom: $safeBottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show .modal-dialog {
|
||||
transform: translate(0, 0) scale(1) !important;
|
||||
}
|
||||
&.with-story-bar {
|
||||
.modal-content {
|
||||
.modal-header {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.story-bar {
|
||||
height: 4px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
z-index: 1000;
|
||||
top: 16px;
|
||||
overflow: hidden;
|
||||
span {
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 0%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
@keyframes storybar-animation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.story-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
img,
|
||||
video {
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.profile-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
h4 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
line-height: 1.2em;
|
||||
display: block;
|
||||
}
|
||||
.text-muted {
|
||||
display: block;
|
||||
font-size: $fontSizeCaption;
|
||||
color: #fff !important;
|
||||
opacity: 0.7;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
.close-stories {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
&:hover{
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
public/assets/sass/framework/_table.scss
Normal file
63
public/assets/sass/framework/_table.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.table {
|
||||
color: $colorText;
|
||||
margin: 0;
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.4em;
|
||||
tr {
|
||||
border-color: $colorLine;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
color: $colorHeading;
|
||||
font-weight: $medium;
|
||||
}
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border-top: 1px solid $colorLine;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background: rgba($colorLine, 0.1);
|
||||
color: $colorText;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border-radius: 0px;
|
||||
td,
|
||||
th {
|
||||
border-color: $colorLine;
|
||||
}
|
||||
}
|
||||
|
||||
.table.bg-primary,
|
||||
.table.bg-secondary,
|
||||
.table.bg-success,
|
||||
.table.bg-danger,
|
||||
.table.bg-warning,
|
||||
.table.bg-info {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border-top-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: $medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
99
public/assets/sass/framework/_tabs.scss
Normal file
99
public/assets/sass/framework/_tabs.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
.nav-tabs {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-tabs.capsuled {
|
||||
border: 0;
|
||||
background: rgba($colorLine, 0.4);
|
||||
border-radius: $borderRadius;
|
||||
display: flex;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.nav-link {
|
||||
color: $colorText;
|
||||
font-weight: $medium;
|
||||
font-size: $fontSizeSub;
|
||||
border: 0 !important;
|
||||
line-height: 1.2em;
|
||||
width: 100%;
|
||||
border-radius: $borderRadius;
|
||||
padding: 6px 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px !important;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
line-height: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
&.active {
|
||||
color: $colorHeading;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs.lined {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.nav-link {
|
||||
color: $colorText;
|
||||
font-weight: $medium;
|
||||
font-size: $fontSizeSub;
|
||||
border: 0 !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
line-height: 1.2em;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
padding: 6px 10px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
line-height: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
&.active {
|
||||
color: $colorPrimary;
|
||||
background: transparent;
|
||||
border-bottom-color: $colorPrimary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-tabs.iconed {
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
64
public/assets/sass/framework/_timeline.scss
Normal file
64
public/assets/sass/framework/_timeline.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.timeline{
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background: $colorLine;
|
||||
z-index: 1;
|
||||
}
|
||||
.item{
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding-left: 20px;
|
||||
.title{
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.text{
|
||||
font-size: $fontSizeSub;
|
||||
line-height: 1.4em;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
.dot{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
background: $colorLight;
|
||||
left: -5px;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 0 3px #FFF;
|
||||
}
|
||||
|
||||
}
|
||||
.timeline.timed{
|
||||
padding-left: 80px;
|
||||
&:before{
|
||||
left: 80px;
|
||||
}
|
||||
.time{
|
||||
font-size: $fontSizeCaption;
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
line-height: 1.5em;
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
105
public/assets/sass/framework/_toast.scss
Normal file
105
public/assets/sass/framework/_toast.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
.toast-box{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 600;
|
||||
min-height: 52px;
|
||||
margin-top: $safeTop;
|
||||
transition: 0.2s all;
|
||||
background: #2b3543;
|
||||
font-size: $fontSizeSub;
|
||||
color: rgba(255,255,255,.75);
|
||||
padding: 10px 16px;
|
||||
line-height: 1.4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.toast-title{
|
||||
font-size: $fontSize;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn{
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $medium;
|
||||
}
|
||||
&.show {
|
||||
top: 0;
|
||||
}
|
||||
.in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-right: 20px;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
font-size: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
color: #FFF;
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.toast-top {
|
||||
&.show {
|
||||
top: 56px;
|
||||
}
|
||||
}
|
||||
&.toast-bottom {
|
||||
top: auto;
|
||||
bottom: -100%;
|
||||
&.show {
|
||||
bottom: 56px;
|
||||
top: auto;
|
||||
margin-bottom: $safeBottom;
|
||||
}
|
||||
}
|
||||
&.toast-center {
|
||||
width: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
padding: 16px 24px;
|
||||
border-radius: $borderRadius;
|
||||
text-align: center;
|
||||
&.show {
|
||||
display: block;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.in{
|
||||
padding: 0;
|
||||
display: block;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 64px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.extra-header-active{
|
||||
.toast-box{
|
||||
&.toast-top {
|
||||
&.show {
|
||||
top: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
public/assets/sass/framework/_tooltip.scss
Normal file
7
public/assets/sass/framework/_tooltip.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.tooltip{
|
||||
.tooltip-inner{
|
||||
font-size: $fontSizeSub;
|
||||
padding: 6px 10px;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
128
public/assets/sass/framework/_typography.scss
Normal file
128
public/assets/sass/framework/_typography.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $colorHeading;
|
||||
margin: 0 0 10px 0;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3em;
|
||||
small {
|
||||
color: rgba($colorHeading, 0.6);
|
||||
}
|
||||
.badge {
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
font-size: $fontSizeSub;
|
||||
color: $colorText !important;
|
||||
}
|
||||
h1 {
|
||||
font-size: $fontSizeHeadingXLarge;
|
||||
font-weight: $bold;
|
||||
}
|
||||
h2 {
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
font-weight: $bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $bold;
|
||||
}
|
||||
h4 {
|
||||
font-size: $fontSize;
|
||||
font-weight: $medium;
|
||||
}
|
||||
h5 {
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $medium;
|
||||
}
|
||||
h6 {
|
||||
font-size: $fontSizeCaption;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.lead {
|
||||
font-weight: $regular;
|
||||
font-size: $fontSizeHeading;
|
||||
color: $colorText !important;
|
||||
}
|
||||
mark {
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
.text-large {
|
||||
font-size: $fontSizeHeadingXLarge;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: $medium;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
&.inset {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.in {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.link {
|
||||
font-size: $fontSizeSub;
|
||||
font-weight: $medium;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 3px;
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: $medium;
|
||||
color: $colorLight;
|
||||
font-size: $fontSizeSub;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
.section.full {
|
||||
.page-title {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
code{
|
||||
color: $colorPrimary;
|
||||
}
|
||||
figure.codebox{
|
||||
background: $colorLine;
|
||||
border-radius: $borderRadius;
|
||||
padding: 5px 12px;
|
||||
code{
|
||||
color: $colorHeading;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
.placeholder-xs {
|
||||
min-height: 0.5em;
|
||||
}
|
||||
|
||||
.placeholder-sm {
|
||||
min-height: 0.7em;
|
||||
}
|
||||
|
||||
.placeholder-lg {
|
||||
min-height: 1.6em;
|
||||
}
|
||||
178
public/assets/sass/section/_bottomMenu.scss
Normal file
178
public/assets/sass/section/_bottomMenu.scss
Normal file
@@ -0,0 +1,178 @@
|
||||
.appBottomMenu {
|
||||
min-height: 56px;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid $colorLine;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-bottom: $safeBottom;
|
||||
&.no-border{
|
||||
border: 0 !important;
|
||||
box-shadow: 0 !important;
|
||||
}
|
||||
&.rounded{
|
||||
border-radius: 24px 24px 0 0 !important;
|
||||
.item{
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
top: 0;
|
||||
}
|
||||
.col{
|
||||
width: 100%;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
display: inline-flex;
|
||||
margin: 1px auto 3px auto;
|
||||
font-size: 26px;
|
||||
line-height: 1em;
|
||||
color: $colorHeading;
|
||||
transition: none;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.action-button{
|
||||
display: inline-flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 200px;
|
||||
background: $colorPrimary;
|
||||
&.large{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-top: -20px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
color: #FFF !important;
|
||||
margin: 0 !important;
|
||||
line-height: 0 !important;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
color: $colorHeading;
|
||||
font-weight: $regular;
|
||||
transition: none;
|
||||
}
|
||||
&:active{
|
||||
opacity: .8;
|
||||
}
|
||||
&.active {
|
||||
&:before{
|
||||
background: transparent;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon,
|
||||
strong {
|
||||
color: $colorPrimary !important;
|
||||
font-weight: $medium;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon,
|
||||
strong {
|
||||
color: $colorHeading;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.text-light{
|
||||
color: #FFF;
|
||||
.item{
|
||||
color: #FFF;
|
||||
opacity: .7;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon,
|
||||
strong{
|
||||
color:#FFF;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon,
|
||||
strong{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-success,
|
||||
&.bg-warning,
|
||||
&.bg-danger,
|
||||
&.bg-info,
|
||||
&.bg-light,
|
||||
&.bg-dark{
|
||||
border: 0;
|
||||
.item{
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infinite-menu{
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.item{
|
||||
display: inline-flex;
|
||||
flex: unset;
|
||||
margin: 0 5px 0 0;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
77
public/assets/sass/section/_content.scss
Normal file
77
public/assets/sass/section/_content.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
#appCapsule {
|
||||
padding: 56px 0;
|
||||
margin-bottom: $safeBottom;
|
||||
margin-top: $safeTop;
|
||||
&.extra-header-active{
|
||||
padding-top: 112px;
|
||||
}
|
||||
&.full-height{
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
padding: 0 16px;
|
||||
&.full {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.wide-block {
|
||||
background: #fff;
|
||||
border-top: 1px solid $colorLine;
|
||||
border-bottom: 1px solid $colorLine;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
&.transparent{
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.section-title {
|
||||
font-size: $fontSize;
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: $colorHeading;
|
||||
font-weight: $medium;
|
||||
&.large{
|
||||
font-size: $fontSizeHeadingLarge;
|
||||
line-height: 1.2em;
|
||||
font-weight: $bold;
|
||||
}
|
||||
&.medium{
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $bold;
|
||||
}
|
||||
}
|
||||
.content-header,
|
||||
.content-footer {
|
||||
font-size: $fontSizeCaption;
|
||||
color: $colorLight;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.section.full {
|
||||
.section-title {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.content-header,
|
||||
.content-footer {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.wide-block {
|
||||
.content-header,
|
||||
.content-footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section.inset {
|
||||
.wide-block {
|
||||
border: 1px solid $colorLine;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
65
public/assets/sass/section/_footer.scss
Normal file
65
public/assets/sass/section/_footer.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.appFooter {
|
||||
border-top: 1px solid $colorLine;
|
||||
padding: 24px 16px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
background: #fff;
|
||||
.footer-title {
|
||||
font-weight: $medium;
|
||||
color: $colorHeading;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.fixed-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-height: 84px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: $safeBottom;
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
&.transparent {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.footer-logo{
|
||||
height: 16px;
|
||||
}
|
||||
.footer-link{
|
||||
padding: 0;
|
||||
border-top: 1px solid rgba($colorLine, .5);
|
||||
border-bottom: 1px solid rgba($colorLine, .5);
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
a{
|
||||
flex: 1;
|
||||
padding: 12px 2px;
|
||||
width: 100%;
|
||||
color: $colorText;
|
||||
display: block;
|
||||
span{
|
||||
display: block;
|
||||
}
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon{
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
189
public/assets/sass/section/_header.scss
Normal file
189
public/assets/sass/section/_header.scss
Normal file
@@ -0,0 +1,189 @@
|
||||
.appHeader {
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: $safeTop;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #FFF;
|
||||
color: $colorHeading;
|
||||
box-shadow: $boxShadow;
|
||||
&:before{
|
||||
content: '';
|
||||
height: $safeTop;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
background: $colorPrimary;
|
||||
}
|
||||
&.no-border {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
i.bi,
|
||||
i.icon,
|
||||
ion-icon {
|
||||
font-size: 26px;
|
||||
--ionicon-stroke-width: 36px;
|
||||
}
|
||||
.headerButton {
|
||||
min-width: 36px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
color: $colorHeading;
|
||||
position: relative;
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
padding: 0px 14px;
|
||||
font-weight: $regular;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
left: 8px;
|
||||
top: 0;
|
||||
}
|
||||
.right {
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
.pageTitle {
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $medium;
|
||||
padding: 0 10px;
|
||||
.logo {
|
||||
max-height: 18px;
|
||||
}
|
||||
}
|
||||
&.text-light {
|
||||
color: #fff;
|
||||
.headerButton,
|
||||
.pageTitle{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-success,
|
||||
&.bg-warning,
|
||||
&.bg-danger,
|
||||
&.bg-info,
|
||||
&.bg-light,
|
||||
&.bg-dark {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.extraHeader {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 56px;
|
||||
height: 56px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding: 5px 16px;
|
||||
margin-top: $safeTop;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
|
||||
.header-large-title {
|
||||
padding: 0 16px;
|
||||
.title {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: $fontSizeHeadingXLarge;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.subtitle{
|
||||
font-size: $fontSizeHeading;
|
||||
font-weight: $regular;
|
||||
margin: 6px 0 0 0;
|
||||
color: $colorHeading;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.appHeader.scrolled {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
height: 0;
|
||||
transition: 0.1s all;
|
||||
.pageTitle {
|
||||
opacity: 0;
|
||||
}
|
||||
&.is-active {
|
||||
background: #FFF;
|
||||
min-height: 56px;
|
||||
border-bottom-color: $colorLine;
|
||||
box-shadow: $boxShadow;
|
||||
.pageTitle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin appHeaderColored($color) {
|
||||
background: transparent !important;
|
||||
border-bottom: 0 !important;
|
||||
.headerButton{
|
||||
color: $color;
|
||||
}
|
||||
&.is-active{
|
||||
background: $color !important;
|
||||
.headerButton{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appHeader.scrolled.bg-primary{
|
||||
@include appHeaderColored($colorPrimary);
|
||||
}
|
||||
.appHeader.scrolled.bg-secondary{
|
||||
@include appHeaderColored($colorSecondary);
|
||||
}
|
||||
.appHeader.scrolled.bg-success{
|
||||
@include appHeaderColored($colorSuccess);
|
||||
}
|
||||
.appHeader.scrolled.bg-danger{
|
||||
@include appHeaderColored($colorDanger);
|
||||
}
|
||||
.appHeader.scrolled.bg-warning{
|
||||
@include appHeaderColored($colorWarning);
|
||||
}
|
||||
.appHeader.scrolled.bg-info{
|
||||
@include appHeaderColored($colorInfo);
|
||||
}
|
||||
.appHeader.scrolled.bg-dark{
|
||||
@include appHeaderColored(#000);
|
||||
}
|
||||
174
public/assets/sass/section/_sidebar.scss
Normal file
174
public/assets/sass/section/_sidebar.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
$sidebarWidth : 300px;
|
||||
|
||||
.profileBox{
|
||||
width: $sidebarWidth;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: $colorPrimary;
|
||||
box-shadow: $boxShadow;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: $safeTop;
|
||||
&:before{
|
||||
background: $colorPrimary; // do not forget to change this background color if you change profilebox
|
||||
content: '';
|
||||
height: $safeTop;
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $sidebarWidth;
|
||||
}
|
||||
.image-wrapper {
|
||||
margin-right: 16px;
|
||||
padding: 16px 0;
|
||||
.imaged{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 2px solid #FFF;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
}
|
||||
.in {
|
||||
line-height: 1.4em;
|
||||
padding: 16px 25px 16px 0;
|
||||
strong {
|
||||
display: block;
|
||||
font-weight: $medium;
|
||||
color: #FFF;
|
||||
}
|
||||
.text-muted {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-buttons{
|
||||
width: $sidebarWidth;
|
||||
background: #FFF;
|
||||
border-top: 1px solid $colorLine;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding-bottom: $safeBottom;
|
||||
.button{
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
color: $colorHeading;
|
||||
&:hover,
|
||||
&:active{
|
||||
background: rgba($colorLine, .2);
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
.close-sidebar-button{
|
||||
font-size: 22px;
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
margin-top: -18px;
|
||||
&:active{
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.action-group{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0px 16px 10px 16px;
|
||||
background: $colorPrimary;
|
||||
.action-button{
|
||||
padding: 10px 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: $fontSizeCaption;
|
||||
line-height: 1em;
|
||||
color: rgba(255,255,255,.7);
|
||||
.iconbox{
|
||||
background: rgba(#000, .3);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin: 0 auto 8px auto;
|
||||
border-radius: 100%;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&:last-child{
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
#sidebarPanel{
|
||||
padding: 0;
|
||||
padding-top: $safeTop;
|
||||
padding-bottom: $safeBottom;
|
||||
.offcanvas-body{
|
||||
padding: 0 0 70px 0;
|
||||
margin-top: 74px;
|
||||
}
|
||||
.modal-content{
|
||||
width: $sidebarWidth;
|
||||
padding-top: $safeTop;
|
||||
}
|
||||
}
|
||||
|
||||
.panelbox-left,
|
||||
.panelbox-right{
|
||||
.listview{
|
||||
> li{
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
.link-listview{
|
||||
> li{
|
||||
padding: 0;
|
||||
a{
|
||||
padding: 10px 36px 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-listview{
|
||||
> li{
|
||||
padding: 0;
|
||||
.item{
|
||||
padding: 10px 16px;
|
||||
}
|
||||
a.item{
|
||||
padding-right: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-close{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
59
public/assets/sass/style.scss
Normal file
59
public/assets/sass/style.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
//-------------------------------------------------------------
|
||||
// Bootstrap 5
|
||||
//-------------------------------------------------------------
|
||||
@import url('inc/bootstrap/bootstrap.min.css');
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// Plugins
|
||||
//-------------------------------------------------------------
|
||||
// Splide
|
||||
@import url('inc/splide/splide.min.css');
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// Icons
|
||||
//-------------------------------------------------------------
|
||||
// Bootstrap Icons
|
||||
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// Theme Settings
|
||||
//-------------------------------------------------------------
|
||||
@import 'theme-settings';
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// Layout
|
||||
//-------------------------------------------------------------
|
||||
// Body - General Settings
|
||||
@import 'body';
|
||||
// Header
|
||||
@import 'section/header';
|
||||
// Bottom Menu
|
||||
@import 'section/bottomMenu';
|
||||
// Content
|
||||
@import 'section/content';
|
||||
// Sidebar
|
||||
@import 'section/sidebar';
|
||||
// Footer
|
||||
@import 'section/footer';
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// UI Kit Framework
|
||||
//-------------------------------------------------------------
|
||||
@import 'ui-framework';
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// RTL
|
||||
//-------------------------------------------------------------
|
||||
@import 'rtl';
|
||||
|
||||
|
||||
//-------------------------------------------------------------
|
||||
// Dark Mode
|
||||
//-------------------------------------------------------------
|
||||
@import 'darkmode';
|
||||
Reference in New Issue
Block a user