mirror of
https://github.com/tabler/tabler.git
synced 2026-08-01 16:04:37 +04:00
form elements fixes
This commit is contained in:
chomik
@@ -126,126 +126,25 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Size</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">S</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="100" class="selectgroup-input">
|
||||
<span class="selectgroup-button">M</span>
|
||||
</label>
|
||||
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="150" class="selectgroup-input">
|
||||
<span class="selectgroup-button">L</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="200" class="selectgroup-input">
|
||||
<span class="selectgroup-button">XL</span>
|
||||
</label>
|
||||
</div>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Shipping methods</label>
|
||||
<div class="selectgroup selectgroup-vertical w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="shipping" value="unregistered" class="selectgroup-input" checked>
|
||||
<span class="selectgroup-button">Unregistered</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="shipping" value="priority" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Priority Mail</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="shipping" value="express" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Express Mail</span>
|
||||
</label>
|
||||
</div>
|
||||
{% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icons input</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="2" class="selectgroup-input">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="smartphone" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="tablet" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="monitor" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="x" %}</span>
|
||||
</label>
|
||||
</div>
|
||||
{% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icon input</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="sun" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="moon" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="3" class="selectgroup-input">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="cloud-rain" %}</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="4" class="selectgroup-input">
|
||||
<span
|
||||
class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="cloud" %}</span>
|
||||
</label>
|
||||
</div>
|
||||
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your skills</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">HTML</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
|
||||
<span class="selectgroup-button">CSS</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
|
||||
<span class="selectgroup-button">PHP</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
|
||||
<span class="selectgroup-button">JavaScript</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="C++" class="selectgroup-input">
|
||||
<span class="selectgroup-button">C++</span>
|
||||
</label>
|
||||
</div>
|
||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
{% include parts/input-toggle.html %}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
{% assign values = include.values | default: "One,Two,Three" | split: ',' %}
|
||||
{% assign type = include.type | default: "checkbox" %}
|
||||
{% assign name = include.name | default: "name" %}
|
||||
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for value in values %}
|
||||
<label class="selectgroup-item">
|
||||
<input type="{{ type }}" name="input-{{ name }}" value="{{ value }}" class="selectgroup-input"{% if forloop.first %}{% if type == "radio" %} selected{% else %} checked{% endif %}{% endif %}>
|
||||
{% assign s = value | split: "i:" %}
|
||||
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -23,7 +23,7 @@
|
||||
{% include layout/css.html %}
|
||||
{% include layout/js.html %}
|
||||
</head>
|
||||
<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
|
||||
{{ content}}
|
||||
|
||||
|
||||
+1
-1
@@ -34,7 +34,7 @@ body.theme-dark {
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
body.auto-theme-dark {
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,13 +43,13 @@ $dark: #2d3748 !default;
|
||||
$black: #121212 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
$body-bg: #f5f7fb !default;
|
||||
$body-bg: #F8FAFB !default;
|
||||
|
||||
$text-color: #495057 !default;
|
||||
$text-muted: #888e9a !default;
|
||||
$text-muted-light: #adb5bd !default;
|
||||
|
||||
$border-color: rgba(0, 0, 0, 0.08) !default;
|
||||
$border-color: rgba(0, 0, 0, 0.09) !default;
|
||||
|
||||
$social-colors: (
|
||||
"facebook": #3b5998,
|
||||
|
||||
@@ -161,25 +161,20 @@ Selectgroup
|
||||
min-width: $input-height;
|
||||
padding: $input-btn-padding-y 1rem;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.5rem;
|
||||
line-height: $input-line-height;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.selectgroup-button-icon {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
font-size: 1rem;
|
||||
background: rgba(#fff, .064);
|
||||
}
|
||||
|
||||
.selectgroup-input:checked + .selectgroup-button {
|
||||
z-index: 1;
|
||||
color: $primary;
|
||||
background: mix(#fff, $primary, 90%);
|
||||
background: rgba($primary, .08);
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user