activeadmin_blaze_theme 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +3 -0
  3. data/Gemfile +3 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +55 -0
  6. data/Rakefile +2 -0
  7. data/activeadmin_blaze_theme.gemspec +20 -0
  8. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.colors.scss +14 -0
  9. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.scss +41 -0
  10. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.addresses.scss +12 -0
  11. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.alerts.scss +59 -0
  12. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.avatars.scss +36 -0
  13. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.badges.scss +60 -0
  14. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.breadcrumbs.scss +20 -0
  15. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.bubbles.scss +49 -0
  16. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.buttons.scss +77 -0
  17. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.calendars.scss +69 -0
  18. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.cards.scss +200 -0
  19. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.headings.scss +38 -0
  20. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.hints.scss +27 -0
  21. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.input-groups.scss +163 -0
  22. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.inputs.scss +138 -0
  23. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.links.scss +31 -0
  24. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.lists.scss +60 -0
  25. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.navs.scss +126 -0
  26. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.overlays.scss +26 -0
  27. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.pagination.scss +42 -0
  28. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.progress.scss +51 -0
  29. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.ranges.scss +114 -0
  30. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tables.scss +88 -0
  31. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tabs.scss +57 -0
  32. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tags.scss +42 -0
  33. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.toggles.scss +74 -0
  34. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tooltips.scss +96 -0
  35. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.trees.scss +39 -0
  36. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.typography.scss +94 -0
  37. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/generics.global.scss +13 -0
  38. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.alerts.scss +6 -0
  39. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.badges.scss +8 -0
  40. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.buttons.scss +83 -0
  41. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.inputs.scss +45 -0
  42. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.links.scss +22 -0
  43. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.lists.scss +10 -0
  44. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.navs.scss +29 -0
  45. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.ranges.scss +89 -0
  46. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.tabs.scss +5 -0
  47. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.toggles.scss +6 -0
  48. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.typography.scss +25 -0
  49. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.containers.scss +10 -0
  50. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.grid.scss +112 -0
  51. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_settings.global.scss +864 -0
  52. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_tools.mediaqueries.scss +73 -0
  53. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.alignment.scss +24 -0
  54. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.boxing.scss +125 -0
  55. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.containers.scss +31 -0
  56. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.drawers.scss +88 -0
  57. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.forms.scss +25 -0
  58. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.grid.responsive.scss +124 -0
  59. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.grid.scss +62 -0
  60. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.images.scss +5 -0
  61. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.media.scss +36 -0
  62. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.modals.scss +55 -0
  63. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.panels.scss +27 -0
  64. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/themes/blaze.example.scss +7 -0
  65. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.alignment.scss +22 -0
  66. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.boxing.scss +101 -0
  67. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.elevation.scss +19 -0
  68. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.sizes.scss +25 -0
  69. data/app/assets/stylesheets/activeadmin_blaze_theme/theme.scss +365 -0
  70. data/lib/activeadmin_blaze_theme/version.rb +3 -0
  71. data/lib/activeadmin_blaze_theme.rb +8 -0
  72. data/screenshot1.jpg +0 -0
  73. data/screenshot2.jpg +0 -0
  74. metadata +116 -0
