activeadmin_blaze_theme 0.7.0 → 0.7.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +13 -0
  3. data/README.md +30 -8
  4. data/activeadmin_blaze_theme.gemspec +1 -13
  5. data/app/assets/stylesheets/activeadmin_blaze_theme/_contents.scss +1 -0
  6. data/app/assets/stylesheets/activeadmin_blaze_theme/_tables.scss +1 -1
  7. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.colors.scss +30 -0
  8. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.scss +43 -49
  9. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.addresses.scss +12 -0
  10. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.alerts.scss +59 -0
  11. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.avatars.scss +36 -0
  12. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.badges.scss +60 -0
  13. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.breadcrumbs.scss +20 -0
  14. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.bubbles.scss +49 -0
  15. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.buttons.scss +77 -0
  16. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.calendars.scss +69 -0
  17. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.cards.scss +213 -0
  18. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.headings.scss +14 -0
  19. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.hints.scss +27 -0
  20. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.input-groups.scss +163 -0
  21. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.inputs.scss +135 -0
  22. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.links.scss +31 -0
  23. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.lists.scss +60 -0
  24. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.navs.scss +126 -0
  25. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.overlays.scss +33 -0
  26. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.pagination.scss +42 -0
  27. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.progress.scss +51 -0
  28. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.ranges.scss +114 -0
  29. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tables.scss +88 -0
  30. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tabs.scss +72 -0
  31. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tags.scss +42 -0
  32. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.toggles.scss +74 -0
  33. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_components.tooltips.scss → components.tooltips.scss} +30 -28
  34. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.trees.scss +47 -0
  35. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.typography.scss +95 -0
  36. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/generics.global.scss +13 -0
  37. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.alerts.scss +6 -0
  38. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.badges.scss +8 -0
  39. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.buttons.scss +43 -82
  40. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.inputs.scss +40 -2
  41. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.links.scss +22 -0
  42. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.lists.scss +10 -0
  43. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.navs.scss +29 -0
  44. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.ranges.scss +89 -0
  45. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.tabs.scss +5 -0
  46. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.toggles.scss +6 -0
  47. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.typography.scss +25 -0
  48. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.containers.scss +10 -0
  49. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.grid.scss +10 -38
  50. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_settings.global.scss +864 -0
  51. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_tools.mediaqueries.scss +34 -13
  52. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.boxing.scss +125 -0
  53. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.visibility.scss +46 -6
  54. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.containers.scss +29 -0
  55. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.drawers.scss +88 -0
  56. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.forms.scss +25 -0
  57. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.responsive.scss → objects.grid.responsive.scss} +14 -14
  58. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.scss → objects.grid.scss} +2 -2
  59. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.images.scss → objects.images.scss} +1 -1
  60. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.media.scss → objects.media.scss} +3 -3
  61. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.modals.scss +58 -0
  62. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.panels.scss → objects.panels.scss} +11 -1
  63. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/themes/blaze.example.scss +7 -0
  64. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_utilities.alignment.scss → utilities.alignment.scss} +1 -1
  65. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.boxing.scss +101 -0
  66. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.elevation.scss +19 -0
  67. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.sizes.scss +25 -0
  68. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.visibility.scss +45 -0
  69. data/lib/activeadmin_blaze_theme.rb +3 -3
  70. data/lib/activeadmin_blaze_theme/version.rb +1 -1
  71. data/package.json +1 -1
  72. metadata +59 -206
  73. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.addresses.scss +0 -11
  74. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.alerts.scss +0 -78
  75. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.avatars.scss +0 -38
  76. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.back-to-top.scss +0 -17
  77. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.badges.scss +0 -71
  78. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.breadcrumbs.scss +0 -24
  79. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.buttons.scss +0 -91
  80. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.calendars.scss +0 -80
  81. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.cards.scss +0 -195
  82. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.divider.scss +0 -39
  83. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.file-upload.scss +0 -24
  84. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.github-buttons.scss +0 -131
  85. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.headings.scss +0 -12
  86. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.hints.scss +0 -21
  87. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.input-groups.scss +0 -164
  88. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.inputs.scss +0 -128
  89. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.links.scss +0 -72
  90. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.lists.scss +0 -64
  91. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.navs.scss +0 -83
  92. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.overlays.scss +0 -23
  93. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.pagination.scss +0 -31
  94. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.progress.scss +0 -83
  95. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.ranges.scss +0 -176
  96. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tables.scss +0 -86
  97. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tabs.scss +0 -68
  98. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tags.scss +0 -39
  99. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.timelines.scss +0 -113
  100. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.toggles.scss +0 -89
  101. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.trees.scss +0 -48
  102. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_generics.global.scss +0 -17
  103. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.containers.scss +0 -37
  104. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.drawers.scss +0 -91
  105. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.forms.scss +0 -25
  106. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.modals.scss +0 -70
  107. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.boxing.scss +0 -111
  108. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.elevation.scss +0 -17
  109. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.radius.scss +0 -11
  110. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.sizes.scss +0 -23
  111. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.typography.scss +0 -160
  112. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.visibility.scss +0 -54
  113. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_variables.scss +0 -93
  114. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.states.scss +0 -7
