summaryrefslogtreecommitdiffstats
path: root/src/objects/_checkbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_checkbox.scss')
-rw-r--r--src/objects/_checkbox.scss32
1 files changed, 16 insertions, 16 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 412efda..5443354 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: fn.global-dim(--size --175), 7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65), 11 --pad-y: fn.global-dim(--size --65),
12 ), 12 ),
13 ), 'dims'); 13 ), 'dims');
14 14
@@ -56,7 +56,7 @@
56 width: fn.dim(--size); 56 width: fn.dim(--size);
57 height: fn.dim(--size); 57 height: fn.dim(--size);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); 58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
59 border-radius: fn.dim(--border-width); 59 border-radius: fn.dim(--border);
60 background-color: fn.color(--box-border); 60 background-color: fn.color(--box-border);
61 61
62 &::before, 62 &::before,
@@ -68,10 +68,10 @@
68 68
69 &::before { 69 &::before {
70 z-index: 2; 70 z-index: 2;
71 top: fn.dim(--border-width); 71 top: fn.dim(--border);
72 left: fn.dim(--border-width); 72 left: fn.dim(--border);
73 width: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); 73 width: calc(fn.dim(--size) - 2 * fn.dim(--border));
74 height: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); 74 height: calc(fn.dim(--size) - 2 * fn.dim(--border));
75 transition: transform .2s ease; 75 transition: transform .2s ease;
76 background-color: fn.color(--box-bg); 76 background-color: fn.color(--box-bg);
77 } 77 }
@@ -79,9 +79,9 @@
79 &::after { 79 &::after {
80 z-index: 3; 80 z-index: 3;
81 top: calc(.5 * fn.dim(--size) - 1px); 81 top: calc(.5 * fn.dim(--size) - 1px);
82 left: calc(1.5 * fn.dim(--border-width)); 82 left: calc(1.5 * fn.dim(--border));
83 box-sizing: border-box; 83 box-sizing: border-box;
84 width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); 84 width: calc(fn.dim(--size) - 3 * fn.dim(--border));
85 height: 0; 85 height: 0;
86 transform: scale(0); 86 transform: scale(0);
87 transition: transform .2s ease; 87 transition: transform .2s ease;
@@ -96,10 +96,10 @@
96 display: block; 96 display: block;
97 position: absolute; 97 position: absolute;
98 z-index: 2; 98 z-index: 2;
99 top: calc(1 * fn.dim(--border-width)); 99 top: calc(1 * fn.dim(--border));
100 left: calc(1 * fn.dim(--border-width)); 100 left: calc(1 * fn.dim(--border));
101 width: calc(100% - 2 * fn.dim(--border-width)); 101 width: calc(100% - 2 * fn.dim(--border));
102 height: calc(100% - 2 * fn.dim(--border-width)); 102 height: calc(100% - 2 * fn.dim(--border));
103 transform: scale(0); 103 transform: scale(0);
104 transform-origin: 40% 90%; 104 transform-origin: 40% 90%;
105 transition: transform .2s ease; 105 transition: transform .2s ease;