From 2d0ccfd55116cd6343edb3a5cc78be54690d94e2 Mon Sep 17 00:00:00 2001 From: codecalm Date: Fri, 10 Jan 2020 20:55:55 +0100 Subject: [PATCH] form elements, flags, payments refactoring --- pages/_data/menu.yml | 3 + pages/_docs/flags.md | 6 +- pages/_docs/payments.md | 3 +- pages/_includes/cards/configuration.html | 33 ++++ pages/_includes/forms/form-elements-4.html | 5 + pages/_includes/forms/form-elements-6.html | 1 - pages/_includes/parts/form-payments.html | 24 +++ .../_includes/parts/form-project-manager.html | 24 +++ pages/_includes/parts/input-color.html | 6 +- pages/_includes/parts/input-image.html | 8 +- pages/_includes/parts/input-selectgroups.html | 14 +- pages/_includes/ui/flag.html | 2 +- .../_includes/ui/form/input-selectgroup.html | 8 +- pages/_includes/ui/form/selectize.html | 4 +- pages/_includes/ui/payment.html | 2 +- pages/tmp.html | 97 ++++++----- pages/tmp2.html | 77 +++++---- pages/tmp4.html | 60 +++---- scss/_variables.scss | 2 +- scss/ui/_flags.scss | 4 +- scss/ui/_forms.scss | 2 - scss/ui/_payments.scss | 29 ++-- scss/ui/forms/_form-colorinput.scss | 10 +- scss/ui/forms/_form-imagecheck.scss | 28 ++-- scss/ui/forms/_form-selectgroup.scss | 150 +++++++++++------- 25 files changed, 368 insertions(+), 234 deletions(-) create mode 100644 pages/_includes/cards/configuration.html create mode 100644 pages/_includes/parts/form-payments.html create mode 100644 pages/_includes/parts/form-project-manager.html diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 8366097d4..a8e13a7d2 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -174,6 +174,9 @@ docs: progress: title: Progress url: docs/progress.html + payments: + title: Payments + url: docs/payments.html ribbons: title: Ribbons badge: New diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 43394535c..3a6e6486f 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -18,9 +18,9 @@ done: true Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed. {% example html %} -{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} -{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %} -{% include ui/flag.html flag="pl" class="flag-size-md" %} +{% include ui/flag.html flag="pl" size="xl" class="mr-1" %} +{% include ui/flag.html flag="pl" size="lg" class="mr-1" %} +{% include ui/flag.html flag="pl" size="md" %} {% include ui/flag.html flag="pl" class="mr-1" %} {% endexample %} diff --git a/pages/_docs/payments.md b/pages/_docs/payments.md index b9ce0f697..9455f2c8d 100644 --- a/pages/_docs/payments.md +++ b/pages/_docs/payments.md @@ -2,6 +2,7 @@ title: Payments menu: docs.payments plugin: payments +done: true --- ### Payment @@ -33,4 +34,4 @@ Using Bootstrap’s typical naming structure, you can create a standard payment, {{ payment.name }} {% endfor %} - \ No newline at end of file + diff --git a/pages/_includes/cards/configuration.html b/pages/_includes/cards/configuration.html new file mode 100644 index 000000000..82a2a7462 --- /dev/null +++ b/pages/_includes/cards/configuration.html @@ -0,0 +1,33 @@ +
+
+

+ Configuration +

