Mise en place de Laravel 11 avec Fortify
This commit is contained in:
hugol
File diff suppressed because one or more lines are too long
1
public/assets/css/inc/splide/splide.min.css
vendored
1
public/assets/css/inc/splide/splide.min.css
vendored
@@ -1 +0,0 @@
|
||||
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}.splide__arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;padding:0;opacity:.7;background:#ccc}.splide__arrow svg{width:1.2em;height:1.2em}.splide__arrow:hover{cursor:pointer;opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{position:absolute;z-index:1;bottom:.5em;left:50%;transform:translateX(-50%);padding:0}.splide__pagination__page{display:inline-block;width:8px;height:8px;background:#ccc;border-radius:50%;margin:3px;padding:0;transition:transform .2s linear;border:none;opacity:.7}.splide__pagination__page.is-active{transform:scale(1.4);background:#fff}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{width:0;height:3px;background:#ccc}.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent}.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border-color:#000}.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{right:1em;left:auto}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{top:auto;bottom:1em}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination{display:flex;flex-direction:column;bottom:50%;left:auto;right:.5em;transform:translateY(50%)}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 449 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 412 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
File diff suppressed because it is too large
Load Diff
6
public/assets/js/lib/bootstrap.min.js
vendored
6
public/assets/js/lib/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,50 +0,0 @@
|
||||
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);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,730 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
//--------------------------------------------------
|
||||
// ------ 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);
|
||||
@@ -1,49 +0,0 @@
|
||||
@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';
|
||||
@@ -1,119 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,497 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,315 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,350 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
#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);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user