diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_radio.scss | 9 | ||||
-rw-r--r-- | src/objects/_switch.scss | 10 |
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 | } |