+
+ + Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %} + +
+
+
+
+
Date:
+
2020-01-05 16:42:29 UTC
+ +
Account:
+
tabler
+ +
Location:
+
{% include ui/flag.html flag="pl" %} Poland
+ +
IP Address:
+
46.113.11.3
+ +
Operating system:
+
OS X 10.15.2 64-bit
+ +
Browser:
+
Chrome
+
+
+
diff --git a/pages/_includes/forms/form-elements-4.html b/pages/_includes/forms/form-elements-4.html index 874972a6b..21ed6c7d7 100644 --- a/pages/_includes/forms/form-elements-4.html +++ b/pages/_includes/forms/form-elements-4.html @@ -1,2 +1,7 @@ {% include parts/form-fieldset.html %} +{% include parts/input-selectgroups.html %} +{% include parts/form-payments.html %} +{% include parts/form-project-manager.html %} + + diff --git a/pages/_includes/forms/form-elements-6.html b/pages/_includes/forms/form-elements-6.html index c68aef6d7..2d2cd90c3 100644 --- a/pages/_includes/forms/form-elements-6.html +++ b/pages/_includes/forms/form-elements-6.html @@ -1,4 +1,3 @@ -{% include parts/input-selectgroups.html %} {% include parts/input-datalist.html %} {% include parts/input-sizes.html %} {% include parts/input-range.html %} diff --git a/pages/_includes/parts/form-payments.html b/pages/_includes/parts/form-payments.html new file mode 100644 index 000000000..e0afc59c6 --- /dev/null +++ b/pages/_includes/parts/form-payments.html @@ -0,0 +1,24 @@ +
+ + + {% assign items = "visa,mastercard,paypal" | split: ',' %} +
+ {% for item in items %} + + {% endfor %} +
+
diff --git a/pages/_includes/parts/form-project-manager.html b/pages/_includes/parts/form-project-manager.html new file mode 100644 index 000000000..4060c2c44 --- /dev/null +++ b/pages/_includes/parts/form-project-manager.html @@ -0,0 +1,24 @@ +
+ + +
+ {% for person in site.data.people limit: 5 %} + + {% endfor %} +
+
diff --git a/pages/_includes/parts/input-color.html b/pages/_includes/parts/input-color.html index e1fe4c6a3..1295faa4f 100644 --- a/pages/_includes/parts/input-color.html +++ b/pages/_includes/parts/input-color.html @@ -3,9 +3,9 @@
{% for color in site.colors limit: 10 %}
-
{% endfor %} diff --git a/pages/_includes/parts/input-image.html b/pages/_includes/parts/input-image.html index 7fbc486c5..f04cd8542 100644 --- a/pages/_includes/parts/input-image.html +++ b/pages/_includes/parts/input-image.html @@ -4,10 +4,10 @@
{% for photo in site.data.photos limit: limit offset: 30 %}
-
diff --git a/pages/_includes/parts/input-selectgroups.html b/pages/_includes/parts/input-selectgroups.html index 111873865..7c19b75dd 100644 --- a/pages/_includes/parts/input-selectgroups.html +++ b/pages/_includes/parts/input-selectgroups.html @@ -1,18 +1,20 @@
- - {% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %} + + {% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
+
{% include ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
- - {% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %} + + {% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="form-selectgroup-vertical" type="radio" name="shipping-method" %}
- - {% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %} + + {% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
+ diff --git a/pages/_includes/ui/flag.html b/pages/_includes/ui/flag.html index 3aae12bfc..96d6f5989 100644 --- a/pages/_includes/ui/flag.html +++ b/pages/_includes/ui/flag.html @@ -1 +1 @@ - + diff --git a/pages/_includes/ui/form/input-selectgroup.html b/pages/_includes/ui/form/input-selectgroup.html index 9c07c9020..2c6ddf75f 100644 --- a/pages/_includes/ui/form/input-selectgroup.html +++ b/pages/_includes/ui/form/input-selectgroup.html @@ -2,12 +2,12 @@ {% assign default = include.default | default: values[0] %} {% assign type = include.type | default: "checkbox" %} {% assign name = include.name | default: "name" %} -
+
{% for value in values %} -
diff --git a/pages/_includes/ui/form/selectize.html b/pages/_includes/ui/form/selectize.html index 84f86b4e3..44e82b19b 100644 --- a/pages/_includes/ui/form/selectize.html +++ b/pages/_includes/ui/form/selectize.html @@ -31,10 +31,10 @@ {% if key == "countries" %} render: { option: function (data, escape) { - return '
' + escape(data.text) + '
'; + return '
' + escape(data.text) + '
'; }, item: function (data, escape) { - return '
' + escape(data.text) + '
'; + return '
' + escape(data.text) + '
'; } } {% elsif key == "people" %} diff --git a/pages/_includes/ui/payment.html b/pages/_includes/ui/payment.html index 26656f13f..7c2cffb1a 100644 --- a/pages/_includes/ui/payment.html +++ b/pages/_includes/ui/payment.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/pages/tmp.html b/pages/tmp.html index cbbf89d3c..bd2867311 100644 --- a/pages/tmp.html +++ b/pages/tmp.html @@ -4,59 +4,58 @@ menu: a.b.c ---
-
- {% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %} -
-
- {% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %} -
+
+ {% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %} +
+
+ {% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %} +
- {% for chart in site.data.charts %} - {% if chart[1].demo %} -
-
-
- {% assign chart-id = chart[0] %} -

{{ chart-id }}

- {% include ui/chart.html chart-id=chart-id height=15 %} -
-
-
- {% endif %} - {% endfor %} + {% for chart in site.data.charts %} + {% if chart[1].demo %} +
+
+
+ {% assign chart-id = chart[0] %} +

{{ chart-id }}

+ {% include ui/chart.html chart-id=chart-id height=15 %} +
+
+
+ {% endif %} + {% endfor %} - -
-
-
- {% include ui/chart.html chart-id="tasks-overview" height=20 %} -
-
-
-
- {% include cards/charts/total-sales.html %} -
-
+
+
+
+ {% include ui/chart.html chart-id="tasks-overview" height=20 %} +
+
+
+
+ {% include cards/charts/total-sales.html %} +
+
-
- {% include cards/user-info.html %} - {% include cards/users-list-2.html %} +
+ {% include cards/user-info.html %} + {% include cards/users-list-2.html %} -
-
-
{% include ui/stars.html %}
-
{% include ui/stars.html count=3 %}
-
{% include ui/stars.html color="red" %}
-
{% include ui/stars.html filled=true %}
-
{% include ui/stars.html icon="heart" color="red" rate=2 %}
-
{% include ui/stars.html icon="circle" color="blue" %}
-
-
-
-
- {% include cards/users-list.html hoverable=true checked-ids="2,5,8" %} - {% include cards/users-list.html offset=8 checkbox=true title="Contacts" %} -
+
+
+
{% include ui/stars.html %}
+
{% include ui/stars.html count=3 %}
+
{% include ui/stars.html color="red" %}
+
{% include ui/stars.html filled=true %}
+
{% include ui/stars.html icon="heart" color="red" rate=2 %}
+
{% include ui/stars.html icon="circle" color="blue" %}
+
+
+
+
+ {% include cards/users-list.html hoverable=true checked-ids="2,5,8" %} + {% include cards/users-list.html offset=8 checkbox=true title="Contacts" %} +
diff --git a/pages/tmp2.html b/pages/tmp2.html index da5d95ac1..93ea669ad 100644 --- a/pages/tmp2.html +++ b/pages/tmp2.html @@ -2,45 +2,64 @@ page-title: Search results --- -{% include ui/button.html color="primary" icon="plus" icon-only=true class="btn-floating" size="lg" %} -
-
- +
-
-

- Configuration -

-
- - Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %} - -
-
-
-
Date:
-
2020-01-05 16:42:29 UTC
+
+ {% assign items = "HTML,CSS,JavaScript,Ruby,GraphSQL" | split: ',' %} +
+ {% for item in items %} + + {% endfor %} +
+
-
Account:
-
tabler
+
+ {% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %} +
+ {% for item in items %} + + {% endfor %} +
+
-
Location:
-
{% include ui/flag.html flag="pl" %} Poland
+
+ {% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %} +
+ {% for item in items %} + + {% endfor %} +
+
-
IP Address:
-
46.113.11.3
+
+ + lorem haha +
-
Operating system:
-
OS X 10.15.2 64-bit
-
Browser:
-
Chrome
-
- +
+
+ {% include cards/configuration.html %}
diff --git a/pages/tmp4.html b/pages/tmp4.html index 0f672a459..b0221f3f4 100644 --- a/pages/tmp4.html +++ b/pages/tmp4.html @@ -4,35 +4,35 @@ libs: countup ---
-
-

CountUp

-
+
+

CountUp

+
-
-
-

30000

- (Default) -
-
-

30000

- (Duration 10s) -
-
-

30000

- (No comma) -
-
-

30000000

- (Space) -
-
-

30

- (Suffix) -
-
-

30000

- (Prefix) -
-
-
+
+
+

30000

+ (Default) +
+
+

30000

+ (Duration 10s) +
+
+

30000

+ (No comma) +
+
+

30000000

+ (Space) +
+
+

30

+ (Suffix) +
+
+

30000

+ (Prefix) +
+
+
diff --git a/scss/_variables.scss b/scss/_variables.scss index b04c90a0c..827542c67 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -355,7 +355,7 @@ $flag-sizes: ( //Payments $payment-sizes: ( - "md": 2rem, + "sm": 1.5rem, "lg": 3rem, "xl": 4rem ) !default; diff --git a/scss/ui/_flags.scss b/scss/ui/_flags.scss index f382dd904..f93521a95 100644 --- a/scss/ui/_flags.scss +++ b/scss/ui/_flags.scss @@ -30,13 +30,13 @@ } @each $country in $countries { - .flag-#{$country} { + .flag-country-#{$country} { background-image: url("#{$assets-base}/img/flags/#{$country}.svg"); } } @each $flag-size, $size in $flag-sizes { - .flag-size-#{$flag-size} { + .flag-#{$flag-size} { width: $size * 1.33333; height: $size; } diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss index fe99f648e..3a3be7f81 100644 --- a/scss/ui/_forms.scss +++ b/scss/ui/_forms.scss @@ -12,8 +12,6 @@ textarea { } .form-control { - vertical-align: middle; - &:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset; } diff --git a/scss/ui/_payments.scss b/scss/ui/_payments.scss index a622b7f99..799c8351b 100644 --- a/scss/ui/_payments.scss +++ b/scss/ui/_payments.scss @@ -1,26 +1,25 @@ $payment-icons: ('2checkout-dark', '2checkout', 'alipay-dark', 'alipay', 'amazon-dark', 'amazon', 'americanexpress-dark', 'americanexpress', 'applepay-dark', 'applepay', 'bancontact-dark', 'bancontact', 'bitcoin-dark', 'bitcoin', 'bitpay-dark', 'bitpay', 'cirrus-dark', 'cirrus', 'clickandbuy-dark', 'clickandbuy', 'coinkite-dark', 'coinkite', 'dinersclub-dark', 'dinersclub', 'directdebit-dark', 'directdebit', 'discover-dark', 'discover', 'dwolla-dark', 'dwolla', 'ebay-dark', 'ebay', 'eway-dark', 'eway', 'giropay-dark', 'giropay', 'googlewallet-dark', 'googlewallet', 'ingenico-dark', 'ingenico', 'jcb-dark', 'jcb', 'klarna-dark', 'klarna', 'laser-dark', 'laser', 'maestro-dark', 'maestro', 'mastercard-dark', 'mastercard', 'monero-dark', 'monero', 'neteller-dark', 'neteller', 'ogone-dark', 'ogone', 'okpay-dark', 'okpay', 'paybox-dark', 'paybox', 'paymill-dark', 'paymill', 'payone-dark', 'payone', 'payoneer-dark', 'payoneer', 'paypal-dark', 'paypal', 'paysafecard-dark', 'paysafecard', 'payu-dark', 'payu', 'payza-dark', 'payza', 'ripple-dark', 'ripple', 'sage-dark', 'sage', 'sepa-dark', 'sepa', 'shopify-dark', 'shopify', 'skrill-dark', 'skrill', 'solo-dark', 'solo', 'square-dark', 'square', 'stripe-dark', 'stripe', 'switch-dark', 'switch', 'ukash-dark', 'ukash', 'unionpay-dark', 'unionpay', 'verifone-dark', 'verifone', 'verisign-dark', 'verisign', 'visa-dark', 'visa', 'webmoney-dark', 'webmoney', 'westernunion-dark', 'westernunion', 'worldpay-dark', 'worldpay'); .payment { - width: 2.5rem; - height: 1.5rem; - display: inline-block; - background: no-repeat center/100% 100%; - vertical-align: bottom; - font-style: normal; - box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1); - border-radius: 2px; - + width: 2rem * 1.66666; + height: 2rem; + display: inline-block; + background: no-repeat center/100% 100%; + vertical-align: bottom; + font-style: normal; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1); + border-radius: 2px; } @each $payment in $payment-icons { - .payment-#{$payment} { + .payment-provider-#{$payment} { background-image: url("#{$assets-base}/img/payments/#{$payment}.svg"); - } + } } @each $payment-size, $size in $payment-sizes { - .payment-size-#{$payment-size} { - width: $size * 1.66666; - height: $size; - } + .payment-#{$payment-size} { + width: $size * 1.66666; + height: $size; + } } diff --git a/scss/ui/forms/_form-colorinput.scss b/scss/ui/forms/_form-colorinput.scss index f46482235..6c56ee1b5 100644 --- a/scss/ui/forms/_form-colorinput.scss +++ b/scss/ui/forms/_form-colorinput.scss @@ -1,7 +1,7 @@ /* Color Input */ -.colorinput { +.form-colorinput { position: relative; display: inline-block; margin: 0; @@ -9,13 +9,13 @@ Color Input cursor: pointer; } -.colorinput-input { +.form-colorinput-input { position: absolute; z-index: -1; opacity: 0; } -.colorinput-color { +.form-colorinput-color { display: block; width: 1.5rem; height: 1.5rem; @@ -36,12 +36,12 @@ Color Input opacity: 0; transition: .3s opacity; - .colorinput-input:checked ~ & { + .form-colorinput-input:checked ~ & { opacity: 1; } } - .colorinput-input:focus ~ & { + .form-colorinput-input:focus ~ & { border-color: $primary; box-shadow: $input-btn-focus-box-shadow; } diff --git a/scss/ui/forms/_form-imagecheck.scss b/scss/ui/forms/_form-imagecheck.scss index 5e190ab54..2cd104900 100644 --- a/scss/ui/forms/_form-imagecheck.scss +++ b/scss/ui/forms/_form-imagecheck.scss @@ -1,19 +1,19 @@ /** Image check */ -.imagecheck { +.form-imagecheck { position: relative; margin: 0; cursor: pointer; } -.imagecheck-input { +.form-imagecheck-input { position: absolute; z-index: -1; opacity: 0; } -.imagecheck-figure { +.form-imagecheck-figure { position: relative; display: flex; margin: 0; @@ -21,12 +21,12 @@ Image check border: 1px solid $border-color; border-radius: 3px; - .imagecheck-input:focus ~ & { + .form-imagecheck-input:focus ~ & { border-color: $primary; box-shadow: $input-btn-focus-box-shadow; } - .imagecheck-input:checked ~ & { + .form-imagecheck-input:checked ~ & { border-color: $border-color; } @@ -47,7 +47,7 @@ Image check border-radius: 3px; transition: .3s opacity; - .imagecheck-input:checked ~ & { + .form-imagecheck-input:checked ~ & { background-color: $form-check-input-checked-bg-color; background-image: escape-svg($form-check-input-checked-bg-image); background-repeat: $form-check-input-checked-bg-repeat; @@ -58,7 +58,7 @@ Image check } } -.imagecheck-image { +.form-imagecheck-image { max-width: 100%; opacity: .64; transition: .3s opacity; @@ -73,23 +73,23 @@ Image check border-bottom-left-radius: 2px; } - .imagecheck:hover &, - .imagecheck-input:focus ~ .imagecheck-figure &, - .imagecheck-input:checked ~ .imagecheck-figure & { + .form-imagecheck:hover &, + .form-imagecheck-input:focus ~ .form-imagecheck-figure &, + .form-imagecheck-input:checked ~ .form-imagecheck-figure & { opacity: 1; } } -.imagecheck-caption { +.form-imagecheck-caption { padding: .25rem; font-size: $font-size-sm; color: $text-muted; text-align: center; transition: .3s color; - .imagecheck:hover &, - .imagecheck-input:focus ~ .imagecheck-figure &, - .imagecheck-input:checked ~ .imagecheck-figure & { + .form-imagecheck:hover &, + .form-imagecheck-input:focus ~ .form-imagecheck-figure &, + .form-imagecheck-input:checked ~ .form-imagecheck-figure & { color: $body-color; } } diff --git a/scss/ui/forms/_form-selectgroup.scss b/scss/ui/forms/_form-selectgroup.scss index f34cb80e7..0cf420fb4 100644 --- a/scss/ui/forms/_form-selectgroup.scss +++ b/scss/ui/forms/_form-selectgroup.scss @@ -1,66 +1,23 @@ /* -Selectgroup +Select group */ -.selectgroup { +.form-selectgroup { display: inline-flex; + margin: 0 -.5rem -.5rem 0; } -.selectgroup-vertical { +.form-selectgroup-vertical { flex-direction: column; } -.selectgroup-item { +.form-selectgroup-item { + display: block; position: relative; flex-grow: 1; - margin: 0; + margin: 0 .5rem .5rem 0; } -.selectgroup-separated { - margin: 0 -.5rem -.5rem 0; - - .selectgroup-item { - margin: 0 .5rem .5rem 0; - } -} - -.selectgroup:not(.selectgroup-vertical):not(.selectgroup-separated) > .selectgroup-item { - & + .selectgroup-item { - margin-left: -1px; - } - - &:not(:first-child) .selectgroup-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) .selectgroup-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } -} - -.selectgroup-vertical:not(.selectgroup-separated) > .selectgroup-item { - &:not(:last-child) { - margin-bottom: 0; - } - - & + .selectgroup-item { - margin-top: -1px; - margin-left: 0; - } - - &:not(:first-child) .selectgroup-button { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - &:not(:last-child) .selectgroup-button { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } -} - -.selectgroup-input { +.form-selectgroup-input { position: absolute; top: 0; left: 0; @@ -68,11 +25,11 @@ Selectgroup opacity: 0; } -.selectgroup-button { +.form-selectgroup-box { position: relative; display: block; min-width: $input-height; - padding: $input-btn-padding-y 1rem; + padding: $input-btn-padding-y $input-btn-padding-x; font-size: $input-btn-font-size; line-height: $input-line-height; color: $text-muted; @@ -82,31 +39,102 @@ Selectgroup background: rgba(#fff, .064); border: 1px solid $input-border-color; border-radius: 3px; + transition: border-color .3s, background .3s, color .3s; + + .icon:only-child { + margin: 0 -.25rem; + } + + &:hover { + color: $body-color; + } } -.selectgroup-input:checked + .selectgroup-button { +.form-selectgroup-check { + display: inline-block; + width: $form-check-input-width; + height: $form-check-input-width; + border: $form-check-input-border; + vertical-align: middle; + + .form-selectgroup-input[type="checkbox"] + .form-selectgroup-box & { + border-radius: $form-check-input-border-radius; + } + + .form-selectgroup-input[type="radio"] + .form-selectgroup-box & { + border-radius: $form-check-radio-border-radius; + } + + .form-selectgroup-input:checked + .form-selectgroup-box & { + background-color: $form-check-input-checked-bg-color; + background-repeat: $form-check-input-checked-bg-repeat; + background-position: $form-check-input-checked-bg-position; + background-size: $form-check-input-checked-bg-size; + border-color: $form-check-input-checked-border-color; + } + + .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-box & { + background-image: escape-svg($form-check-input-checked-bg-image); + } + + .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-box & { + background-image: escape-svg($form-check-radio-checked-bg-image); + } +} + +.form-selectgroup-input:checked + .form-selectgroup-box { z-index: 1; color: $primary; - background: rgba($primary, .08); - border-color: $primary; + background: rgba($primary, .04); + border-color: $input-focus-border-color; + box-shadow: 0 1px 1px 0 rgba($primary, .2); } -.selectgroup-input:focus + .selectgroup-button { +.form-selectgroup-input:focus + .form-selectgroup-box { z-index: 2; color: $primary; - border-color: $primary; + border-color: $input-focus-border-color; box-shadow: $input-btn-focus-box-shadow; } -.selectgroup-pills { +/** +Alternate version of form select group + */ +.form-selectgroup-boxes { + .form-selectgroup-box { + text-align: left; + padding: $card-spacer-x $card-spacer-y; + color: inherit; + } + + .form-selectgroup-box-content { + opacity: .64; + transition: .3s opacity; + } + + .form-selectgroup-input:checked { + + .form-selectgroup-box { + color: $body-color; + + .form-selectgroup-box-content { + opacity: 1; + } + } + } +} + +/** +Select group + */ +.form-selectgroup-pills { flex-wrap: wrap; align-items: flex-start; - .selectgroup-item { + .form-selectgroup-item { flex-grow: 0; } - .selectgroup-button { + .form-selectgroup-box { border-radius: 50px; } }