@@ -1,11 +0,0 @@
1
- .c-address {
2
- display: block;
3
- margin: 0;
4
- padding: var(--spacing-small) 0;
5
- font-style: normal;
6
- }
7
-
8
- .c-address__heading {
9
- display: block;
10
- font-weight: var(--text-font-weight-heavy);
11
- }
@@ -1,78 +0,0 @@
1
- .c-alerts[role='presentation'] {
2
- --alerts-background-color: var(--color-transparent);
3
-
4
- z-index: var(--z-over-page);
5
- display: block;
6
- max-height: 100%;
7
- margin: 0;
8
- padding: 0;
9
- overflow-y: auto;
10
- list-style: none;
11
- background-color: var(--alerts-background-color);
12
- -webkit-overflow-scrolling: touch;
13
- }
14
-
15
- .c-alerts--topleft,
16
- .c-alerts--topright,
17
- .c-alerts--bottomleft,
18
- .c-alerts--bottomright {
19
- position: fixed;
20
- width: 250px;
21
- }
22
-
23
- .c-alerts--topleft {
24
- top: var(--spacing-medium);
25
- left: var(--spacing-medium);
26
- }
27
-
28
- .c-alerts--topright {
29
- top: var(--spacing-medium);
30
- right: var(--spacing-medium);
31
- }
32
-
33
- .c-alerts--bottomleft {
34
- bottom: 0;
35
- left: var(--spacing-medium);
36
- }
37
-
38
- .c-alerts--bottomright {
39
- right: var(--spacing-medium);
40
- bottom: 0;
41
- }
42
-
43
- .c-alert[role='alert'] {
44
- --alert-color: white;
45
- --alert-background-color: var(--color-default);
46
-
47
- position: relative;
48
- margin: var(--spacing-medium);
49
- padding: var(--spacing-medium) var(--spacing-super) var(--spacing-medium) var(--spacing-medium);
50
- color: var(--alert-color);
51
- background-color: var(--alert-background-color);
52
- border-radius: var(--border-radius);
53
-
54
- .c-link {
55
- color: var(--alert-color) !important;
56
- }
57
-
58
- &.c-alert--brand {
59
- --alert-background-color: var(--color-brand);
60
- }
61
-
62
- &.c-alert--info {
63
- --alert-background-color: var(--color-info);
64
- }
65
-
66
- &.c-alert--warning {
67
- --alert-color: black;
68
- --alert-background-color: var(--color-warning);
69
- }
70
-
71
- &.c-alert--success {
72
- --alert-background-color: var(--color-success);
73
- }
74
-
75
- &.c-alert--error {
76
- --alert-background-color: var(--color-error);
77
- }
78
- }
@@ -1,38 +0,0 @@
1
- .c-avatar {
2
- --avatar-color: white;
3
- --avatar-background-color: var(--color-brand);
4
- --avatar-border-radius: var(--border-radius-rounded);
5
-
6
- position: relative;
7
- display: inline-block;
8
- width: 3em;
9
- height: 3em;
10
- margin: 0;
11
- color: var(--avatar-color);
12
- background-color: var(--avatar-background-color);
13
- border-radius: var(--avatar-border-radius);
14
- }
15
-
16
- .c-avatar[data-text]::after {
17
- position: absolute;
18
- top: 50%;
19
- left: 50%;
20
- transform: translate(-50%, -50%);
21
- content: attr(data-text);
22
- }
23
-
24
- .c-avatar__img[alt] {
25
- display: block;
26
- width: 100%;
27
- height: 100%;
28
- overflow: hidden;
29
- border-radius: var(--avatar-border-radius);
30
- }
31
-
32
- .c-avatar__img[alt] + .c-avatar__img[alt] {
33
- position: absolute;
34
- right: 0;
35
- bottom: 0;
36
- width: 50%;
37
- height: 50%;
38
- }
@@ -1,17 +0,0 @@
1
- .c-back-to-top {
2
- position: fixed;
3
- right: 2em;
4
- bottom: 2em;
5
- z-index: var(--z-over-page);
6
-
7
- &.c-back-to-top--left {
8
- right: auto;
9
- left: 2em;
10
- }
11
-
12
- &.c-back-to-top--center {
13
- right: auto;
14
- left: 50%;
15
- transform: translateX(-50%);
16
- }
17
- }
@@ -1,71 +0,0 @@
1
- .c-badge {
2
- --badge-color: white;
3
- --badge-background-color: var(--color-default);
4
-
5
- display: inline-block;
6
- margin: 0;
7
- padding: var(--spacing-xsmall) var(--spacing-small);
8
- color: var(--badge-color);
9
- font-weight: var(--text-font-weight-heavy);
10
- font-size: 0.8em;
11
- line-height: 1.2;
12
- background-color: var(--badge-background-color);
13
- border: var(--border-width) var(--border-style) transparent;
14
- border-radius: var(--border-radius);
15
-
16
- &.c-badge--ghost {
17
- --badge-background-color: var(--color-transparent);
18
- --badge-color: var(--color-default);
19
- border-color: var(--badge-color);
20
- }
21
- }
22
-
23
- .c-badge--rounded {
24
- border-radius: var(--border-radius-rounded);
25
- }
26
-
27
- .c-badge--brand {
28
- --badge-background-color: var(--color-brand);
29
-
30
- &.c-badge--ghost {
31
- --badge-background-color: var(--color-transparent);
32
- --badge-color: var(--color-brand);
33
- }
34
- }
35
-
36
- .c-badge--info {
37
- --badge-background-color: var(--color-info);
38
-
39
- &.c-badge--ghost {
40
- --badge-background-color: var(--color-transparent);
41
- --badge-color: var(--color-info);
42
- }
43
- }
44
-
45
- .c-badge--warning {
46
- --badge-background-color: var(--color-warning);
47
- --badge-color: black;
48
-
49
- &.c-badge--ghost {
50
- --badge-background-color: var(--color-transparent);
51
- --badge-color: var(--color-warning);
52
- }
53
- }
54
-
55
- .c-badge--success {
56
- --badge-background-color: var(--color-success);
57
-
58
- &.c-badge--ghost {
59
- --badge-background-color: var(--color-transparent);
60
- --badge-color: var(--color-success);
61
- }
62
- }
63
-
64
- .c-badge--error {
65
- --badge-background-color: var(--color-error);
66
-
67
- &.c-badge--ghost {
68
- --badge-background-color: var(--color-transparent);
69
- --badge-color: var(--color-error);
70
- }
71
- }
@@ -1,24 +0,0 @@
1
- .c-breadcrumbs {
2
- display: block;
3
- margin: 0;
4
- padding: 0;
5
- list-style: none;
6
- }
7
-
8
- .c-breadcrumbs__crumb {
9
- display: inline-block;
10
- width: auto;
11
- padding: 0;
12
-
13
- &:not([aria-current]) {
14
- ::after {
15
- padding: 0 var(--spacing-small);
16
- color: var(--color-default);
17
- content: '/';
18
- }
19
- }
20
-
21
- &[aria-current] {
22
- font-weight: var(--text-font-weight-heavy);
23
- }
24
- }
@@ -1,91 +0,0 @@
1
- @import 'mixins/components.buttons';
2
-
3
- .c-button {
4
- --button-color: #fff;
5
- --button-background-color: var(--color-default);
6
-
7
- @include button;
8
-
9
- &.c-button--close {
10
- --button-color: inherit;
11
- --button-background-color: transparent;
12
-
13
- @include button-color;
14
-
15
- position: absolute;
16
- right: var(--spacing-small);
17
- padding: 0;
18
- font-weight: var(--text-font-weight-heavy);
19
- font-size: 1.4em;
20
- line-height: 1;
21
- outline: 0;
22
- }
23
-
24
- &.c-button--block {
25
- display: inline-block;
26
- width: 100%;
27
- }
28
-
29
- &.c-button--rounded {
30
- border-radius: var(--border-radius-rounded);
31
- }
32
-
33
- &.c-button--brand {
34
- --button-background-color: var(--color-brand);
35
- }
36
-
37
- &.c-button--info {
38
- --button-background-color: var(--color-info);
39
- }
40
-
41
- &.c-button--warning {
42
- --button-color: #000;
43
- --button-background-color: var(--color-warning);
44
- }
45
-
46
- &.c-button--success {
47
- --button-background-color: var(--color-success);
48
- }
49
-
50
- &.c-button--error {
51
- --button-background-color: var(--color-error);
52
- }
53
-
54
- &.c-button--ghost {
55
- --button-color: var(--color-default);
56
-
57
- @include button-ghost;
58
-
59
- &.c-button--brand {
60
- --button-color: var(--color-brand);
61
- }
62
-
63
- &.c-button--info {
64
- --button-color: var(--color-info);
65
- }
66
-
67
- &.c-button--warning {
68
- --button-color: var(--color-warning);
69
- }
70
-
71
- &.c-button--success {
72
- --button-color: var(--color-success);
73
- }
74
-
75
- &.c-button--error {
76
- --button-color: var(--color-error);
77
- }
78
- }
79
-
80
- &.c-button--nude {
81
- @include button-nude;
82
- }
83
- }
84
-
85
- .c-button__icon-left {
86
- padding-right: var(--spacing-small);
87
- }
88
-
89
- .c-button__icon-right {
90
- padding-left: var(--spacing-small);
91
- }
@@ -1,80 +0,0 @@
1
- @import 'mixins/objects.grid';
2
- @import 'mixins/components.buttons';
3
-
4
- .c-calendar {
5
- @include grid;
6
- @include grid--wrap;
7
- @include grid--center;
8
- @include grid__cell--no-gutter;
9
- z-index: var(--z-over-control);
10
- max-width: 400px;
11
- padding: var(--spacing-medium);
12
- text-align: center;
13
- background-color: var(--color-background);
14
- border: 1px solid transparent;
15
- border-radius: var(--border-radius);
16
- }
17
-
18
- .c-calendar__control,
19
- .c-calendar__date {
20
- --button-color: var(--color-quiet);
21
- --button-background-color: transparent;
22
-
23
- @include button-color;
24
- display: inline;
25
- flex: 0 0 12%;
26
- max-width: 12%;
27
- margin: 1.1%;
28
- padding: 2.5% 0;
29
- font-size: var(--text-font-size-medium);
30
- border-radius: var(--border-radius);
31
- outline: 0;
32
- user-select: none;
33
-
34
- &:hover {
35
- border-color: var(--border-color);
36
- }
37
- }
38
-
39
- .c-calendar__control {
40
- --button-color: var(--color-default);
41
- }
42
-
43
- .c-calendar__header {
44
- @include grid__cell;
45
- @include grid__cell--no-gutter;
46
- @include grid__cell--width(71.5%);
47
- padding: var(--spacing-small) 0;
48
- }
49
-
50
- .c-calendar__day {
51
- @include grid__cell;
52
- @include grid__cell--no-gutter;
53
- flex: 0 0 12%;
54
- max-width: 12%;
55
- margin: 1.1%;
56
- padding: var(--spacing-small) 0;
57
- font-weight: var(--text-font-weight-heavy);
58
- }
59
-
60
- .c-calendar__date--in-month {
61
- --button-color: #000;
62
- }
63
-
64
- .c-calendar__date[aria-current='date'] {
65
- border-color: var(--border-color);
66
- }
67
-
68
- .c-calendar__date--selected[aria-selected='true'],
69
- .c-calendar__date--selected[aria-selected='true']:hover {
70
- --button-color: #fff;
71
-
72
- @include button-color;
73
-
74
- border-color: transparent;
75
- }
76
-
77
- .c-calendar__footer {
78
- width: 100%;
79
- padding-top: var(--spacing-large);
80
- }
@@ -1,195 +0,0 @@
1
- @import 'mixins/components.buttons';
2
- @import 'mixins/utilities.states';
3
- @import 'mixins/utilities.visibility';
4
-
5
- @mixin card-item {
6
- margin: 0;
7
- padding: var(--spacing-small);
8
- color: var(--card-item-color);
9
- background-color: var(--card-item-background-color);
10
-
11
- @include disabled;
12
- }
13
-
14
- @mixin card-control {
15
- @include button;
16
- @include button-color;
17
- position: relative;
18
- display: block;
19
- width: 100%;
20
- margin: 0;
21
- padding: var(--spacing-small);
22
- text-align: inherit;
23
- text-decoration: inherit;
24
- border: 0;
25
- border-radius: 0;
26
-
27
- &[aria-expanded='true'] {
28
- font-weight: var(--text-font-weight-heavy);
29
- filter: brightness(0.95);
30
- }
31
-
32
- &.c-card__control--active {
33
- filter: brightness(0.95);
34
- }
35
- }
36
-
37
- .c-card {
38
- display: block;
39
- width: 100%;
40
- padding: 0;
41
- overflow: hidden;
42
- background-color: var(--color-background);
43
- border-radius: var(--border-radius);
44
-
45
- > .o-image:not(:first-child) {
46
- padding: var(--spacing-medium) 0 0;
47
- }
48
- }
49
-
50
- .c-card + .c-card {
51
- margin: var(--spacing-small) 0 0 0;
52
- }
53
-
54
- .c-card__header {
55
- padding: var(--spacing-medium) var(--spacing-medium) 0;
56
-
57
- .c-heading {
58
- padding: 0;
59
- }
60
- }
61
-
62
- .c-card__body {
63
- padding: var(--spacing-medium);
64
- }
65
-
66
- .c-card__footer {
67
- padding: var(--spacing-medium);
68
- }
69
-
70
- .c-card__footer--block {
71
- padding: var(--spacing-small) 0 0;
72
-
73
- .c-input-group .c-button {
74
- border-bottom: 0;
75
- }
76
-
77
- .c-input-group .c-button:first-child {
78
- border-left: 0;
79
- border-top-left-radius: 0;
80
- border-bottom-left-radius: 0;
81
- }
82
-
83
- .c-input-group .c-button:last-child {
84
- border-right: 0;
85
- border-top-right-radius: 0;
86
- border-bottom-right-radius: 0;
87
- }
88
- }
89
-
90
- .c-card__item {
91
- --card-item-color: var(--color-text);
92
- --card-item-background-color: transparent;
93
-
94
- @include card-item;
95
-
96
- &--divider[role='separator'] {
97
- --card-item-color: #000;
98
- --card-item-background-color: var(--color-dark);
99
- font-weight: var(--text-font-weight-heavy);
100
- }
101
-
102
- &--brand {
103
- --card-item-color: #fff;
104
- --card-item-background-color: var(--color-brand);
105
- }
106
-
107
- &--info {
108
- --card-item-color: #fff;
109
- --card-item-background-color: var(--color-info);
110
- }
111
-
112
- &--warning {
113
- --card-item-color: #000;
114
- --card-item-background-color: var(--color-warning);
115
- }
116
-
117
- &--success {
118
- --card-item-color: #fff;
119
- --card-item-background-color: var(--color-success);
120
- }
121
-
122
- &--error {
123
- --card-item-color: #fff;
124
- --card-item-background-color: var(--color-error);
125
- }
126
- }
127
-
128
- .c-card__item + .c-card__footer--block {
129
- padding: 0;
130
- }
131
-
132
- .c-card--grouped {
133
- .c-card__item {
134
- &:not(:last-child) {
135
- border-bottom: 0;
136
- }
137
- }
138
- }
139
-
140
- .c-card__divider[role='separator'] {
141
- height: var(--border-width);
142
- overflow: hidden;
143
- background-color: var(--border-color);
144
- }
145
-
146
- .c-card__control {
147
- --button-color: var(--color-text);
148
- --button-background-color: var(--color-dark);
149
- @include card-control;
150
- }
151
-
152
- .c-card--menu[role='menu'] {
153
- position: absolute;
154
- width: 100%;
155
- max-height: 300px;
156
- margin-top: 0.5em;
157
- overflow-x: hidden;
158
- overflow-y: auto;
159
- text-overflow: ellipsis;
160
- border: 1px solid var(--color-dark);
161
- border-radius: 0 0 var(--border-radius) var(--border-radius);
162
-
163
- .c-card__control[role='menuitem'] {
164
- --button-background-color: var(--color-light);
165
- }
166
- }
167
-
168
- .c-card--accordion {
169
- .c-card__control[aria-expanded] {
170
- &::after {
171
- position: absolute;
172
- top: 0.5em;
173
- right: 0.5em;
174
- width: 1em;
175
- height: 1em;
176
- background-image: url('data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==');
177
- background-repeat: no-repeat;
178
- background-position: center;
179
- content: '';
180
- }
181
-
182
- &[aria-expanded='true']::after {
183
- transform: rotate(180deg);
184
- }
185
- }
186
- }
187
-
188
- .c-card__item--pane {
189
- margin: 0;
190
- padding: var(--spacing-small);
191
- }
192
-
193
- .c-card__control[aria-expanded='false'] + .c-card__item--pane {
194
- @include visually-hidden;
195
- }