@apolitical/component-library 2.1.0 → 2.1.1
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/context/global/global.providers.d.ts +2 -1
- package/form/components/form/components/fields/checkbox/checkbox.d.ts +5 -0
- package/form/components/form/components/fields/dropdown-menu/dropdown-menu.d.ts +1 -1
- package/form/components/form/components/fields/input/input.d.ts +5 -0
- package/form/components/form/form.types.d.ts +11 -0
- package/general/image-container/image-container.d.ts +12 -0
- package/general/image-container/index.d.ts +1 -0
- package/general/index.d.ts +2 -0
- package/general/return-to-nav-button/index.d.ts +1 -0
- package/general/return-to-nav-button/return-to-nav-button.d.ts +9 -0
- package/index.js +19 -19
- package/index.mjs +2070 -1937
- package/package.json +1 -1
- package/style.css +1 -1
- package/styles/base/_accessibility.scss +1 -4
- package/styles/base/form/_checkbox.scss +53 -0
- package/styles/base/form/_index.scss +1 -1
- package/styles/mixins/_accessibility.scss +6 -0
- package/styles/mixins/_index.scss +2 -2
- package/styles/variables/colors/theme/_form.scss +5 -0
- package/styles/variables/colors/theme/_general.scss +5 -0
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@import '@/styles/functions', '@/styles/mixins', '@/styles/variables';
|
|
2
|
+
|
|
3
|
+
$pretty-checkbox: (
|
|
4
|
+
'width': 24,
|
|
5
|
+
'border': 1,
|
|
6
|
+
'border-radius': 4,
|
|
7
|
+
'tick-width': 11,
|
|
8
|
+
'tick-height': 8,
|
|
9
|
+
'top': 4,
|
|
10
|
+
'margin-top': -4,
|
|
11
|
+
'margin-left': -5.5,
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
@layer components {
|
|
15
|
+
.pretty-checkbox {
|
|
16
|
+
width: px-to-rem(get-map($pretty-checkbox, 'width'));
|
|
17
|
+
height: px-to-rem(get-map($pretty-checkbox, 'width'));
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: px-to-rem(get-map($pretty-checkbox, 'top'));
|
|
20
|
+
left: 0;
|
|
21
|
+
border: px-to-rem(get-map($pretty-checkbox, 'border')) solid
|
|
22
|
+
get-map($theme, 'form_field_border');
|
|
23
|
+
border-radius: px-to-rem(get-map($pretty-checkbox, 'border-radius'));
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
outline: none;
|
|
26
|
+
z-index: 10;
|
|
27
|
+
|
|
28
|
+
input:focus + &,
|
|
29
|
+
button:focus & {
|
|
30
|
+
box-shadow: $outline get-map($theme, 'default_focus');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
input:checked + &,
|
|
34
|
+
.selected & {
|
|
35
|
+
background: get-map($theme, 'form_checkbox_bg');
|
|
36
|
+
border-color: get-map($theme, 'form_checkbox_border');
|
|
37
|
+
|
|
38
|
+
&::before {
|
|
39
|
+
@include image('icons/tick.svg', true);
|
|
40
|
+
|
|
41
|
+
content: '';
|
|
42
|
+
width: px-to-rem(get-map($pretty-checkbox, 'tick-width'));
|
|
43
|
+
height: px-to-rem(get-map($pretty-checkbox, 'tick-height'));
|
|
44
|
+
background: get-map($theme, 'form_checkbox_icon');
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 50%;
|
|
47
|
+
left: 50%;
|
|
48
|
+
margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
|
|
49
|
+
margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import 'fields', 'form', 'labels', 'search-button';
|
|
1
|
+
@import 'checkbox', 'fields', 'form', 'labels', 'search-button';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import 'animations', 'backgrounds', 'breakpoints', 'browsers',
|
|
2
|
-
'selectors', 'styles', 'transitions';
|
|
1
|
+
@import 'accessibility', 'animations', 'backgrounds', 'breakpoints', 'browsers',
|
|
2
|
+
'containers', 'queries', 'selectors', 'styles', 'transitions';
|
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
$c: $default-colors;
|
|
5
5
|
$form: (
|
|
6
|
+
dropdown_menu_border_top: get-map($c, 'n500'),
|
|
7
|
+
dropdown_action_bar_color: get-map($c, 'n600'),
|
|
8
|
+
dropdown_action_bar_button_color: get-map($c, 'n700'),
|
|
9
|
+
dropdown_action_bar_button_color_active_focus_hover: get-map($c, 'b700'),
|
|
10
|
+
dropdown_action_bar_button_color_active_focus_hover_override: get-map($c, 'white'),
|
|
6
11
|
invite_form_border_focus: get-map($c, 'b500'),
|
|
7
12
|
invite_form_shadow: get-map($c, 'b100'),
|
|
8
13
|
invite_form_remove_email_button: get-map($c, 'n700'),
|
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
$c: $default-colors;
|
|
6
6
|
$general: (
|
|
7
|
+
image_container_bg: get-map($c, 'n50'),
|
|
8
|
+
image_container_bg_empty: get-map($c, 'white'),
|
|
9
|
+
return_to_nav_box_shadow: get-map($c, 'black'),
|
|
10
|
+
return_to_nav_bg_focus_active: get-map($c, 'white'),
|
|
11
|
+
return_to_nav_bg_before_after: get-map($c, 'b700'),
|
|
7
12
|
tooltip: get-map($c, 'white'),
|
|
8
13
|
tooltip_bg: color.adjust(get-map($c, 'n900'), $alpha: -0.1),
|
|
9
14
|
);
|