summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 07:29:42 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 07:29:42 +0100
commitb00d9282ab75a496cd3b7e6fa40754c05f990482 (patch)
tree48ce5c20003f4c2fda300ac863573b1797c08d17 /src
parentUse LCH colors (diff)
downloadiro-design-b00d9282ab75a496cd3b7e6fa40754c05f990482.tar.gz
iro-design-b00d9282ab75a496cd3b7e6fa40754c05f990482.tar.bz2
iro-design-b00d9282ab75a496cd3b7e6fa40754c05f990482.zip
Improved radio and switch positioning
Diffstat (limited to 'src')
-rw-r--r--src/objects/_radio.scss9
-rw-r--r--src/objects/_switch.scss10
2 files changed, 5 insertions, 14 deletions
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index b27766e..f5f3632 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -52,7 +52,6 @@
52 52
53 @include iro.bem-elem('circle') { 53 @include iro.bem-elem('circle') {
54 display: block; 54 display: block;
55 position: relative;
56 box-sizing: border-box; 55 box-sizing: border-box;
57 flex: 0 0 auto; 56 flex: 0 0 auto;
58 width: fn.dim(--diameter); 57 width: fn.dim(--diameter);
@@ -64,13 +63,11 @@
64 &::after { 63 &::after {
65 content: ''; 64 content: '';
66 display: block; 65 display: block;
67 position: absolute; 66 position: relative;
68 z-index: 10; 67 top: fn.dim(--border-width);
69 top: 50%;
70 left: fn.dim(--border-width); 68 left: fn.dim(--border-width);
71 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); 69 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
72 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); 70 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
73 transform: translateY(-50%);
74 transition: transform .2s ease; 71 transition: transform .2s ease;
75 border-radius: fn.dim(--diameter); 72 border-radius: fn.dim(--diameter);
76 background-color: fn.color(--circle-bg); 73 background-color: fn.color(--circle-bg);
@@ -106,7 +103,7 @@
106 &:checked { 103 &:checked {
107 @include iro.bem-sibling-elem('circle') { 104 @include iro.bem-sibling-elem('circle') {
108 &::after { 105 &::after {
109 transform: translateY(-50%) scale(.44); 106 transform: scale(.44);
110 } 107 }
111 } 108 }
112 } 109 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index cc215a5..4417297 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -56,7 +56,6 @@
56 56
57 @include iro.bem-elem('indicator') { 57 @include iro.bem-elem('indicator') {
58 display: block; 58 display: block;
59 position: relative;
60 box-sizing: border-box; 59 box-sizing: border-box;
61 flex: 0 0 auto; 60 flex: 0 0 auto;
62 width: fn.dim(--width); 61 width: fn.dim(--width);
@@ -69,14 +68,9 @@
69 &::after { 68 &::after {
70 content: ''; 69 content: '';
71 display: block; 70 display: block;
72 position: absolute;
73 z-index: 10;
74 top: 50%;
75 left: 0;
76 width: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); 71 width: calc(fn.dim(--height) - 2 * fn.dim(--border-width));
77 height: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); 72 height: calc(fn.dim(--height) - 2 * fn.dim(--border-width));
78 transform: translateY(-50%); 73 transition: transform .2s ease;
79 transition: left .2s ease;
80 border: fn.dim(--border-width) solid fn.color(--handle-border); 74 border: fn.dim(--border-width) solid fn.color(--handle-border);
81 border-radius: fn.dim(--width); 75 border-radius: fn.dim(--width);
82 background-color: fn.color(--handle-bg); 76 background-color: fn.color(--handle-bg);
@@ -116,7 +110,7 @@
116 background-color: fn.color(--handle-border); 110 background-color: fn.color(--handle-border);
117 111
118 &::after { 112 &::after {
119 left: calc(fn.dim(--width) - fn.dim(--height) + .5px); 113 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
120 border-color: fn.color(--handle-border); 114 border-color: fn.color(--handle-border);
121 } 115 }
122 } 116 }