Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

form elements, flags, payments refactoring

Browse Source
This commit is contained in:
codecalm
2020-01-10 20:55:55 +01:00
parent d1711c8194
commit 2d0ccfd551
25 changed files with 368 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/_data/menu.yml
View File

@@ -174,6 +174,9 @@ docs:
progress:
title: Progress
url: docs/progress.html
payments:
title: Payments
url: docs/payments.html
ribbons:
title: Ribbons
badge: New

6
pages/_docs/flags.md
View File

@@ -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 %}

3
pages/_docs/payments.md
View File

@@ -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,
<td>{{ payment.name }}</td>
</tr>
{% endfor %}
</table>
</table>

33
pages/_includes/cards/configuration.html Normal file
View File

@@ -0,0 +1,33 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
Configuration
</h3>
<div class="card-actions">
<a href="#">
Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %}
</a>
</div>
</div>
<div class="card-body">
<dl class="row">
<dt class="col-5">Date:</dt>
<dd class="col-7">2020-01-05 16:42:29 UTC</dd>
<dt class="col-5">Account:</dt>
<dd class="col-7">tabler</dd>
<dt class="col-5">Location:</dt>
<dd class="col-7">{% include ui/flag.html flag="pl" %} Poland</dd>
<dt class="col-5">IP Address:</dt>
<dd class="col-7">46.113.11.3</dd>
<dt class="col-5">Operating system:</dt>
<dd class="col-7">OS X 10.15.2 64-bit</dd>
<dt class="col-5">Browser:</dt>
<dd class="col-7">Chrome</dd>
</dl>
</div>
</div>

5
pages/_includes/forms/form-elements-4.html
View File

@@ -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 %}

1
pages/_includes/forms/form-elements-6.html
View File

@@ -1,4 +1,3 @@
{% include parts/input-selectgroups.html %}
{% include parts/input-datalist.html %}
{% include parts/input-sizes.html %}
{% include parts/input-range.html %}

24
pages/_includes/parts/form-payments.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Payment method</label>
{% assign items = "visa,mastercard,paypal" | split: ',' %}
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for item in items %}
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index == 2 %} 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>
<span class="payment payment-provider-{{ item }} payment-sm mr-2"></span>
{% if forloop.index >= 2 %}
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>
{% endif %}
</div>
</div>
</label>
{% endfor %}
</div>
</div>

24
pages/_includes/parts/form-project-manager.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Project Manager</label>
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for person in site.data.people limit: 5 %}
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="{{ person.id }}" class="form-selectgroup-input" {%
if forloop.index== 2 %} 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 d-flex align-items-center">
{% include ui/avatar.html person=person class="mr-3" %}
<div class="lh-sm">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>
</div>
</div>
</label>
{% endfor %}
</div>
</div>

6
pages/_includes/parts/input-color.html
View File

@@ -3,9 +3,9 @@
<div class="row row-xs">
{% for color in site.colors limit: 10 %}
<div class="col-auto">
<label class="colorinput">
<input name="color" type="checkbox" value="{{ color[0] }}" class="colorinput-input" {% if forloop.index== 2 %} checked{% endif %}/>
<span class="colorinput-color bg-{{ color[0] }}"></span>
<label class="form-colorinput">
<input name="color" type="checkbox" value="{{ color[0] }}" class="form-colorinput-input" {% if forloop.index== 2 %} checked{% endif %}/>
<span class="form-colorinput-color bg-{{ color[0] }}"></span>
</label>
</div>
{% endfor %}

8
pages/_includes/parts/input-image.html
View File

