diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md index 2d70300e8f75b9cd16b466945d0ed1c25d5df87b..f10a3831b427d5eb642653eccda908bfaa17cfa0 100644 --- a/pages/_docs/cards.md +++ b/pages/_docs/cards.md @@ -62,11 +62,14 @@ You can also add the image on the left side of the card. All you need do to is: {% example html columns=2 %}
-
- {% include cards/card.html title="Card status" hide-options=true status="purple" %} +
+ {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %} +
+
+ {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
-
- {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %} +
+ {% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
{% endexample %} diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html index b4bc2e981fbddf7e16227a00af6201f6e229bb01..63d3780c3ef1d80e66c40cc23a2181de2eb5aaec 100644 --- a/pages/_includes/cards/card.html +++ b/pages/_includes/cards/card.html @@ -1,6 +1,6 @@
- {% if include.status or include.status-left %} -
+ {% if include.status-position %} +
{% endif %} {% unless include.hide-header %} diff --git a/pages/buttons.html b/pages/buttons.html index a82a954a2717c8b95b6455f596d448afa1e04172..003f259b187658c0a7581562d9c77e204ebf9a7b 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -1,5 +1,6 @@ --- title: Buttons +done: true ---

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 1850f60314abf429b2ae41d794c9de4a069e41a6..3cf7d750e5f2dcf269a0ac35291d1261b820bea6 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -30,3 +30,15 @@ } } } + +.row-deck { + > .col, + > [class*='col-'] { + display: flex; + align-items: stretch; + + .card { + flex: 1 1 auto; + } + } +} diff --git a/scss/tabler.scss b/scss/tabler.scss index 80ca8c55c99e8d220ab061c8e199f17f11d658a8..402d2b35d7e7d41d4b625dc70f26ed2b92436795 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -42,6 +42,7 @@ @import "ui/pagination"; @import "ui/toasts"; @import "ui/steps"; +@import "ui/switch"; @import "ui/highlight"; @import "ui/examples"; diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index cc1c38229c043e22fbdc22786b2d179385cbc201..213c2fd29b84d3c6e8373456f274f82881f609cd 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -121,6 +121,7 @@ Card optinos top: 1.5rem; right: .75rem; margin-left: auto; + display: flex; } .card-options-link { @@ -133,12 +134,30 @@ Card optinos /** Card status */ -.card-status { - height: 2px; +.card-status-top { + position: absolute; + height: 3px; border-radius: $card-border-radius $card-border-radius 0 0; + top: 0; + right: 0; + left: 0; +} + +.card-status-left { + position: absolute; + right: auto; + bottom: 0; + height: 100%; + width: 3px; + border-radius: $card-border-radius 0 0 $card-border-radius; } .card-status-bottom { + position: absolute; + bottom: 0; + width: 100%; + top: initial; + height: 3px; border-radius: 0 0 $card-border-radius $card-border-radius; } diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index 78b0b581a58f5eca2e4b39559aeec4243d00492c..fbcc1cce6df1b91f3d0209c431fb2573dedb28a3 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -1,6 +1,10 @@ .icon { font-size: 1em; vertical-align: -.1em; + + &:hover { + text-decoration: none; + } } .icon-md { diff --git a/scss/ui/_loaders.scss b/scss/ui/_loaders.scss index 6fa8573d12b93a32e1d88e00720b5a547c439d13..99673410c7ac9d891378c86cdd9c1bd63b25a8d8 100644 --- a/scss/ui/_loaders.scss +++ b/scss/ui/_loaders.scss @@ -33,3 +33,31 @@ animation-iteration-count: infinite; } } + +/** +Dimmer +*/ +.dimmer { + position: relative; + + .loader { + display: none; + margin: 0 auto; + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + } + + &.active { + .loader { + display: block; + } + + .dimmer-content { + opacity: .1; + pointer-events: none; + } + } +} diff --git a/scss/ui/_switch.scss b/scss/ui/_switch.scss new file mode 100644 index 0000000000000000000000000000000000000000..2361125887c77e00e4bcd0707fd52c4d415c72ca --- /dev/null +++ b/scss/ui/_switch.scss @@ -0,0 +1,74 @@ +$custom-switch-width: 2.25rem; +$custom-switch-height: 1.25rem; +$custom-switch-padding: 1px; + +.custom-switch { + user-select: none; + cursor: default; + display: inline-flex; + align-items: center; + margin: 0; +} + +.custom-switch-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.custom-switches-stacked { + display: flex; + flex-direction: column; + + .custom-switch { + margin-bottom: .5rem; + } +} + +.custom-switch-indicator { + display: inline-block; + height: $custom-switch-height; + width: $custom-switch-width; + background: $gray-200; + border-radius: 50px; + position: relative; + vertical-align: bottom; + border: 1px solid $border-color; + transition: .3s border-color, .3s background-color; + + &:before { + content: ''; + position: absolute; + height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px}); + width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px}); + top: $custom-switch-padding; + left: $custom-switch-padding; + background: #fff; + border-radius: 50%; + transition: .3s left; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + } + + .custom-switch-input:checked ~ & { + background: $primary; + + &:before { + left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding}) + } + } + + .custom-switch-input:focus ~ & { + box-shadow: $input-btn-focus-box-shadow; + border-color: $primary; + } +} + +.custom-switch-description { + margin-left: .5rem; + color: $text-muted; + transition: .3s color; + + .custom-switch-input:checked ~ & { + color: $body-color; + } +}