提交 2d62e3c0 编写于 作者: C codecalm

simple modal init

上级 c76f1dd1
...@@ -22,6 +22,10 @@ base: ...@@ -22,6 +22,10 @@ base:
cards: cards:
url: cards.html url: cards.html
title: Cards title: Cards
charts:
url: charts.html
title: Charts
icon: pie-chart
datatables: datatables:
url: datatables.html url: datatables.html
title: Data Tables title: Data Tables
...@@ -47,11 +51,6 @@ base: ...@@ -47,11 +51,6 @@ base:
title: Music title: Music
url: music.html url: music.html
charts:
url: charts.html
title: Charts
icon: pie-chart
error: error:
title: Error pages title: Error pages
icon: file-minus icon: file-minus
......
{% assign id = "default" %}
<div class="modal modal-blur fade" id="modal-{{ id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
{% endif %} {% endif %}
{% assign e = include.element | default: 'a' %} {% 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 %} {% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %} {% 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 %} {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}
......
...@@ -19,6 +19,11 @@ menu: a.b.c ...@@ -19,6 +19,11 @@ menu: a.b.c
{% include cards/user-info.html %} {% include cards/user-info.html %}
</div> </div>
<div class="col-4">
{% include ui/button.html modal="default" %}
{% include parts/modals/simple.html id="default" %}
</div>
<div class="col-4"> <div class="col-4">
{% include cards/charts/total-sales.html %} {% include cards/charts/total-sales.html %}
</div> </div>
......
...@@ -16,12 +16,12 @@ $theme-color-interval: 10% !default; ...@@ -16,12 +16,12 @@ $theme-color-interval: 10% !default;
$light: #f5f7fb !default; $light: #f5f7fb !default;
$dark: #354052 !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-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-black: rgba($dark, .032) !default;
$min-white: rgba($light, .024) !default; $min-white: rgba($light, .032) !default;
$gray-100: $light !default; $gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default; $gray-200: mix($light, $dark, 98%) !default;
...@@ -276,6 +276,26 @@ $loader-size: 2.5rem !default; ...@@ -276,6 +276,26 @@ $loader-size: 2.5rem !default;
$list-group-item-padding-y: .5rem !default; $list-group-item-padding-y: .5rem !default;
$list-group-item-padding-x: .75rem !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
$navbar-bg: $white !default; $navbar-bg: $white !default;
$navbar-height: 3.5rem !default; $navbar-height: 3.5rem !default;
...@@ -339,7 +359,7 @@ $input-disabled-bg: $gray-100 !default; ...@@ -339,7 +359,7 @@ $input-disabled-bg: $gray-100 !default;
$input-border-color: $border-color !default; $input-border-color: $border-color !default;
$input-placeholder-color: $text-muted !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; $input-group-addon-color: $text-muted !default;
$dropdown-border-color: $border-color !default; $dropdown-border-color: $border-color !default;
......
...@@ -12,10 +12,6 @@ body { ...@@ -12,10 +12,6 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-feature-settings: "liga" 0; font-feature-settings: "liga" 0;
* {
@include scrollbar;
}
@media print { @media print {
background: transparent; background: transparent;
} }
......
...@@ -128,11 +128,12 @@ Top nav ...@@ -128,11 +128,12 @@ Top nav
border-color: $navbar-border-color; border-color: $navbar-border-color;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0;
left: 0; left: 0;
width: 100vw;
padding: 0 .5rem; padding: 0 .5rem;
z-index: $zindex-sticky; z-index: $zindex-sticky;
min-height: $navbar-height; min-height: $navbar-height;
user-select: none;
& + & { & + & {
top: add($navbar-height, 1px); top: add($navbar-height, 1px);
......
...@@ -10,31 +10,31 @@ ...@@ -10,31 +10,31 @@
} }
@mixin scrollbar($is-dark: false) { @mixin scrollbar($is-dark: false) {
&::-webkit-scrollbar { //&::-webkit-scrollbar {
width: 6px; // width: 6px;
height: 6px; // height: 6px;
transition: .3s background; // transition: .3s background;
} //}
//
&::-webkit-scrollbar-thumb { //&::-webkit-scrollbar-thumb {
border-radius: 5px; // border-radius: 5px;
//
@if ($is-dark) { // @if ($is-dark) {
background: transparent; // background: transparent;
} @else { // } @else {
background: $gray-400; // background: $gray-400;
} // }
} //}
//
&:hover::-webkit-scrollbar-thumb { //&:hover::-webkit-scrollbar-thumb {
background: $gray-500; // background: $gray-500;
//
@if ($is-dark) { // @if ($is-dark) {
background: mix(#fff, $dark, 20%); // background: mix(#fff, $dark, 20%);
} @else { // } @else {
background: $gray-500; // background: $gray-500;
} // }
} //}
} }
@mixin dark { @mixin dark {
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
@import "ui/buttons"; @import "ui/buttons";
@import "ui/calendars"; @import "ui/calendars";
@import "ui/cards"; @import "ui/cards";
@import "ui/close";
@import "ui/dropdowns"; @import "ui/dropdowns";
@import "ui/empty"; @import "ui/empty";
@import "ui/grid"; @import "ui/grid";
......
.close {
&:focus {
outline: none;
color: $dark;
}
}
.modal-backdrop { .modal-header,
backdrop-filter: blur(2px); .modal-body {
background: $light-black; padding-left: $modal-inner-padding-x;
padding-right: $modal-inner-padding-x;
} }
.modal-content { .modal-header {
border: 1px solid $border-color; .close {
border-radius: $border-radius; 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);
} }
...@@ -7,11 +7,14 @@ Scrollable ...@@ -7,11 +7,14 @@ Scrollable
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&.hover { &.hover {
overflow-y: hidden; overflow-y: hidden;
> * { > * {
margin-top: -1px; margin-top: -1px;
} }
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
...@@ -19,6 +22,7 @@ Scrollable ...@@ -19,6 +22,7 @@ Scrollable
overflow-y: auto; overflow-y: auto;
} }
} }
.touch & { .touch & {
overflow-y: auto !important; overflow-y: auto !important;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册