Skip to content

T
Tabler

Dashboards / Tabler
11 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 6af84f20 编写于 作者: C codecalm
浏览文件
操作

modals

上级 484f0649
隐藏空白更改
内联 并排
Showing with 246 addition and 40 deletion
pages/_data/menu.yml
浏览文件 @ 6af84f20
......@@ -26,6 +26,9 @@ base:
cards:
url: cards.html
title: Cards
modals:
url: modals.html
title: Modals
charts:
url: charts.html
title: Charts
......
pages/_includes/layout/navbar-secondary.html
浏览文件 @ 6af84f20
......@@ -3,7 +3,7 @@
{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
<form class="form-inline w-50 mr-4 d-none d-md-flex">
{% include ui/form/input-icon.html prepend=true input-class="form-control-flush" %}
{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w100" class="w100" %}
</form>
<ul class="navbar-nav ml-auto">
......
pages/_includes/layout/page-header-actions.html
浏览文件 @ 6af84f20
......@@ -26,7 +26,9 @@
<span class="d-none d-sm-inline">
{% include ui/button.html text="New view" color="secondary" %}
</span>
{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" %}
{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" %}
{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" modal-id="report" %}
{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" modal-id="report" %}
{% endif %}
{% include ui/modal.html modal-id="report" size="lg" top=true %}
</div>
pages/_includes/parts/form/input.html
浏览文件 @ 6af84f20
......@@ -6,12 +6,6 @@
<div class="form-control-plaintext">{{ include.value | default: 'Input value' }}</div>
</div>
{% elsif type == 'text' %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Text' }}</label>
<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
</div>
{% elsif type == 'password' %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Password' }}</label>
......@@ -24,4 +18,11 @@
<textarea class="form-control" name="example-textarea" placeholder="{{ include.placeholder | default: 'Textarea placeholder' }}">{{ include.value }}</textarea>
</div>
{% else %}
<div class="mb-3">
<label class="form-label">{{ include.label | default: 'Text' }}</label>
<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
</div>
{% endif %}
\ No newline at end of file
pages/_includes/parts/modals/customize.html
浏览文件 @ 6af84f20
{% include ui/modal/header.html title="Customize Tabler" %}
<div class="modal-body pt-0">
<div class="modal-body">
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
<div class="mb-3">
......
pages/_includes/parts/modals/full-width.html 0 → 100644
浏览文件 @ 6af84f20
{% include ui/modal/header.html title="Full width modal" %}
<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>
{% include ui/modal/footer.html %}
\ No newline at end of file
pages/_includes/parts/modals/large.html 0 → 100644
浏览文件 @ 6af84f20
{% include ui/modal/header.html title="Large modal" %}
<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>
{% include ui/modal/footer.html %}
pages/_includes/parts/modals/report.html
浏览文件 @ 6af84f20
{% include ui/modal/header.html title="New report" %}
\ No newline at end of file
{% include ui/modal/header.html title="New report" %}
{% assign reports = "Simple:Provide only basic data needed for the report,Advanced:Insert charts and additional advanced analyses to be inserted in the report" | split: "," %}
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
</div>
<label class="form-label">Report type</label>
<div class="form-selectgroup-boxes row mb-3">
{% for report in reports %}
{% assign r = report | split: ':' %}
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input"{% if forloop.index == 1 %} checked{% endif %}>
<div class="form-selectgroup-box d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-box-content">
<div class="form-selectgroup-title strong mb-1">{{ r[0] }}</div>
<div class="text-muted">{{ r[1] }}</div>
</div>
</div>
</label>
</div>
{% endfor %}
</div>
<div class="row">
<div class="col-lg-8">
<div class="mb-3">
<label class="form-label">Report url</label>
{% include ui/form/input-group.html prepend="https://tabler.io/reports/" flat=true input-class="pl-0" value="report-01" %}
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Visibility</label>
{% assign options = "Private,Public,Hidden" | split: "," %}
<select class="form-select">
{% for option in options %}
<option value="{{ forloop.index }}"{% if forloop.index == 1 %} selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Client name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Reporting period</label>
<input type="date" class="form-control">
</div>
</div>
<div class="col-lg-12">
<div>
<label class="form-label">Additional information</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
{% include ui/button.html text="Cancel" color="link" dismiss=true %}
{% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ml-auto" %}
</div>
\ No newline at end of file
pages/_includes/parts/modals/scrollable.html 0 → 100644
浏览文件 @ 6af84f20
{% include ui/modal/header.html title="Scrollable modal" %}
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% include ui/modal/footer.html %}
\ No newline at end of file
pages/_includes/parts/modals/simple.html
浏览文件 @ 6af84f20
......@@ -2,7 +2,4 @@
<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>
{% include ui/modal/footer.html %}
pages/_includes/parts/modals/small.html 0 → 100644
浏览文件 @ 6af84f20
<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>
{% include ui/modal/footer.html %}
\ No newline at end of file
pages/_includes/ui/button.html
浏览文件 @ 6af84f20
......@@ -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.loading %} btn-loading{% 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" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% 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.loading %} btn-loading{% 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" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-dismiss="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 %}
......
pages/_includes/ui/modal.html
浏览文件 @ 6af84f20
{% assign modal-id = include.modal-id | default: 'simple' %}
{% assign size = include['size'] %}
{% capture_global modals %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog{% unless include.top %} modal-dialog-centered{% endunless %}" role="document">
<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
<div class="modal-content">
{% include parts/modals/{{ modal-id }}.html %}
</div>
......
pages/_includes/ui/modal/footer.html 0 → 100644
浏览文件 @ 6af84f20
<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>
\ No newline at end of file
pages/modals.html 0 → 100644
浏览文件 @ 6af84f20
---
title: Modals
page-header: Modals
---
<div class="card">
<div class="card-body">
<div class="btn-list">
{% include ui/button.html text="Simple modal" modal-id="simple" %}
{% include ui/button.html text="Large modal" modal-id="large" %}
{% include ui/button.html text="Small modal" modal-id="small" %}
{% include ui/button.html text="Full width modal" modal-id="full-width" %}
{% include ui/button.html text="Scrollable modal" modal-id="scrollable" %}
{% include ui/button.html text="Modal with form" modal-id="report" %}
</div>
</div>
</div>
{% include ui/modal.html modal-id="simple" %}
{% include ui/modal.html modal-id="large" size="lg" %}
{% include ui/modal.html modal-id="small" size="sm" %}
{% include ui/modal.html modal-id="full-width" size="full-width" %}
{% include ui/modal.html modal-id="scrollable" scrollable=true %}
{% include ui/modal.html modal-id="report" size="lg" %}
\ No newline at end of file
scss/_dark.scss
浏览文件 @ 6af84f20
......@@ -11,7 +11,8 @@ $dark-text: $light;
.card,
.navbar-light,
.footer,
.modal-content {
.modal-content,
.modal-header {
background: $dark;
color: inherit;
}
......@@ -30,6 +31,7 @@ $dark-text: $light;
.form-select,
.form-file-text,
.form-control,
.form-selectgroup-box,
.flatpickr-input.flatpickr-input,
.form-selectgroup-check,
.form-imagecheck-figure:before {
......@@ -37,6 +39,10 @@ $dark-text: $light;
color: $dark-text;
}
.form-control-plaintext {
color: $dark-text;
}
.input-group-flat .input-group-text {
background-color: $dark-darken;
}
......
scss/_variables.scss
浏览文件 @ 6af84f20
......@@ -27,6 +27,7 @@ $light-white: rgba($light, .24) !default;
$min-black: rgba($dark, .024) !default;
$min-white: rgba(mix($light, $dark, 48%), .1) !default;
$gray-50: #fbfbfb !default;
$gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default;
$gray-300: mix($light, $dark, 94%) !default;
......@@ -58,6 +59,7 @@ $body-color: $dark !default;
$text-muted-opacity: .60 !default;
$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
$border-color: rgba($text-muted, .24) !default;
$border-color-light: rgba($text-muted, .12) !default;
$hover-bg: $light !default;
$active-bg: rgba($blue, .06) !default;
......@@ -314,21 +316,27 @@ $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-color: $border-color-light !default;
$modal-content-bg: $gray-50 !default;
$modal-content-border-radius: $border-radius !default;
$modal-header-padding: 1.5rem !default;
$modal-header-height: 3.5rem !default;
$modal-header-border-width: 1px !default;
$modal-header-border-color: $border-color-light !default;
$modal-header-bg: $white !default;
$modal-inner-padding: 1.5rem !default;
$modal-footer-border-width: 0 !default;
$modal-header-border-width: 0 !default;
$modal-footer-margin-between: .75rem !default;
$modal-xl: 1140px !default;
$modal-lg: 800px !default;
$modal-lg: 720px !default;
$modal-md: 540px !default;
$modal-sm: 300px !default;
......
scss/layout/_navbar.scss
浏览文件 @ 6af84f20
......@@ -8,8 +8,7 @@ Horizontal navbar
}
.dropdown-menu {
margin-top: -4px;
margin-right: -7px;
margin-right: -.25rem;
}
}
......
scss/ui/_dropdowns.scss
浏览文件 @ 6af84f20
......@@ -64,7 +64,7 @@
}
.dropdown-menu-arrow {
margin-top: .75rem;
margin-top: .5rem;
&:before {
content: "";
......
scss/ui/_forms.scss
浏览文件 @ 6af84f20
......@@ -186,6 +186,7 @@ Input group
.input-group-prepend {
margin-right: 0;
border-right: 0;
background: $form-check-input-bg;
.input-group-text {
padding-right: 0;
......
scss/ui/_modals.scss
浏览文件 @ 6af84f20
.modal-header,
.modal-body {
padding-left: $modal-inner-padding;
padding-right: $modal-inner-padding;
@include scrollbar;
.modal-title {
margin-bottom: 1rem;
}
& + & {
border-top: 1px solid $border-color-light;
}
}
.modal-header {
align-items: center;
padding-top: 0;
padding-bottom: 0;
min-height: $modal-header-height;
background: $modal-header-bg;
.close {
font-size: 1rem;
padding-right: $modal-inner-padding;
margin-right: (- $modal-inner-padding);
margin: 0 (- $modal-inner-padding) 0 auto;
padding-top: 0;
padding-bottom: 0;
height: subtract($modal-header-height, 1px);
}
}
......@@ -20,14 +34,20 @@
}
.modal-footer {
padding-left: $modal-inner-padding - $modal-footer-margin-between / 2;
padding-right: $modal-inner-padding - $modal-footer-margin-between / 2;
}
@if $modal-footer-border-width == 0 {
padding-top: 0;
} @else {
padding-top: .75rem;
}
.modal-footer {
background: $min-black;
padding-bottom: .75rem;
}
.modal-blur {
backdrop-filter: blur($modal-backdrop-blur);
}
.modal-full-width {
max-width: none;
margin: 0 $modal-dialog-margin;
}
\ No newline at end of file
scss/ui/forms/_form-selectgroup.scss
浏览文件 @ 6af84f20
......@@ -5,6 +5,10 @@ Select group
display: inline-flex;
margin: 0 -.5rem -.5rem 0;
flex-wrap: wrap;
.form-selectgroup-item {
margin: 0 .5rem .5rem 0;
}
}
.form-selectgroup-vertical {
......@@ -14,7 +18,6 @@ Select group
.form-selectgroup-item {
display: block;
position: relative;
margin: 0 .5rem .5rem 0;
}
.form-selectgroup-input {
......@@ -33,6 +36,7 @@ Select group
font-size: $input-btn-font-size;
line-height: $input-line-height;
color: $text-muted;
background: $form-check-input-bg;
text-align: center;
cursor: pointer;
user-select: none;
......@@ -96,6 +100,10 @@ Select group
box-shadow: $input-btn-focus-box-shadow;
}
.form-selectgroup-box-content {
line-height: $line-height-sm;
}
/**
Alternate version of form select group
*/
......@@ -106,15 +114,14 @@ Alternate version of form select group
color: inherit;
}
.form-selectgroup-box-content {
opacity: .64;
transition: .3s opacity;
}
.form-selectgroup-input:checked {
+ .form-selectgroup-box {
color: inherit;
.form-selectgroup-title {
color: $primary;
}
.form-selectgroup-box-content {
opacity: 1;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或