Skip to content

Commit

Permalink
Merge pull request #149 from FDMediagroep/develop
Browse files Browse the repository at this point in the history 
FD-742 Checkbox
  • Loading branch information
@willemliufdmg
willemliufdmg committed Sep 16, 2020
2 parents 4a59441 + 5093a91 commit 569dc4c
Show file tree
Hide file tree
Showing 15 changed files with 513 additions and 638 deletions.
3 changes: 3 additions & 0 deletions src/components/button/Button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@
@media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
&:active {
transform: scale(0.95);
&.m {
transform: scale(0.98);
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/button/ButtonCta.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@
@media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
&:active {
transform: scale(0.95);
&.m {
transform: scale(0.98);
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/button/ButtonGhost.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@
@media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
&:active {
transform: scale(0.95);
&.m {
transform: scale(0.98);
}
}
}

Expand Down
67 changes: 47 additions & 20 deletions src/components/input/Checkbox.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,16 @@
position: absolute;
&:hover ~ .checkbox:before,
&:focus ~ .checkbox:before {
outline: 1px solid var(--dividers);
outline: 1.5px solid var(--checkbox-outline);
outline-offset: -1.5px;
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
outline: 1px solid #{map-deep-get(
outline: 1.5px solid #{map-deep-get(
$colors,
'colors',
'neutral',
50
'primary',
75
)};
}
}
Expand Down Expand Up @@ -48,47 +49,73 @@
top: 0.25rem;
width: 1rem;
height: 1rem;
border: 0.0625rem solid var(--dividers);
border: 1px solid var(--checkbox-border);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
border: 0.0625rem solid #{map-deep-get(
border: 1px solid #{map-deep-get(
$colors,
'colors',
'neutral',
50
'secondary',
75
)};
}

border-radius: 0.125rem;
border-radius: 2px;
transition: border-color 0.3s;
background-color: #fff;
background-color: var(--checkbox-fill);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'neutral',
100
)};
}
}
&:after {
content: '';
position: absolute;
left: 0.1875rem;
top: 0.5rem;
width: 0.5rem;
height: 0.2rem;
border-left: 0.125rem solid #fff;
border-bottom: 0.125rem solid #fff;
left: 3px;
top: 9px;
width: 8px;
height: 3px;
border-left: 1.5px solid var(--checkbox-check);
border-bottom: 1.5px solid var(--checkbox-check);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
border-left: 1.5px solid #{map-deep-get(
$colors,
'colors',
'primary',
75
)};
border-bottom: 1.5px solid #{map-deep-get(
$colors,
'colors',
'primary',
75
)};
}
opacity: 0;
transition: all 0.3s;
transform: rotate(-45deg);
transform: rotate(-48deg);
}
}
input:checked ~ .checkbox {
&:before {
background-color: var(--input-fill);
background-color: var(--checkbox-fill);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'persoonlijk',
50
'neutral',
100
)};
}
}
Expand Down
43 changes: 21 additions & 22 deletions src/components/input/Radio.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,35 @@
top: 0.25rem;
width: 1rem;
height: 1rem;
border: 0.0625rem solid var(--dividers);
border: 1px solid var(--radio-border);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
border: 1px solid #{map-deep-get(
$colors,
'colors',
'neutral',
50
'secondary',
75
)};
}

transition: border-color 0.3s;
background-color: #fff;
background-color: var(--checkbox-fill);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'neutral',
100
)};
}
border-radius: 50%;
}
&:after {
content: '';
position: absolute;
left: 0.1875rem;
top: 0.5rem;
width: 0.5rem;
height: 0.2rem;
border-left: 0.125rem solid #fff;
border-bottom: 0.125rem solid #fff;
opacity: 0;
transition: all 0.3s;
transform: rotate(-45deg);
Expand All @@ -86,28 +90,23 @@
input:checked ~ .radio {
&:after {
opacity: 1;
background-color: var(--input-fill);
background-color: var(--radio-check);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'persoonlijk',
50
'secondary',
75
)};
}

border: none;
width: 0.75rem;
height: 0.75rem;
left: 0.125rem;
top: 0.375rem;
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
top: 0.38rem;
}
width: 10px;
height: 10px;
left: 3px;
top: 7px;
}
}
}
50 changes: 33 additions & 17 deletions src/components/input/Switch.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
position: relative;
width: 100%;
height: 100%;
width: 2.5rem;
height: 1.5rem;
width: 34px;
height: 20px;
display: inline-block;
margin-right: 0.5rem;
cursor: pointer;
Expand All @@ -36,47 +36,63 @@
position: absolute;
box-sizing: border-box;
transition: border-color 0.3s;
background-color: #fff;
transition: all 0.3s ease-out;
width: 100%;
height: 1rem;
height: 14px;
top: 0.25rem;
border-radius: 0.5rem;
background-color: #f3f3f3;
border-radius: 7px;
background-color: var(--switch-fill);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'neutral',
60
)};
}
}
&:after {
content: '';
position: absolute;
transition: all 0.3s ease-out;
transform: rotate(-45deg);
width: 1.5rem;
height: 1.5rem;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
background-color: #999;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
0 0 1px 0 rgba(0, 0, 0, 0.12);
border-style: solid;
border-width: 0.5px;
border-image-source: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0.06) 20%,
rgba(255, 255, 255, 0)
);
border-image-slice: 1;
background-color: #f1f1f1;
left: 0;
top: 0;
}
}

input:checked ~ .switch {
&:before {
background-color: var(--switch-fill);
background-color: var(--switch-check-fill);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'persoonlijk',
100
'secondary',
25
)};
}

border-radius: 0.5rem;
}
&:after {
left: calc(100% - 1.5rem);
left: calc(100% - 20px);
background-color: var(--switch-active);
// IE11
@media screen and (-ms-high-contrast: active),
Expand Down

1 comment on commit 569dc4c

@vercel
Copy link

@vercel vercel bot commented on 569dc4c Sep 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.