@aotearoan/neon 11.0.3 → 11.0.5
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.
- package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js +1 -1
- package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js.map +1 -1
- package/dist/components/user-input/toggle/NeonToggle.vue.es.js +14 -13
- package/dist/components/user-input/toggle/NeonToggle.vue.es.js.map +1 -1
- package/package.json +1 -1
- package/src/sass/components/_button.scss +1 -4
- package/src/sass/components/_toggle.scss +8 -1
- package/src/sass/includes/_toggle-mixins.scss +6 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const t=require("./NeonToggle.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-checked","aria-disabled","tabindex","onKeydown"],i=["checked","disabled","name","value","onClick"],c={key:0,class:"neon-toggle__radio-button"},g={key:0,class:"neon-toggle__radio-button-indicator"},b={key:2};function u(l,o,m,y,_,h){const d=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-toggle--${l.toggleStyle}`,`neon-toggle--${l.disabled?"low-contrast":l.color}`,`neon-toggle--${l.orientation}`,`neon-toggle--${l.size}`,{"neon-toggle--disabled":l.disabled}],"neon-toggle"]),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,n=>(e.openBlock(),e.createElementBlock("label",{key:n.key,"aria-checked":n.key===l.modelValue,"aria-disabled":l.disabled||n.disabled,class:e.normalizeClass([{"neon-toggle__label--disabled":l.disabled||n.disabled,"neon-toggle__label--checked":n.key===l.modelValue,"neon-toggle__label--with-icon":n.icon,"neon-toggle__label--with-text":n.label},"neon-toggle__label no-style"]),tabindex:!l.disabled&&!n.disabled?0:void 0,role:"radio",onKeydown:[e.withKeys(a=>l.selectOption(n),["enter"]),e.withKeys(a=>l.selectOption(n),["space"])],onKeypress:o[0]||(o[0]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["space"]))},[e.createElementVNode("input",e.mergeProps({checked:n.key===l.modelValue,disabled:l.disabled||n.disabled,name:l.name,tabindex:-1,value:n.key,class:"neon-toggle__input",type:"radio"},l.sanitizedAttributes,{onClick:a=>l.onInput(n.key)}),null,16,i),l.toggleStyle==="radio-buttons"?(e.openBlock(),e.createElementBlock("div",c,[n.key===l.modelValue?(e.openBlock(),e.createElementBlock("div",g)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),n.icon?(e.openBlock(),e.createBlock(d,{key:1,disabled:l.disabled||n.disabled,name:n.icon},null,8,["disabled","name"])):e.createCommentVNode("",!0),n.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)],42,r))),128))],2)}const k=s(t,[["render",u]]);module.exports=k;
|
|
2
2
|
//# sourceMappingURL=NeonToggle.vue.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-toggle--${toggleStyle}`,\n `neon-toggle--${disabled ? 'low-contrast' : color}`,\n `neon-toggle--${orientation}`,\n `neon-toggle--${size}`,\n { 'neon-toggle--disabled': disabled },\n ]\"\n class=\"neon-toggle\"\n role=\"radiogroup\"\n >\n <label\n v-for=\"option in model\"\n :key=\"option.key\"\n :aria-checked=\"option.key === modelValue\"\n :aria-disabled=\"disabled || option.disabled\"\n :class=\"{\n 'neon-toggle__label--disabled': disabled || option.disabled,\n 'neon-toggle__label--checked': option.key === modelValue,\n 'neon-toggle__label--with-icon': option.icon,\n }\"\n :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n class=\"neon-toggle__label no-style\"\n role=\"radio\"\n @keydown.enter=\"selectOption(option)\"\n @keydown.space=\"selectOption(option)\"\n @keypress.space.prevent=\"\"\n >\n <input\n :checked=\"option.key === modelValue\"\n :disabled=\"disabled || option.disabled\"\n :name=\"name\"\n :tabindex=\"-1\"\n :value=\"option.key\"\n class=\"neon-toggle__input\"\n type=\"radio\"\n v-bind=\"sanitizedAttributes\"\n @click=\"onInput(option.key)\"\n />\n <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n </div>\n <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n <span v-if=\"option.label\">{{ option.label }}</span>\n </label>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_hoisted_3","_hoisted_4","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_Fragment","_renderList","option","_openBlock","_withKeys","_cache","_withModifiers","_createElementVNode","_mergeProps","$event","_hoisted_2","_createBlock","_component_neon_icon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-toggle--${toggleStyle}`,\n `neon-toggle--${disabled ? 'low-contrast' : color}`,\n `neon-toggle--${orientation}`,\n `neon-toggle--${size}`,\n { 'neon-toggle--disabled': disabled },\n ]\"\n class=\"neon-toggle\"\n role=\"radiogroup\"\n >\n <label\n v-for=\"option in model\"\n :key=\"option.key\"\n :aria-checked=\"option.key === modelValue\"\n :aria-disabled=\"disabled || option.disabled\"\n :class=\"{\n 'neon-toggle__label--disabled': disabled || option.disabled,\n 'neon-toggle__label--checked': option.key === modelValue,\n 'neon-toggle__label--with-icon': option.icon,\n 'neon-toggle__label--with-text': option.label,\n }\"\n :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n class=\"neon-toggle__label no-style\"\n role=\"radio\"\n @keydown.enter=\"selectOption(option)\"\n @keydown.space=\"selectOption(option)\"\n @keypress.space.prevent=\"\"\n >\n <input\n :checked=\"option.key === modelValue\"\n :disabled=\"disabled || option.disabled\"\n :name=\"name\"\n :tabindex=\"-1\"\n :value=\"option.key\"\n class=\"neon-toggle__input\"\n type=\"radio\"\n v-bind=\"sanitizedAttributes\"\n @click=\"onInput(option.key)\"\n />\n <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n </div>\n <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n <span v-if=\"option.label\">{{ option.label }}</span>\n </label>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_hoisted_3","_hoisted_4","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_Fragment","_renderList","option","_openBlock","_withKeys","_cache","_withModifiers","_createElementVNode","_mergeProps","$event","_hoisted_2","_createBlock","_component_neon_icon"],"mappings":"iPAyCkDA,EAAiC,0CACrCC,EAA2C,8FAKjFC,EAAA,iBAAA,WAAA,uBA7CuCC,EAAA,mBAAA,MAAA,CAA0B,MAAAC,EAAA,eAAA,CAAA,iBAA2DC,EAAW,8BAA0BA,EAAI,SAAA,eAAAA,EAAA,wDAOtJA,EAAA,OACnB,CAAI,wBAAaA,EAAA,QAAA,oDAIH,EAAC,EAAGF,EAAAA,mBAAAG,EAAA,SAAA,KAAAC,EAAAA,WAAAF,EAAA,MAAAG,IACfC,EAAc,UAAA,EAAAN,EAAyB,mBAAA,QAAA,CACvC,IAAAK,EAAA,IACA,eAAKA,EAAA,MAAAH,EAAA,uCAAoDG,EAAA,kCAAgI,+BAAAH,EAAA,UAAWG,EAAA,SAA2C,8BAAAA,EAAA,MAAYH,EAAA,2CAOzNG,EAAA,KADlC,kCAA+B,KAEhC,EAAA,6BAAY,CAAA,EACX,SAAO,CAAAH,EAAA,UAAA,CAAAG,EAAA,SAAA,EAAA,OAAQ,KAAA,QACA,UAAA,4CACfE,4CAED,WAAAC,EAAA,CAUE,MAAA,CAAA,EAAAD,EAAA,SAAAE,EAAA,cAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EATC,EAAA,CACAC,EAAU,mBAAA,QAAYC,aAAe,CACrC,QAAUN,EAAA,MAAAH,EAAA,WACV,SAAUA,EAAE,UAAAG,EAAA,SACZ,KAAKH,EAAQ,KACd,SAA0B,GAC1B,MAAYG,EAAA,UACe,qBAC1B,KAAA,gCAEmB,QAAAO,GAAAV,EAAA,QAAAG,EAAA,GAAA,CAAtB,CAAA,EAAA,KAAA,GAAAQ,CAAA,kBAC4B,iBAA1BP,EAAAA,YAAAN,EAAAA,mBAAA,QAAwF,+FAEzE,CAAA,KAA2E,mBAAA,GAAA,EAAA,UAA7DM,YAAU,EAAAQ,EAAY,YAAAC,EAAe,CAAG,IAAI,6CAC/D,EAAM,KAAM,EAAA,CAAA,WAAA,MAAA,CAAA,KAA2B,mBAAA,GAAA,EAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import g from "./NeonToggle.es.js";
|
|
2
|
-
import { resolveComponent as b, openBlock as n, createElementBlock as
|
|
2
|
+
import { resolveComponent as b, openBlock as n, createElementBlock as a, normalizeClass as t, Fragment as u, renderList as c, withKeys as o, withModifiers as m, createElementVNode as k, mergeProps as y, createCommentVNode as d, createBlock as h, toDisplayString as _ } from "vue";
|
|
3
3
|
import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
4
|
const f = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], v = ["checked", "disabled", "name", "value", "onClick"], p = {
|
|
5
5
|
key: 0,
|
|
@@ -9,9 +9,9 @@ const f = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], v = ["chec
|
|
|
9
9
|
class: "neon-toggle__radio-button-indicator"
|
|
10
10
|
}, V = { key: 2 };
|
|
11
11
|
function C(e, s, K, z, B, N) {
|
|
12
|
-
const
|
|
13
|
-
return n(),
|
|
14
|
-
class:
|
|
12
|
+
const r = b("neon-icon");
|
|
13
|
+
return n(), a("div", {
|
|
14
|
+
class: t([[
|
|
15
15
|
`neon-toggle--${e.toggleStyle}`,
|
|
16
16
|
`neon-toggle--${e.disabled ? "low-contrast" : e.color}`,
|
|
17
17
|
`neon-toggle--${e.orientation}`,
|
|
@@ -20,14 +20,15 @@ function C(e, s, K, z, B, N) {
|
|
|
20
20
|
], "neon-toggle"]),
|
|
21
21
|
role: "radiogroup"
|
|
22
22
|
}, [
|
|
23
|
-
(n(!0),
|
|
23
|
+
(n(!0), a(u, null, c(e.model, (l) => (n(), a("label", {
|
|
24
24
|
key: l.key,
|
|
25
25
|
"aria-checked": l.key === e.modelValue,
|
|
26
26
|
"aria-disabled": e.disabled || l.disabled,
|
|
27
|
-
class:
|
|
27
|
+
class: t([{
|
|
28
28
|
"neon-toggle__label--disabled": e.disabled || l.disabled,
|
|
29
29
|
"neon-toggle__label--checked": l.key === e.modelValue,
|
|
30
|
-
"neon-toggle__label--with-icon": l.icon
|
|
30
|
+
"neon-toggle__label--with-icon": l.icon,
|
|
31
|
+
"neon-toggle__label--with-text": l.label
|
|
31
32
|
}, "neon-toggle__label no-style"]),
|
|
32
33
|
tabindex: !e.disabled && !l.disabled ? 0 : void 0,
|
|
33
34
|
role: "radio",
|
|
@@ -49,15 +50,15 @@ function C(e, s, K, z, B, N) {
|
|
|
49
50
|
}, e.sanitizedAttributes, {
|
|
50
51
|
onClick: (i) => e.onInput(l.key)
|
|
51
52
|
}), null, 16, v),
|
|
52
|
-
e.toggleStyle === "radio-buttons" ? (n(),
|
|
53
|
-
l.key === e.modelValue ? (n(),
|
|
54
|
-
])) :
|
|
55
|
-
l.icon ? (n(), h(
|
|
53
|
+
e.toggleStyle === "radio-buttons" ? (n(), a("div", p, [
|
|
54
|
+
l.key === e.modelValue ? (n(), a("div", w)) : d("", !0)
|
|
55
|
+
])) : d("", !0),
|
|
56
|
+
l.icon ? (n(), h(r, {
|
|
56
57
|
key: 1,
|
|
57
58
|
disabled: e.disabled || l.disabled,
|
|
58
59
|
name: l.icon
|
|
59
|
-
}, null, 8, ["disabled", "name"])) :
|
|
60
|
-
l.label ? (n(),
|
|
60
|
+
}, null, 8, ["disabled", "name"])) : d("", !0),
|
|
61
|
+
l.label ? (n(), a("span", V, _(l.label), 1)) : d("", !0)
|
|
61
62
|
], 42, f))), 128))
|
|
62
63
|
], 2);
|
|
63
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-toggle--${toggleStyle}`,\n `neon-toggle--${disabled ? 'low-contrast' : color}`,\n `neon-toggle--${orientation}`,\n `neon-toggle--${size}`,\n { 'neon-toggle--disabled': disabled },\n ]\"\n class=\"neon-toggle\"\n role=\"radiogroup\"\n >\n <label\n v-for=\"option in model\"\n :key=\"option.key\"\n :aria-checked=\"option.key === modelValue\"\n :aria-disabled=\"disabled || option.disabled\"\n :class=\"{\n 'neon-toggle__label--disabled': disabled || option.disabled,\n 'neon-toggle__label--checked': option.key === modelValue,\n 'neon-toggle__label--with-icon': option.icon,\n }\"\n :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n class=\"neon-toggle__label no-style\"\n role=\"radio\"\n @keydown.enter=\"selectOption(option)\"\n @keydown.space=\"selectOption(option)\"\n @keypress.space.prevent=\"\"\n >\n <input\n :checked=\"option.key === modelValue\"\n :disabled=\"disabled || option.disabled\"\n :name=\"name\"\n :tabindex=\"-1\"\n :value=\"option.key\"\n class=\"neon-toggle__input\"\n type=\"radio\"\n v-bind=\"sanitizedAttributes\"\n @click=\"onInput(option.key)\"\n />\n <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n </div>\n <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n <span v-if=\"option.label\">{{ option.label }}</span>\n </label>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_hoisted_3","_hoisted_4","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_Fragment","_renderList","option","_openBlock","_withKeys","_cache","_withModifiers","_createElementVNode","_mergeProps","$event","_hoisted_2","_createBlock","_component_neon_icon"],"mappings":";;;+
|
|
1
|
+
{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-toggle--${toggleStyle}`,\n `neon-toggle--${disabled ? 'low-contrast' : color}`,\n `neon-toggle--${orientation}`,\n `neon-toggle--${size}`,\n { 'neon-toggle--disabled': disabled },\n ]\"\n class=\"neon-toggle\"\n role=\"radiogroup\"\n >\n <label\n v-for=\"option in model\"\n :key=\"option.key\"\n :aria-checked=\"option.key === modelValue\"\n :aria-disabled=\"disabled || option.disabled\"\n :class=\"{\n 'neon-toggle__label--disabled': disabled || option.disabled,\n 'neon-toggle__label--checked': option.key === modelValue,\n 'neon-toggle__label--with-icon': option.icon,\n 'neon-toggle__label--with-text': option.label,\n }\"\n :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n class=\"neon-toggle__label no-style\"\n role=\"radio\"\n @keydown.enter=\"selectOption(option)\"\n @keydown.space=\"selectOption(option)\"\n @keypress.space.prevent=\"\"\n >\n <input\n :checked=\"option.key === modelValue\"\n :disabled=\"disabled || option.disabled\"\n :name=\"name\"\n :tabindex=\"-1\"\n :value=\"option.key\"\n class=\"neon-toggle__input\"\n type=\"radio\"\n v-bind=\"sanitizedAttributes\"\n @click=\"onInput(option.key)\"\n />\n <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n </div>\n <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n <span v-if=\"option.label\">{{ option.label }}</span>\n </label>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_hoisted_3","_hoisted_4","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_Fragment","_renderList","option","_openBlock","_withKeys","_cache","_withModifiers","_createElementVNode","_mergeProps","$event","_hoisted_2","_createBlock","_component_neon_icon"],"mappings":";;;+HAyCkDA,IAAiC;AAAA;;GACrCC,IAA2C;AAAA;;;;YAKjFC,EAAA,WAAA;cA7CuCC,EAAA,OAAA;AAAA,IAA0B,OAAAC,EAAA,CAAA;AAAA,sBAA2DC,EAAW;AAAA,sBAA0BA,EAAI,WAAA,iBAAAA,EAAA;AAAA;sBAOtJA,EAAA;AAAA,MACnB,EAAI,yBAAaA,EAAA,SAAA;AAAA;;;OAIH,EAAC,GAAGF,EAAAG,GAAA,MAAAC,EAAAF,EAAA,OAAA,CAAAG,OACfC,EAAc,GAAAN,EAAyB,SAAA;AAAA,MACvC,KAAAK,EAAA;AAAA,MACA,gBAAKA,EAAA,QAAAH,EAAA;AAAA,qCAAoDG,EAAA;AAAA;QAAgI,gCAAAH,EAAA,YAAWG,EAAA;AAAA,QAA2C,+BAAAA,EAAA,QAAYH,EAAA;AAAA,yCAOzNG,EAAA;AAAA,QADlC,mCAA+B;AAAA,MAEhC,GAAA,6BAAY,CAAA;AAAA,MACX,UAAO,CAAAH,EAAA,YAAA,CAAAG,EAAA,WAAA,IAAA;AAAA,MAAQ,MAAA;AAAA,MACA,WAAA;AAAA;QACfE;;MAED,YAAAC,EAAA,CAUE,QAAA,CAAA,IAAAD,EAAAE,EAAA,MAAA;AAAA,MAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,IATC,GAAA;AAAA,MACAC,EAAU,SAAYC,EAAe;AAAA,QACrC,SAAUN,EAAA,QAAAH,EAAA;AAAA,QACV,UAAUA,EAAE,YAAAG,EAAA;AAAA,QACZ,MAAKH,EAAQ;AAAA,QACd,UAA0B;AAAA,QAC1B,OAAYG,EAAA;AAAA,eACe;AAAA,QAC1B,MAAA;AAAA;QAEmB,SAAA,CAAAO,MAAAV,EAAA,QAAAG,EAAA,GAAA;AAAA,MAAtB,CAAA,GAAA,MAAA,IAAAQ,CAAA;AAAA,wBAC4B,mBAA1BP,KAAAN,EAAA,UAAwF;AAAA;MAEzE,CAAA,OAA2E,IAAA,EAAA;AAAA,gBAA7DM,EAAU,GAAAQ,EAAYC,GAAe;AAAA,QAAG,KAAI;AAAA;;MAC/D,GAAM,MAAM,GAAA,CAAA,YAAA,MAAA,CAAA,OAA2B,IAAA,EAAA;AAAA;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aotearoan/neon",
|
|
3
3
|
"description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
|
|
4
|
-
"version": "11.0.
|
|
4
|
+
"version": "11.0.5",
|
|
5
5
|
"main": "./dist/neon.cjs.js",
|
|
6
6
|
"module": "./dist/neon.es.js",
|
|
7
7
|
"types": "./dist/src/neon.d.ts",
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
&__label {
|
|
15
15
|
user-select: none;
|
|
16
16
|
cursor: pointer;
|
|
17
|
-
padding: calc(2 * var(--neon-base-space)) 0;
|
|
18
17
|
display: flex;
|
|
19
18
|
align-items: center;
|
|
20
19
|
justify-content: center;
|
|
@@ -30,6 +29,10 @@
|
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
&--toggle {
|
|
32
|
+
.neon-toggle__label {
|
|
33
|
+
padding: calc(2 * var(--neon-base-space)) calc(3 * var(--neon-base-space));
|
|
34
|
+
}
|
|
35
|
+
|
|
33
36
|
@include toggle-mixins.toggle-layout;
|
|
34
37
|
|
|
35
38
|
@each $color in palettes.$neon-functional-colors {
|
|
@@ -74,6 +77,10 @@
|
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
&--radio-buttons {
|
|
80
|
+
.neon-toggle__label {
|
|
81
|
+
padding: calc(2 * var(--neon-base-space)) 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
77
84
|
@include toggle-mixins.radio-button-layout;
|
|
78
85
|
|
|
79
86
|
@each $color in palettes.$neon-functional-colors {
|
|
@@ -7,17 +7,20 @@
|
|
|
7
7
|
min-height: var(--neon-size-#{$size});
|
|
8
8
|
height: var(--neon-size-#{$size});
|
|
9
9
|
z-index: var(--neon-z-index-default);
|
|
10
|
+
gap: calc(2 * var(--neon-base-space));
|
|
10
11
|
|
|
11
12
|
&.neon-toggle__label--with-icon {
|
|
12
|
-
width: var(--neon-size-#{$size});
|
|
13
|
-
padding: 0;
|
|
14
|
-
|
|
15
13
|
.neon-icon {
|
|
16
14
|
width: calc(var(--neon-font-size-#{$font-size}) * var(--neon-line-height-one));
|
|
17
15
|
height: calc(var(--neon-font-size-#{$font-size}) * var(--neon-line-height-one));
|
|
18
16
|
}
|
|
19
17
|
}
|
|
20
18
|
|
|
19
|
+
&.neon-toggle__label--with-icon:not(.neon-toggle__label--with-text) {
|
|
20
|
+
width: var(--neon-size-#{$size});
|
|
21
|
+
padding: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
21
24
|
&.neon-toggle__label--checked {
|
|
22
25
|
z-index: var(--neon-z-index-above);
|
|
23
26
|
}
|