@@ -4,10 +4,10 @@
<div class="row row-xs">
{% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure">
<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="" class="imagecheck-image">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="form-imagecheck-figure">
<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="" class="form-imagecheck-image">
</span>
</label>
</div>

14
pages/_includes/parts/input-selectgroups.html
View File

@@ -1,18 +1,20 @@
<div class="mb-3">
<label class="form-label">Shipping methods</label>
{% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
<label class="form-label">Your skills</label>
{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
</div>
<div class="mb-3">
<label class="form-label">Icons input</label>
{% include ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
<label class="form-label">Shipping methods</label>
{% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="form-selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="mb-3">
<label class="form-label">Your skills</label>
{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
<label class="form-label">Icon input</label>
{% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
</div>

2
pages/_includes/ui/flag.html
View File

@@ -1 +1 @@
<span class="flag flag-{{ include.flag | default: 'uk' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>
<span class="flag{% if include['size'] %} flag-{{ include.size }}{% endif %} flag-country-{{ include.flag | default: 'pl' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>

8
pages/_includes/ui/form/input-selectgroup.html
View File

@@ -2,12 +2,12 @@
{% assign default = include.default | default: values[0] %}
{% assign type = include.type | default: "checkbox" %}
{% assign name = include.name | default: "name" %}
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
<div class="form-selectgroup{% if include.class %} {{ include.class }}{% endif %}">
{% for value in values %}
<label class="selectgroup-item">
<label class="form-selectgroup-item">
{% assign s = value | split: "i:" %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="form-selectgroup-box">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
</label>
{% endfor %}
</div>

4
pages/_includes/ui/form/selectize.html
View File

@@ -31,10 +31,10 @@
{% if key == "countries" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
}
}
{% elsif key == "people" %}

2
pages/_includes/ui/payment.html
View File

@@ -1 +1 @@
<span class="payment payment-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}{% if include.['size'] %} payment-size-{{include.size}}{% endif %}"></span>
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}"></span>

97
pages/tmp.html
View File

@@ -4,59 +4,58 @@ menu: a.b.c
---
<div class="row">
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
</div>
{% for chart in site.data.charts %}
{% if chart[1].demo %}
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
{% assign chart-id = chart[0] %}
<p>{{ chart-id }}</p>
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% for chart in site.data.charts %}
{% if chart[1].demo %}
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
{% assign chart-id = chart[0] %}
<p>{{ chart-id }}</p>
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8"></div>
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-md-6">
{% include cards/user-info.html %}
{% include cards/users-list-2.html %}
<div class="col-md-6">
{% include cards/user-info.html %}
{% include cards/users-list-2.html %}
<div class="card">
<div class="card-body">
<div>{% include ui/stars.html %}</div>
<div>{% include ui/stars.html count=3 %}</div>
<div>{% include ui/stars.html color="red" %}</div>
<div>{% include ui/stars.html filled=true %}</div>
<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
</div>
</div>
</div>
<div class="col-md-6">
{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
</div>
<div class="card">
<div class="card-body">
<div>{% include ui/stars.html %}</div>
<div>{% include ui/stars.html count=3 %}</div>
<div>{% include ui/stars.html color="red" %}</div>
<div>{% include ui/stars.html filled=true %}</div>
<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
</div>
</div>
</div>
<div class="col-md-6">
{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
</div>
</div>

77
pages/tmp2.html
View File

@@ -2,45 +2,64 @@
page-title: Search results
---
{% include ui/button.html color="primary" icon="plus" icon-only=true class="btn-floating" size="lg" %}
<div class="row">
<div class="col-4">
<div class="col-8">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Configuration
</h3>
<div class="card-actions">
<a href="#">
Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %}
</a>
</div>
</div>
<div class="card-body">
<dl class="row">
<dt class="col-5">Date:</dt>
<dd class="col-7">2020-01-05 16:42:29 UTC</dd>
<div>
{% assign items = "HTML,CSS,JavaScript,Ruby,GraphSQL" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<span class="form-selectgroup-box">
{{ item }}
</span>
</label>
{% endfor %}
</div>
</div>
<dt class="col-5">Account:</dt>
<dd class="col-7">tabler</dd>
<div class="mt-4">
{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<div class="form-selectgroup-box">
{% include ui/icon.html icon=item class="mr-1" %}
<span>{{ item }}</span>
</div>
</label>
{% endfor %}
</div>
</div>
<dt class="col-5">Location:</dt>
<dd class="col-7">{% include ui/flag.html flag="pl" %} Poland</dd>
<div class="mt-4">
{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<div class="form-selectgroup-box">
{% include ui/icon.html icon=item %}
</div>
</label>
{% endfor %}
</div>
</div>
<dt class="col-5">IP Address:</dt>
<dd class="col-7">46.113.11.3</dd>
<div class="mt-4">
<input type="checkbox" class="form-check-input" checked>
<input type="radio" class="form-check-input" checked> lorem haha
</div>
<dt class="col-5">Operating system:</dt>
<dd class="col-7">OS X 10.15.2 64-bit</dd>
<dt class="col-5">Browser:</dt>
<dd class="col-7">Chrome</dd>
</dl>
</div>
</div>
</div>
<div class="col">
{% include cards/configuration.html %}
</div>
</div>

60
pages/tmp4.html
View File

@@ -4,35 +4,35 @@ libs: countup
---
<div class="card">
<div class="card-header">
<h2 class="card-title">CountUp</h2>
</div>
<div class="card-header">
<h2 class="card-title">CountUp</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup>30000</h1>
<small>(Default)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
<small>(Duration 10s)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
<small>(No comma)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
<small>(Space)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
<small>(Suffix)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
<small>(Prefix)</small>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup>30000</h1>
<small>(Default)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
<small>(Duration 10s)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
<small>(No comma)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
<small>(Space)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
<small>(Suffix)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
<small>(Prefix)</small>
</div>
</div>
</div>
</div>

2
scss/_variables.scss
View File

@@ -355,7 +355,7 @@ $flag-sizes: (
//Payments
$payment-sizes: (
"md": 2rem,
"sm": 1.5rem,
"lg": 3rem,
"xl": 4rem
) !default;

4
scss/ui/_flags.scss
View File

@@ -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;
}

2
scss/ui/_forms.scss
View File

@@ -12,8 +12,6 @@ textarea {
}
.form-control {
vertical-align: middle;
&:-webkit-autofill {
box-shadow: 0 0 0 1000px #fff inset;
}

29
scss/ui/_payments.scss
View File

@@ -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;
}
}

10
scss/ui/forms/_form-colorinput.scss
View File

@@ -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;
}

28
scss/ui/forms/_form-imagecheck.scss
View File

@@ -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;
}
}

150
scss/ui/forms/_form-selectgroup.scss
View File

@@ -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;
}
}