diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index f94527110910360eb6978e91af6ddc82551ac5a6..a41554e3b3cf6a20b74745c48a56dbaccf7b20c1 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -22,6 +22,10 @@ base: cards: url: cards.html title: Cards + charts: + url: charts.html + title: Charts + icon: pie-chart datatables: url: datatables.html title: Data Tables @@ -47,11 +51,6 @@ base: title: Music url: music.html -charts: - url: charts.html - title: Charts - icon: pie-chart - error: title: Error pages icon: file-minus diff --git a/pages/_includes/parts/modals/simple.html b/pages/_includes/parts/modals/simple.html new file mode 100644 index 0000000000000000000000000000000000000000..1c89dfd3ecf490a941351139504bed8a0441d5e0 --- /dev/null +++ b/pages/_includes/parts/modals/simple.html @@ -0,0 +1,20 @@ +{% assign id = "default" %} + diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html index 27826ab78dbba8278233d0026244491922519ddb..0b45389e0a9dcaa8774302717d9bed29310430f2 100644 --- a/pages/_includes/ui/button.html +++ b/pages/_includes/ui/button.html @@ -19,7 +19,7 @@ {% endif %} {% assign e = include.element | default: 'a' %} -<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}> +<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}> {% if include.spinner %} {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %} {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %} diff --git a/pages/tmp.html b/pages/tmp.html index d3ec2b3842a0efd4ecf6e8e7cf3ee30e264217bf..f8d30439f468cb56bf1bd330ea91bcaed2545df0 100644 --- a/pages/tmp.html +++ b/pages/tmp.html @@ -19,6 +19,11 @@ menu: a.b.c {% include cards/user-info.html %} +
+ {% include ui/button.html modal="default" %} + {% include parts/modals/simple.html id="default" %} +
+
{% include cards/charts/total-sales.html %}
diff --git a/scss/_variables.scss b/scss/_variables.scss index e5bf625a30b52ea3dea6c4d230d7e541f7fe1261..9f8a05be49f851171d6f27caea9df181fbf8ed5c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -16,12 +16,12 @@ $theme-color-interval: 10% !default; $light: #f5f7fb !default; $dark: #354052 !default; -$light-black: rgba($dark, .4) !default; +$light-black: rgba($dark, .24) !default; $light-mix: rgba(mix($light, $dark, 64%), .24) !default; -$light-white: rgba($light, .4) !default; +$light-white: rgba($light, .24) !default; -$min-black: rgba($dark, .024) !default; -$min-white: rgba($light, .024) !default; +$min-black: rgba($dark, .032) !default; +$min-white: rgba($light, .032) !default; $gray-100: $light !default; $gray-200: mix($light, $dark, 98%) !default; @@ -276,6 +276,26 @@ $loader-size: 2.5rem !default; $list-group-item-padding-y: .5rem !default; $list-group-item-padding-x: .75rem !default; +//modals +$modal-content-border-color: $border-color !default; +$modal-backdrop-opacity: .24 !default; +$modal-backdrop-bg: $dark !default; +$modal-backdrop-blur: 2px !default; + +$modal-fade-transform: translate(0, -1rem) !default; + +$modal-content-border-radius: $border-radius !default; + +$modal-inner-padding: .75rem !default; +$modal-inner-padding-x: 1.25rem !default; +$modal-footer-border-width: 0 !default; +$modal-header-border-width: 0 !default; + +$modal-xl: 1140px !default; +$modal-lg: 800px !default; +$modal-md: 540px !default; +$modal-sm: 300px !default; + //navbar $navbar-bg: $white !default; $navbar-height: 3.5rem !default; @@ -339,7 +359,7 @@ $input-disabled-bg: $gray-100 !default; $input-border-color: $border-color !default; $input-placeholder-color: $text-muted !default; -$input-group-addon-bg: $min-white !default; +$input-group-addon-bg: $min-black !default; $input-group-addon-color: $text-muted !default; $dropdown-border-color: $border-color !default; diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index 4b95dfc62a96eb2373755b99ba7a1d077d31fce7..29b2f6f510afa275c42a85bba129ad2529b06fb0 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -12,10 +12,6 @@ body { text-rendering: optimizeLegibility; font-feature-settings: "liga" 0; - * { - @include scrollbar; - } - @media print { background: transparent; } diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index 35781c1679bade25d7203f65224604a9e1c846de..78c85870194ab617820a3e20d37dbba296716794 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -128,11 +128,12 @@ Top nav border-color: $navbar-border-color; position: absolute; top: 0; - right: 0; left: 0; + width: 100vw; padding: 0 .5rem; z-index: $zindex-sticky; min-height: $navbar-height; + user-select: none; & + & { top: add($navbar-height, 1px); diff --git a/scss/mixins/_mixins.scss b/scss/mixins/_mixins.scss index 5b547fd26e6768ac33264623dbe13d5d10bccd46..47fb28e1085f7dd66f122af1ce82bf924f836b73 100644 --- a/scss/mixins/_mixins.scss +++ b/scss/mixins/_mixins.scss @@ -10,31 +10,31 @@ } @mixin scrollbar($is-dark: false) { - &::-webkit-scrollbar { - width: 6px; - height: 6px; - transition: .3s background; - } - - &::-webkit-scrollbar-thumb { - border-radius: 5px; - - @if ($is-dark) { - background: transparent; - } @else { - background: $gray-400; - } - } - - &:hover::-webkit-scrollbar-thumb { - background: $gray-500; - - @if ($is-dark) { - background: mix(#fff, $dark, 20%); - } @else { - background: $gray-500; - } - } + //&::-webkit-scrollbar { + // width: 6px; + // height: 6px; + // transition: .3s background; + //} + // + //&::-webkit-scrollbar-thumb { + // border-radius: 5px; + // + // @if ($is-dark) { + // background: transparent; + // } @else { + // background: $gray-400; + // } + //} + // + //&:hover::-webkit-scrollbar-thumb { + // background: $gray-500; + // + // @if ($is-dark) { + // background: mix(#fff, $dark, 20%); + // } @else { + // background: $gray-500; + // } + //} } @mixin dark { diff --git a/scss/tabler.scss b/scss/tabler.scss index 3b95859d30d9b7dc4b80bef9f8c87b4b2cd716b3..c42c85de53f29e01146dd53f338eff2ff87ababf 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -23,6 +23,7 @@ @import "ui/buttons"; @import "ui/calendars"; @import "ui/cards"; +@import "ui/close"; @import "ui/dropdowns"; @import "ui/empty"; @import "ui/grid"; diff --git a/scss/ui/_close.scss b/scss/ui/_close.scss new file mode 100644 index 0000000000000000000000000000000000000000..4da19da3a97a8b7a35eaf63f9583ab7f18776bdb --- /dev/null +++ b/scss/ui/_close.scss @@ -0,0 +1,6 @@ +.close { + &:focus { + outline: none; + color: $dark; + } +} diff --git a/scss/ui/_modals.scss b/scss/ui/_modals.scss index 9801617bfe3d08d1f3081f7dae02a6fb79ccd185..2bfe0960025cb56df8379e4aed2d5d4474cedaa8 100644 --- a/scss/ui/_modals.scss +++ b/scss/ui/_modals.scss @@ -1,9 +1,33 @@ -.modal-backdrop { - backdrop-filter: blur(2px); - background: $light-black; +.modal-header, +.modal-body { + padding-left: $modal-inner-padding-x; + padding-right: $modal-inner-padding-x; } -.modal-content { - border: 1px solid $border-color; - border-radius: $border-radius; +.modal-header { + .close { + font-size: 1rem; + padding-right: $modal-inner-padding-x; + margin-right: (- $modal-inner-padding-x); + } +} + +.modal-title { + font-size: $h3-font-size; + font-weight: $headings-font-weight; + color: $headings-color; + line-height: (24/18); +} + +.modal-footer { + padding-left: $modal-inner-padding-x - $modal-footer-margin-between / 2; + padding-right: $modal-inner-padding-x - $modal-footer-margin-between / 2; +} + +.modal-footer { + background: $min-black; +} + +.modal-blur { + backdrop-filter: blur($modal-backdrop-blur); } diff --git a/scss/utils/_scroll.scss b/scss/utils/_scroll.scss index a315b690da7adcf44b1d1876cd69acf813425a19..09ec9e4dd39ed6f940749a478b0242741644a5d5 100644 --- a/scss/utils/_scroll.scss +++ b/scss/utils/_scroll.scss @@ -7,11 +7,14 @@ Scrollable overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; + &.hover { overflow-y: hidden; + > * { margin-top: -1px; } + &:hover, &:focus, &:active { @@ -19,6 +22,7 @@ Scrollable overflow-y: auto; } } + .touch & { overflow-y: auto !important; }