@@ -0,0 +1,126 @@
1
+ @import "mixins/components.navs";
2
+
3
+ .c-nav {
4
+ @include nav--color;
5
+ width: $nav-width;
6
+ margin: $nav-margin;
7
+ padding: $nav-padding;
8
+ z-index: $nav-z-index;
9
+ }
10
+
11
+ .c-nav__item,
12
+ .c-nav__content {
13
+ display: block;
14
+ height: $nav-height;
15
+ padding: 0 $nav-item-padding;
16
+ color: inherit;
17
+ line-height: $nav-height;
18
+ vertical-align: middle;
19
+
20
+ .o-image {
21
+ height: 100%;
22
+ }
23
+ }
24
+
25
+ .c-nav__item {
26
+ @include nav__item--color;
27
+ text-decoration: none;
28
+ cursor: pointer;
29
+ }
30
+
31
+ .c-nav--inline {
32
+ .c-nav__item,
33
+ .c-nav__content {
34
+ display: inline-block;
35
+ }
36
+
37
+ .c-nav__item--right,
38
+ .c-nav__content--right {
39
+ float: right;
40
+ }
41
+ }
42
+
43
+ .c-nav--light {
44
+ @include nav--color($nav-light-background-color, $nav-light-color);
45
+ }
46
+
47
+ .c-nav--top {
48
+ position: absolute;
49
+ top: 0;
50
+ right: 0;
51
+ bottom: auto;
52
+ left: 0;
53
+
54
+ }
55
+
56
+ .c-nav--bottom {
57
+ position: absolute;
58
+ top: auto;
59
+ right: 0;
60
+ bottom: 0;
61
+ left: 0;
62
+ }
63
+
64
+ .c-nav--left {
65
+ position: absolute;
66
+ top: 0;
67
+ right: auto;
68
+ bottom: 0;
69
+ left: 0;
70
+ }
71
+
72
+ .c-nav--right {
73
+ position: absolute;
74
+ top: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ left: auto;
78
+ }
79
+
80
+ .c-nav--fixed {
81
+ position: fixed;
82
+ }
83
+
84
+ .c-nav__item--active {
85
+ @include nav__item--active;
86
+ }
87
+
88
+ .c-nav__item--brand {
89
+ @include nav__item--color($nav-item-brand-hover-background-color, $nav-item-brand-hover-color);
90
+
91
+ &.c-nav__item--active {
92
+ @include nav__item--active($nav-item-brand-active-background-color, $nav-item-brand-active-color);
93
+ }
94
+ }
95
+
96
+ .c-nav__item--info {
97
+ @include nav__item--color($nav-item-info-hover-background-color, $nav-item-info-hover-color);
98
+
99
+ &.c-nav__item--active {
100
+ @include nav__item--active($nav-item-info-active-background-color, $nav-item-info-active-color);
101
+ }
102
+ }
103
+
104
+ .c-nav__item--warning {
105
+ @include nav__item--color($color-warning);
106
+
107
+ &.c-nav__item--active {
108
+ @include nav__item--active($nav-item-warning-active-background-color, $nav-item-warning-active-color);
109
+ }
110
+ }
111
+
112
+ .c-nav__item--success {
113
+ @include nav__item--color($color-success);
114
+
115
+ &.c-nav__item--active {
116
+ @include nav__item--active($nav-item-success-active-background-color, $nav-item-success-active-color);
117
+ }
118
+ }
119
+
120
+ .c-nav__item--error {
121
+ @include nav__item--color($color-error);
122
+
123
+ &.c-nav__item--active {
124
+ @include nav__item--active($nav-item-error-active-background-color, $nav-item-error-active-color);
125
+ }
126
+ }
@@ -0,0 +1,26 @@
1
+ @import "mixins/settings.global";
2
+
3
+ .c-overlay {
4
+ display: block;
5
+ position: absolute;
6
+ top: 0;
7
+ right: 0;
8
+ bottom: 0;
9
+ left: 0;
10
+ width: 100%;
11
+ height: 100%;
12
+ background-color: transparentize($overlay-background-color, .6);
13
+ z-index: $overlay-z-index;
14
+ }
15
+
16
+ .c-overlay--fullpage {
17
+ position: fixed;
18
+ }
19
+
20
+ .c-overlay--transparent {
21
+ background-color: $overlay-transparent-background-color;
22
+ }
23
+
24
+ .c-overlay--dismissable {
25
+ cursor: pointer;
26
+ }
@@ -0,0 +1,42 @@
1
+ @import "mixins/settings.global";
2
+ @import "mixins/components.buttons";
3
+
4
+ .c-pagination {
5
+ display: block;
6
+ width: $pagination-width;
7
+ padding: $pagination-padding;
8
+ font-size: $pagination-font-size;
9
+ text-align: center;
10
+ }
11
+
12
+ .c-pagination__controls {
13
+ display: inline-block;
14
+ text-align: center;
15
+ }
16
+
17
+ .c-pagination__controls--backward {
18
+ float: left;
19
+ text-align: left;
20
+ }
21
+
22
+ .c-pagination__controls--forward {
23
+ float: right;
24
+ text-align: right;
25
+ }
26
+
27
+ .c-pagination__control,
28
+ .c-pagination__page {
29
+ @include button;
30
+ @include button-ghost($pagination-control-color);
31
+ min-width: 2.4em;
32
+ border-radius: $pagination-control-border-radius;
33
+ }
34
+
35
+ .c-pagination__page--current {
36
+ background-color: $pagination-page-current-background-color;
37
+ color: $pagination-page-current-color;
38
+ }
39
+
40
+ .c-pagination__ellipsis {
41
+ padding: $pagination-ellipsis-padding;
42
+ }
@@ -0,0 +1,51 @@
1
+ @import "mixins/settings.global";
2
+
3
+ .c-progress {
4
+ display: block;
5
+ border: $progress-border;
6
+ border-radius: $progress-border-radius;
7
+ background-color: $progress-background-color;
8
+ color: $progress-color;
9
+ text-align: center;
10
+ overflow: hidden;
11
+ }
12
+
13
+ .c-progress--rounded {
14
+ border-radius: $progress-rounded-border-radius;
15
+ }
16
+
17
+ .c-progress__bar {
18
+ display: block;
19
+ height: 100%;
20
+ float: left;
21
+ border-radius: 0;
22
+ background-color: $progress-bar-background-color;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .c-progress__bar:after {
29
+ color: transparent !important;
30
+ content: "-";
31
+ }
32
+
33
+ .c-progress__bar--brand {
34
+ background-color: $color-brand;
35
+ }
36
+
37
+ .c-progress__bar--info {
38
+ background-color: $color-info;
39
+ }
40
+
41
+ .c-progress__bar--warning {
42
+ background-color: $color-warning;
43
+ }
44
+
45
+ .c-progress__bar--success {
46
+ background-color: $color-success;
47
+ }
48
+
49
+ .c-progress__bar--error {
50
+ background-color: $color-error;
51
+ }
@@ -0,0 +1,114 @@
1
+ @import "mixins/components.ranges";
2
+
3
+ .c-range {
4
+ @include range--color;
5
+ width: $range-width;
6
+ padding: $range-padding;
7
+ outline: 0;
8
+ -webkit-appearance: none;
9
+ }
10
+
11
+ .c-range--brand {
12
+ @include range--color($range-brand-background-color);
13
+ }
14
+
15
+ .c-range--info {
16
+ @include range--color($range-info-background-color);
17
+ }
18
+
19
+ .c-range--warning {
20
+ @include range--color($range-warning-background-color);
21
+ }
22
+
23
+ .c-range--success {
24
+ @include range--color($range-success-background-color);
25
+ }
26
+
27
+ .c-range--error {
28
+ @include range--color($range-error-background-color);
29
+ }
30
+
31
+ .c-range::-webkit-slider-runnable-track {
32
+ @include range__track;
33
+ }
34
+
35
+ .c-range::-webkit-slider-thumb {
36
+ @include range__thumb;
37
+ @include range__thumb--webkit;
38
+ }
39
+
40
+ .c-range::-moz-range-track {
41
+ @include range__track;
42
+ }
43
+
44
+ .c-range::-moz-range-thumb {
45
+ @include range__thumb;
46
+ }
47
+
48
+ .c-range::-ms-track {
49
+ @include range__track;
50
+ @include range__track--ms;
51
+ }
52
+
53
+ .c-range::-ms-fill-lower,
54
+ .c-range::-ms-fill-upper {
55
+ @include range__fill--ms;
56
+ }
57
+
58
+ .c-range::-ms-thumb {
59
+ @include range__thumb;
60
+ }
61
+
62
+ .c-range:not(:disabled):active {
63
+ &::-webkit-slider-thumb {
64
+ @include range__thumb--active;
65
+ }
66
+
67
+ &::-moz-range-thumb {
68
+ @include range__thumb--active;
69
+ }
70
+
71
+ &::-ms-thumb {
72
+ @include range__thumb--active;
73
+ }
74
+ }
75
+
76
+ .c-range:focus {
77
+ &::-webkit-slider-thumb {
78
+ @include range__thumb--focus;
79
+ }
80
+
81
+ &::-moz-range-thumb {
82
+ @include range__thumb--focus;
83
+ }
84
+
85
+ &::-ms-thumb {
86
+ @include range__thumb--focus;
87
+ }
88
+ }
89
+
90
+ .c-range:disabled {
91
+ &::-webkit-slider-thumb {
92
+ @include range--disabled;
93
+ }
94
+
95
+ &::-webkit-slider-runnable-track {
96
+ @include range--disabled;
97
+ }
98
+
99
+ &::-moz-range-thumb {
100
+ @include range--disabled;
101
+ }
102
+
103
+ &::-moz-range-track {
104
+ @include range--disabled;
105
+ }
106
+
107
+ &::-ms-thumb {
108
+ @include range--disabled;
109
+ }
110
+
111
+ &::-ms-track {
112
+ @include range--disabled;
113
+ }
114
+ }
@@ -0,0 +1,88 @@
1
+ @import "mixins/settings.global";
2
+ @import "mixins/objects.grid";
3
+
4
+ .c-table {
5
+ @include grid;
6
+ @include grid--wrap;
7
+ width: $table-width;
8
+ margin: $table-margin;
9
+ padding: $table-padding;
10
+ border: $table-border;
11
+ border-collapse: collapse;
12
+ border-spacing: 0;
13
+ }
14
+
15
+ .c-table__caption {
16
+ @include grid;
17
+ @include grid__cell--full;
18
+ max-width: $table-caption-max-width;
19
+ padding: $table-caption-padding;
20
+ color: $table-caption-color;
21
+ font-size: $table-caption-font-size;
22
+ text-align: $table-caption-text-align;
23
+ }
24
+
25
+ .c-table__row,
26
+ .c-table__head,
27
+ .c-table__body {
28
+ display: flex;
29
+ flex: 0 0 100%;
30
+ flex-wrap: wrap;
31
+ max-width: 100%;
32
+ }
33
+
34
+ .c-table--striped :not(.c-table__row--heading).c-table__row:nth-of-type(odd) {
35
+ background-color: $table-row-striped-background-color;
36
+ color: $table-row-striped-color;
37
+ }
38
+
39
+ .c-table__cell {
40
+ display: flex;
41
+ flex: 1;
42
+ padding: $table-cell-padding;
43
+ text-align: $table-cell-text-align;
44
+ overflow: auto;
45
+ }
46
+
47
+ .c-table__row--heading .c-table__cell {
48
+ display: flex;
49
+ flex: 1;
50
+ border-bottom: $table-heading-border;
51
+ background-color: $table-heading-background-color;
52
+ color: $table-heading-color;
53
+ font-size: $text-font-size-medium;
54
+ font-weight: $table-heading-font-weight;
55
+ }
56
+
57
+ .c-table--striped .c-table__row--heading .c-table__cell {
58
+ background-color: $table-heading-striped-background-color;
59
+ color: $table-heading-striped-color;
60
+ }
61
+
62
+ .c-table--clickable :not(.c-table__row--heading).c-table__row:hover .c-table__cell,
63
+ .c-table__row--clickable:hover .c-table__cell {
64
+ background-color: $table-row-clickable-background-color;
65
+ color: $table-row-clickable-color;
66
+ cursor: pointer;
67
+ }
68
+
69
+ .c-table__row--disabled {
70
+ background-color: $table-row-disabled-background-color;
71
+ color: $table-row-disabled-color;
72
+ cursor: default;
73
+ }
74
+
75
+ .c-table--clickable :not(.c-table__row--heading).c-table__row--disabled:hover .c-table__cell,
76
+ .c-table__row--disabled:hover .c-table__cell {
77
+ background-color: $table-row-disabled-background-color;
78
+ color: $table-row-disabled-color;
79
+ cursor: not-allowed;
80
+ }
81
+
82
+ .c-table--condensed {
83
+ font-size: $table-condensed-font-size;
84
+
85
+ .c-table__cell {
86
+ padding: $table-condensed-cell-padding;
87
+ }
88
+ }
@@ -0,0 +1,57 @@
1
+ @import "mixins/components.tabs";
2
+
3
+ .c-tabs {
4
+ display: block;
5
+ }
6
+
7
+ .c-tabs__headings {
8
+ display: flex;
9
+ text-align: $tab-headings-text-align;
10
+ cursor: pointer;
11
+ }
12
+
13
+ .c-tab-heading {
14
+ flex: 1;
15
+ margin: $tab-heading-margin;
16
+ padding: $tab-heading-padding;
17
+ box-shadow: 0 -.2em 0 0 $tab-heading-box-shadow-color inset;
18
+ }
19
+
20
+ .c-tab-heading--active {
21
+ @include tab-heading--color;
22
+ }
23
+
24
+ .c-tabs--brand .c-tab-heading--active {
25
+ @include tab-heading--color($tab-heading-brand-active-box-shadow-color);
26
+ }
27
+
28
+ .c-tabs--info .c-tab-heading--active {
29
+ @include tab-heading--color($tab-heading-info-active-box-shadow-color);
30
+ }
31
+
32
+ .c-tabs--warning .c-tab-heading--active {
33
+ @include tab-heading--color($tab-heading-warning-active-box-shadow-color);
34
+ }
35
+
36
+ .c-tabs--success .c-tab-heading--active {
37
+ @include tab-heading--color($tab-heading-success-active-box-shadow-color);
38
+ }
39
+
40
+ .c-tabs--error .c-tab-heading--active {
41
+ @include tab-heading--color($tab-heading-error-active-box-shadow-color);
42
+ }
43
+
44
+ .c-tab-heading--disabled {
45
+ background-color: $tab-heading-disabled-background-color;
46
+ color: $tab-heading-disabled-color;
47
+ cursor: not-allowed;
48
+ }
49
+
50
+ .c-tabs__tab {
51
+ display: none;
52
+ padding: $tab-padding;
53
+ }
54
+
55
+ .c-tabs__tab--active {
56
+ display: block;
57
+ }
@@ -0,0 +1,42 @@
1
+ @import "mixins/settings.global";
2
+
3
+ .c-tags {
4
+ position: relative;
5
+ width: $tags-width;
6
+ text-align: $tags-text-align;
7
+ }
8
+
9
+ .c-tags .c-card--menu {
10
+ position: absolute;
11
+ width: 100%;
12
+ }
13
+
14
+ .c-tags__container {
15
+ display: inline-block;
16
+ max-width: $tags-container-width;
17
+ padding-right: $spacing-xsmall;
18
+ }
19
+
20
+ .c-tag {
21
+ display: inline-block;
22
+ position: relative;
23
+ max-width: $tags-container-width;
24
+ margin: $tag-margin;
25
+ padding: $tag-padding;
26
+ }
27
+
28
+ .c-tag__close {
29
+ position: absolute;
30
+ top: 7px;
31
+ right: 5px;
32
+ color: $tag-close-color;
33
+ font-weight: $tag-close-font-weight;
34
+ }
35
+
36
+ .c-tags__field-container {
37
+ display: inline-block;
38
+ position: absolute;
39
+ width: $tags-field-container-width;
40
+ margin: $tags-field-container-margin;
41
+ cursor: pointer;
42
+ }
@@ -0,0 +1,74 @@
1
+ @import "mixins/components.toggles";
2
+
3
+ .c-toggle {
4
+ @include grid;
5
+ @include grid--center;
6
+ width: auto;
7
+ cursor: pointer;
8
+ user-select: none;
9
+
10
+ input:not(:checked) + .c-toggle__track {
11
+ background-color: $toggle-track-unchecked-background-color;
12
+
13
+ .c-toggle__handle {
14
+ transform: translateZ(0);
15
+ }
16
+ }
17
+
18
+ input:disabled + .c-toggle__track {
19
+ background-color: $toggle-track-disabled-background-color;
20
+ cursor: not-allowed;
21
+
22
+ .c-toggle__handle {
23
+ background-color: $toggle-handle-disabled-background-color;
24
+ cursor: not-allowed;
25
+ }
26
+ }
27
+ }
28
+
29
+ .c-toggle--brand .c-toggle__track {
30
+ @include toggle__track--background-color($toggle-track-brand-background-color);
31
+ }
32
+
33
+ .c-toggle--info .c-toggle__track {
34
+ @include toggle__track--background-color($toggle-track-info-background-color);
35
+ }
36
+
37
+ .c-toggle--warning .c-toggle__track {
38
+ @include toggle__track--background-color($toggle-track-warning-background-color);
39
+ }
40
+
41
+ .c-toggle--success .c-toggle__track {
42
+ @include toggle__track--background-color($toggle-track-success-background-color);
43
+ }
44
+
45
+ .c-toggle--error .c-toggle__track {
46
+ @include toggle__track--background-color($toggle-track-error-background-color);
47
+ }
48
+
49
+ .c-toggle input {
50
+ display: none;
51
+ }
52
+
53
+ .c-toggle__track {
54
+ @include grid__cell;
55
+ @include grid__cell--width-fixed;
56
+ @include toggle__track--background-color;
57
+ position: relative;
58
+ width: 1em;
59
+ height: .5em;
60
+ margin: $toggle-margin;
61
+ border-radius: $toggle-track-border-radius;
62
+ }
63
+
64
+ .c-toggle__handle {
65
+ position: absolute;
66
+ top: -.25em;
67
+ left: 0;
68
+ width: 1em;
69
+ height: 1em;
70
+ transform: translateX(100%);
71
+ border-radius: $toggle-handle-border-radius;
72
+ background-color: $toggle-handle-background-color;
73
+ box-shadow: $toggle-handle-box-shadow;
74
+ }
@@ -0,0 +1,96 @@
1
+ @import "mixins/settings.global";
2
+
3
+ .c-tooltip {
4
+ position: relative;
5
+ overflow: visible;
6
+
7
+ &:before,
8
+ &:after {
9
+ visibility: hidden;
10
+ z-index: $z-over-page;
11
+ }
12
+
13
+ &:before {
14
+ position: absolute;
15
+ border: $tooltip-arrow-width solid transparent;
16
+ content: "";
17
+ }
18
+
19
+ &:after {
20
+ position: absolute;
21
+ padding: .25em .5em;
22
+ border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
23
+ border-radius: $border-radius;
24
+ background-color: $tooltip-body-background-color;
25
+ color: $tooltip-body-color;
26
+ line-height: $tooltip-line-height;
27
+ white-space: nowrap;
28
+ content: attr(aria-label);
29
+ visibility: hidden;
30
+ }
31
+
32
+ &:hover:before,
33
+ &:hover:after {
34
+ visibility: visible;
35
+ }
36
+ }
37
+
38
+ .c-tooltip--top {
39
+ &:before {
40
+ top: 0%;
41
+ left: 50%;
42
+ transform: translate(-50%, -1em);
43
+ border-top-color: $tooltip-body-border-color;
44
+ }
45
+
46
+ &:after {
47
+ top: 0%;
48
+ left: 50%;
49
+ transform: translate(-50%, -3em);
50
+ }
51
+ }
52
+
53
+ .c-tooltip--right {
54
+ &:before {
55
+ top: 50%;
56
+ left: 100%;
57
+ transform: translate(0, -50%);
58
+ border-right-color: $tooltip-body-border-color;
59
+ }
60
+
61
+ &:after {
62
+ top: 50%;
63
+ left: 100%;
64
+ transform: translate(1em, -50%);
65
+ }
66
+ }
67
+
68
+ .c-tooltip--bottom {
69
+ &:before {
70
+ bottom: 0;
71
+ left: 50%;
72
+ transform: translate(-50%, 1em);
73
+ border-bottom-color: $tooltip-body-border-color;
74
+ }
75
+
76
+ &:after {
77
+ bottom: 0;
78
+ left: 50%;
79
+ transform: translate(-50%, 3em);
80
+ }
81
+ }
82
+
83
+ .c-tooltip--left {
84
+ &:before {
85
+ top: 50%;
86
+ right: 100%;
87
+ transform: translate(0, -50%);
88
+ border-left-color: $tooltip-body-border-color;
89
+ }
90
+
91
+ &:after {
92
+ top: 50%;
93
+ right: 100%;
94
+ transform: translate(-1em, -50%);
95
+ }
96
+ }