@ons/design-system 49.0.0 → 49.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{% macro onsCheckbox(params) %}
|
|
2
2
|
{% from "components/label/_macro.njk" import onsLabel %}
|
|
3
3
|
|
|
4
|
-
<span class="ons-checkbox {{ params.classes }}">
|
|
4
|
+
<span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %} {{ params.classes }}">
|
|
5
5
|
<input
|
|
6
6
|
type="checkbox"
|
|
7
7
|
id="{{ params.id }}"
|
|
8
8
|
class="ons-checkbox__input ons-js-checkbox {{ params.inputClasses }}"
|
|
9
9
|
value="{{ params.value }}"
|
|
10
|
+
{% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
|
|
10
11
|
{% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}
|
|
11
12
|
{% if params.checked is defined and params.checked %} checked{% endif %}
|
|
12
13
|
{% if params.other is defined and params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}
|
|
@@ -30,6 +30,16 @@ $checkbox-padding: 11px;
|
|
|
30
30
|
&:checked {
|
|
31
31
|
background-size: 14px;
|
|
32
32
|
}
|
|
33
|
+
|
|
34
|
+
&:disabled {
|
|
35
|
+
border: 2px solid $color-border-disabled;
|
|
36
|
+
cursor: not-allowed;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:disabled + label {
|
|
40
|
+
color: $color-grey-35;
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
}
|
|
33
43
|
}
|
|
34
44
|
|
|
35
45
|
&--no-border {
|
|
@@ -72,6 +82,34 @@ $checkbox-padding: 11px;
|
|
|
72
82
|
}
|
|
73
83
|
}
|
|
74
84
|
|
|
85
|
+
&--no-label {
|
|
86
|
+
& > .ons-checkbox__input {
|
|
87
|
+
left: auto;
|
|
88
|
+
position: relative;
|
|
89
|
+
top: auto;
|
|
90
|
+
vertical-align: middle;
|
|
91
|
+
|
|
92
|
+
&:checked,
|
|
93
|
+
&:focus {
|
|
94
|
+
background-color: initial;
|
|
95
|
+
|
|
96
|
+
& + .ons-checkbox__label::before {
|
|
97
|
+
background: none;
|
|
98
|
+
border: none;
|
|
99
|
+
box-shadow: none;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:focus {
|
|
104
|
+
box-shadow: 0 0 0 3px $color-focus;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
& + .ons-checkbox__label {
|
|
108
|
+
@extend .ons-u-vh;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
75
113
|
&__label {
|
|
76
114
|
cursor: pointer;
|
|
77
115
|
display: block;
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"name": checkbox.name,
|
|
57
57
|
"value": checkbox.value,
|
|
58
58
|
"checked": childIsChecked if childIsChecked == true else checkbox.checked,
|
|
59
|
+
"disabled": checkbox.disabled,
|
|
59
60
|
"borderless": params.borderless,
|
|
60
61
|
"classes": checkbox.classes | default('') + borderless | default(''),
|
|
61
62
|
"inputClasses": exclusiveClass | default('') + otherClass | default(''),
|