flipper-ui 0.16.1 → 0.19.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (155) hide show
  1. checksums.yaml +5 -5
  2. data/docs/ui/README.md +34 -24
  3. data/docs/ui/images/banner.png +0 -0
  4. data/docs/ui/images/description.png +0 -0
  5. data/docs/ui/images/feature.png +0 -0
  6. data/docs/ui/images/features.png +0 -0
  7. data/examples/ui/basic.ru +20 -0
  8. data/flipper-ui.gemspec +1 -2
  9. data/lib/flipper/ui.rb +4 -7
  10. data/lib/flipper/ui/action.rb +3 -6
  11. data/lib/flipper/ui/actions/feature.rb +5 -2
  12. data/lib/flipper/ui/actions/features.rb +14 -1
  13. data/lib/flipper/ui/actions/file.rb +1 -1
  14. data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
  15. data/lib/flipper/ui/configuration.rb +34 -10
  16. data/lib/flipper/ui/decorators/feature.rb +39 -13
  17. data/lib/flipper/ui/public/css/application.css +20 -6493
  18. data/lib/flipper/ui/public/js/application.js +5 -5
  19. data/lib/flipper/ui/util.rb +40 -0
  20. data/lib/flipper/ui/views/add_actor.erb +2 -2
  21. data/lib/flipper/ui/views/add_feature.erb +2 -2
  22. data/lib/flipper/ui/views/add_group.erb +1 -1
  23. data/lib/flipper/ui/views/feature.erb +199 -180
  24. data/lib/flipper/ui/views/features.erb +55 -36
  25. data/lib/flipper/ui/views/layout.erb +4 -14
  26. data/lib/flipper/version.rb +1 -1
  27. data/spec/flipper/ui/actions/actors_gate_spec.rb +9 -13
  28. data/spec/flipper/ui/actions/feature_spec.rb +14 -16
  29. data/spec/flipper/ui/actions/features_spec.rb +49 -14
  30. data/spec/flipper/ui/actions/file_spec.rb +0 -10
  31. data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
  32. data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
  33. data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
  34. data/spec/flipper/ui/configuration_spec.rb +69 -34
  35. data/spec/flipper/ui/decorators/feature_spec.rb +2 -32
  36. data/spec/flipper/ui_spec.rb +1 -1
  37. metadata +19 -131
  38. data/docs/ui/images/configured-ui.png +0 -0
  39. data/docs/ui/images/environment-banner.png +0 -0
  40. data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
  41. data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
  42. data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
  43. data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
  44. data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  45. data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  46. data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  47. data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
  48. data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
  49. data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
  50. data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
  51. data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
  52. data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
  53. data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
  54. data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
  55. data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
  56. data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
  57. data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  58. data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  59. data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  60. data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
  61. data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  62. data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
  63. data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
  64. data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  65. data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
  66. data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
  67. data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
  68. data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
  69. data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  70. data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
  71. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
  72. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  73. data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  74. data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
  75. data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  76. data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
  77. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
  78. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
  79. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
  80. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  81. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  82. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  83. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  84. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  85. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  86. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  87. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  88. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  89. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  90. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  91. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  92. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  93. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  94. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
  95. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  96. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  97. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  98. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  99. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  100. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  101. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  102. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  103. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
  104. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  105. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  106. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  107. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  108. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  109. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  110. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  111. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  112. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  113. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  114. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  115. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  116. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  117. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
  118. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  119. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
  120. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  121. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  122. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  123. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  124. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
  125. data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
  126. data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
  127. data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
  128. data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
  129. data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
  130. data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
  131. data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
  132. data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
  133. data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
  134. data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
  135. data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
  136. data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
  137. data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
  138. data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
  139. data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
  140. data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
  141. data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
  142. data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
  143. data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
  144. data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
  145. data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
  146. data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
  147. data/lib/flipper/ui/eruby.rb +0 -11
  148. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  149. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
  150. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  151. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  152. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
  153. data/lib/flipper/ui/public/images/remove.png +0 -0
  154. data/lib/flipper/ui/public/octicons/octicons.less +0 -235
  155. data/lib/flipper/ui/public/octicons/sprockets-octicons.scss +0 -232
@@ -1,191 +0,0 @@
1
- // Wrapper for the slide container and indicators
2
- .carousel {
3
- position: relative;
4
- }
5
-
6
- .carousel-inner {
7
- position: relative;
8
- width: 100%;
9
- overflow: hidden;
10
- }
11
-
12
- .carousel-item {
13
- position: relative;
14
- display: none;
15
- align-items: center;
16
- width: 100%;
17
- @include transition($carousel-transition);
18
- backface-visibility: hidden;
19
- perspective: 1000px;
20
- }
21
-
22
- .carousel-item.active,
23
- .carousel-item-next,
24
- .carousel-item-prev {
25
- display: block;
26
- }
27
-
28
- .carousel-item-next,
29
- .carousel-item-prev {
30
- position: absolute;
31
- top: 0;
32
- }
33
-
34
- // CSS3 transforms when supported by the browser
35
- .carousel-item-next.carousel-item-left,
36
- .carousel-item-prev.carousel-item-right {
37
- transform: translateX(0);
38
-
39
- @supports (transform-style: preserve-3d) {
40
- transform: translate3d(0, 0, 0);
41
- }
42
- }
43
-
44
- .carousel-item-next,
45
- .active.carousel-item-right {
46
- transform: translateX(100%);
47
-
48
- @supports (transform-style: preserve-3d) {
49
- transform: translate3d(100%, 0, 0);
50
- }
51
- }
52
-
53
- .carousel-item-prev,
54
- .active.carousel-item-left {
55
- transform: translateX(-100%);
56
-
57
- @supports (transform-style: preserve-3d) {
58
- transform: translate3d(-100%, 0, 0);
59
- }
60
- }
61
-
62
-
63
- //
64
- // Left/right controls for nav
65
- //
66
-
67
- .carousel-control-prev,
68
- .carousel-control-next {
69
- position: absolute;
70
- top: 0;
71
- bottom: 0;
72
- // Use flex for alignment (1-3)
73
- display: flex; // 1. allow flex styles
74
- align-items: center; // 2. vertically center contents
75
- justify-content: center; // 3. horizontally center contents
76
- width: $carousel-control-width;
77
- color: $carousel-control-color;
78
- text-align: center;
79
- opacity: $carousel-control-opacity;
80
- // We can't have a transition here because WebKit cancels the carousel
81
- // animation if you trip this while in the middle of another animation.
82
-
83
- // Hover/focus state
84
- @include hover-focus {
85
- color: $carousel-control-color;
86
- text-decoration: none;
87
- outline: 0;
88
- opacity: .9;
89
- }
90
- }
91
- .carousel-control-prev {
92
- left: 0;
93
- @if $enable-gradients {
94
- background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
95
- }
96
- }
97
- .carousel-control-next {
98
- right: 0;
99
- @if $enable-gradients {
100
- background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
101
- }
102
- }
103
-
104
- // Icons for within
105
- .carousel-control-prev-icon,
106
- .carousel-control-next-icon {
107
- display: inline-block;
108
- width: $carousel-control-icon-width;
109
- height: $carousel-control-icon-width;
110
- background: transparent no-repeat center center;
111
- background-size: 100% 100%;
112
- }
113
- .carousel-control-prev-icon {
114
- background-image: $carousel-control-prev-icon-bg;
115
- }
116
- .carousel-control-next-icon {
117
- background-image: $carousel-control-next-icon-bg;
118
- }
119
-
120
-
121
- // Optional indicator pips
122
- //
123
- // Add an ordered list with the following class and add a list item for each
124
- // slide your carousel holds.
125
-
126
- .carousel-indicators {
127
- position: absolute;
128
- right: 0;
129
- bottom: 10px;
130
- left: 0;
131
- z-index: 15;
132
- display: flex;
133
- justify-content: center;
134
- padding-left: 0; // override <ol> default
135
- // Use the .carousel-control's width as margin so we don't overlay those
136
- margin-right: $carousel-control-width;
137
- margin-left: $carousel-control-width;
138
- list-style: none;
139
-
140
- li {
141
- position: relative;
142
- flex: 0 1 auto;
143
- width: $carousel-indicator-width;
144
- height: $carousel-indicator-height;
145
- margin-right: $carousel-indicator-spacer;
146
- margin-left: $carousel-indicator-spacer;
147
- text-indent: -999px;
148
- background-color: rgba($carousel-indicator-active-bg, .5);
149
-
150
- // Use pseudo classes to increase the hit area by 10px on top and bottom.
151
- &::before {
152
- position: absolute;
153
- top: -10px;
154
- left: 0;
155
- display: inline-block;
156
- width: 100%;
157
- height: 10px;
158
- content: "";
159
- }
160
- &::after {
161
- position: absolute;
162
- bottom: -10px;
163
- left: 0;
164
- display: inline-block;
165
- width: 100%;
166
- height: 10px;
167
- content: "";
168
- }
169
- }
170
-
171
- .active {
172
- background-color: $carousel-indicator-active-bg;
173
- }
174
- }
175
-
176
-
177
- // Optional captions
178
- //
179
- //
180
-
181
- .carousel-caption {
182
- position: absolute;
183
- right: ((100% - $carousel-caption-width) / 2);
184
- bottom: 20px;
185
- left: ((100% - $carousel-caption-width) / 2);
186
- z-index: 10;
187
- padding-top: 20px;
188
- padding-bottom: 20px;
189
- color: $carousel-caption-color;
190
- text-align: center;
191
- }
@@ -1,34 +0,0 @@
1
- .close {
2
- float: right;
3
- font-size: $close-font-size;
4
- font-weight: $close-font-weight;
5
- line-height: 1;
6
- color: $close-color;
7
- text-shadow: $close-text-shadow;
8
- opacity: .5;
9
-
10
- @include hover-focus {
11
- color: $close-color;
12
- text-decoration: none;
13
- opacity: .75;
14
- }
15
-
16
- // Opinionated: add "hand" cursor to non-disabled .close elements
17
- &:not(:disabled):not(.disabled) {
18
- cursor: pointer;
19
- }
20
- }
21
-
22
- // Additional properties for button version
23
- // iOS requires the button element instead of an anchor tag.
24
- // If you want the anchor version, it requires `href="#"`.
25
- // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
26
-
27
- // stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
28
- button.close {
29
- padding: 0;
30
- background-color: transparent;
31
- border: 0;
32
- -webkit-appearance: none;
33
- }
34
- // stylelint-enable
@@ -1,56 +0,0 @@
1
- // Inline and block code styles
2
- code,
3
- kbd,
4
- pre,
5
- samp {
6
- font-family: $font-family-monospace;
7
- }
8
-
9
- // Inline code
10
- code {
11
- font-size: $code-font-size;
12
- color: $code-color;
13
- word-break: break-word;
14
-
15
- // Streamline the style when inside anchors to avoid broken underline and more
16
- a > & {
17
- color: inherit;
18
- }
19
- }
20
-
21
- // User input typically entered via keyboard
22
- kbd {
23
- padding: $kbd-padding-y $kbd-padding-x;
24
- font-size: $kbd-font-size;
25
- color: $kbd-color;
26
- background-color: $kbd-bg;
27
- @include border-radius($border-radius-sm);
28
- @include box-shadow($kbd-box-shadow);
29
-
30
- kbd {
31
- padding: 0;
32
- font-size: 100%;
33
- font-weight: $nested-kbd-font-weight;
34
- @include box-shadow(none);
35
- }
36
- }
37
-
38
- // Blocks of code
39
- pre {
40
- display: block;
41
- font-size: $code-font-size;
42
- color: $pre-color;
43
-
44
- // Account for some code outputs that place code tags in pre tags
45
- code {
46
- font-size: inherit;
47
- color: inherit;
48
- word-break: normal;
49
- }
50
- }
51
-
52
- // Enable scrollable blocks of code
53
- .pre-scrollable {
54
- max-height: $pre-scrollable-max-height;
55
- overflow-y: scroll;
56
- }
@@ -1,297 +0,0 @@
1
- // Embedded icons from Open Iconic.
2
- // Released under MIT and copyright 2014 Waybury.
3
- // https://useiconic.com/open
4
-
5
-
6
- // Checkboxes and radios
7
- //
8
- // Base class takes care of all the key behavioral aspects.
9
-
10
- .custom-control {
11
- position: relative;
12
- display: block;
13
- min-height: (1rem * $line-height-base);
14
- padding-left: $custom-control-gutter;
15
- }
16
-
17
- .custom-control-inline {
18
- display: inline-flex;
19
- margin-right: $custom-control-spacer-x;
20
- }
21
-
22
- .custom-control-input {
23
- position: absolute;
24
- z-index: -1; // Put the input behind the label so it doesn't overlay text
25
- opacity: 0;
26
-
27
- &:checked ~ .custom-control-label::before {
28
- color: $custom-control-indicator-checked-color;
29
- @include gradient-bg($custom-control-indicator-checked-bg);
30
- @include box-shadow($custom-control-indicator-checked-box-shadow);
31
- }
32
-
33
- &:focus ~ .custom-control-label::before {
34
- // the mixin is not used here to make sure there is feedback
35
- box-shadow: $custom-control-indicator-focus-box-shadow;
36
- }
37
-
38
- &:active ~ .custom-control-label::before {
39
- color: $custom-control-indicator-active-color;
40
- background-color: $custom-control-indicator-active-bg;
41
- @include box-shadow($custom-control-indicator-active-box-shadow);
42
- }
43
-
44
- &:disabled {
45
- ~ .custom-control-label {
46
- color: $custom-control-label-disabled-color;
47
-
48
- &::before {
49
- background-color: $custom-control-indicator-disabled-bg;
50
- }
51
- }
52
- }
53
- }
54
-
55
- // Custom control indicators
56
- //
57
- // Build the custom controls out of psuedo-elements.
58
-
59
- .custom-control-label {
60
- margin-bottom: 0;
61
-
62
- // Background-color and (when enabled) gradient
63
- &::before {
64
- position: absolute;
65
- top: (($line-height-base - $custom-control-indicator-size) / 2);
66
- left: 0;
67
- display: block;
68
- width: $custom-control-indicator-size;
69
- height: $custom-control-indicator-size;
70
- pointer-events: none;
71
- content: "";
72
- user-select: none;
73
- background-color: $custom-control-indicator-bg;
74
- @include box-shadow($custom-control-indicator-box-shadow);
75
- }
76
-
77
- // Foreground (icon)
78
- &::after {
79
- position: absolute;
80
- top: (($line-height-base - $custom-control-indicator-size) / 2);
81
- left: 0;
82
- display: block;
83
- width: $custom-control-indicator-size;
84
- height: $custom-control-indicator-size;
85
- content: "";
86
- background-repeat: no-repeat;
87
- background-position: center center;
88
- background-size: $custom-control-indicator-bg-size;
89
- }
90
- }
91
-
92
-
93
- // Checkboxes
94
- //
95
- // Tweak just a few things for checkboxes.
96
-
97
- .custom-checkbox {
98
- .custom-control-label::before {
99
- @include border-radius($custom-checkbox-indicator-border-radius);
100
- }
101
-
102
- .custom-control-input:checked ~ .custom-control-label {
103
- &::before {
104
- @include gradient-bg($custom-control-indicator-checked-bg);
105
- }
106
- &::after {
107
- background-image: $custom-checkbox-indicator-icon-checked;
108
- }
109
- }
110
-
111
- .custom-control-input:indeterminate ~ .custom-control-label {
112
- &::before {
113
- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
114
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
115
- }
116
- &::after {
117
- background-image: $custom-checkbox-indicator-icon-indeterminate;
118
- }
119
- }
120
-
121
- .custom-control-input:disabled {
122
- &:checked ~ .custom-control-label::before {
123
- background-color: $custom-control-indicator-checked-disabled-bg;
124
- }
125
- &:indeterminate ~ .custom-control-label::before {
126
- background-color: $custom-control-indicator-checked-disabled-bg;
127
- }
128
- }
129
- }
130
-
131
- // Radios
132
- //
133
- // Tweak just a few things for radios.
134
-
135
- .custom-radio {
136
- .custom-control-label::before {
137
- border-radius: $custom-radio-indicator-border-radius;
138
- }
139
-
140
- .custom-control-input:checked ~ .custom-control-label {
141
- &::before {
142
- @include gradient-bg($custom-control-indicator-checked-bg);
143
- }
144
- &::after {
145
- background-image: $custom-radio-indicator-icon-checked;
146
- }
147
- }
148
-
149
- .custom-control-input:disabled {
150
- &:checked ~ .custom-control-label::before {
151
- background-color: $custom-control-indicator-checked-disabled-bg;
152
- }
153
- }
154
- }
155
-
156
-
157
- // Select
158
- //
159
- // Replaces the browser default select with a custom one, mostly pulled from
160
- // http://primercss.io.
161
- //
162
-
163
- .custom-select {
164
- display: inline-block;
165
- width: 100%;
166
- height: $custom-select-height;
167
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
168
- line-height: $custom-select-line-height;
169
- color: $custom-select-color;
170
- vertical-align: middle;
171
- background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
172
- background-size: $custom-select-bg-size;
173
- border: $custom-select-border-width solid $custom-select-border-color;
174
- @if $enable-rounded {
175
- border-radius: $custom-select-border-radius;
176
- } @else {
177
- border-radius: 0;
178
- }
179
- appearance: none;
180
-
181
- &:focus {
182
- border-color: $custom-select-focus-border-color;
183
- outline: 0;
184
- box-shadow: $custom-select-focus-box-shadow;
185
-
186
- &::-ms-value {
187
- // For visual consistency with other platforms/browsers,
188
- // suppress the default white text on blue background highlight given to
189
- // the selected option text when the (still closed) <select> receives focus
190
- // in IE and (under certain conditions) Edge.
191
- // See https://github.com/twbs/bootstrap/issues/19398.
192
- color: $input-color;
193
- background-color: $input-bg;
194
- }
195
- }
196
-
197
- &[multiple],
198
- &[size]:not([size="1"]) {
199
- height: auto;
200
- padding-right: $custom-select-padding-x;
201
- background-image: none;
202
- }
203
-
204
- &:disabled {
205
- color: $custom-select-disabled-color;
206
- background-color: $custom-select-disabled-bg;
207
- }
208
-
209
- // Hides the default caret in IE11
210
- &::-ms-expand {
211
- opacity: 0;
212
- }
213
- }
214
-
215
- .custom-select-sm {
216
- height: $custom-select-height-sm;
217
- padding-top: $custom-select-padding-y;
218
- padding-bottom: $custom-select-padding-y;
219
- font-size: $custom-select-font-size-sm;
220
- }
221
-
222
- .custom-select-lg {
223
- height: $custom-select-height-lg;
224
- padding-top: $custom-select-padding-y;
225
- padding-bottom: $custom-select-padding-y;
226
- font-size: $custom-select-font-size-lg;
227
- }
228
-
229
-
230
- // File
231
- //
232
- // Custom file input.
233
-
234
- .custom-file {
235
- position: relative;
236
- display: inline-block;
237
- width: 100%;
238
- height: $custom-file-height;
239
- margin-bottom: 0;
240
- }
241
-
242
- .custom-file-input {
243
- position: relative;
244
- z-index: 2;
245
- width: 100%;
246
- height: $custom-file-height;
247
- margin: 0;
248
- opacity: 0;
249
-
250
- &:focus ~ .custom-file-control {
251
- border-color: $custom-file-focus-border-color;
252
- box-shadow: $custom-file-focus-box-shadow;
253
-
254
- &::before {
255
- border-color: $custom-file-focus-border-color;
256
- }
257
- }
258
-
259
- @each $lang, $value in $custom-file-text {
260
- &:lang(#{$lang}) ~ .custom-file-label::after {
261
- content: $value;
262
- }
263
- }
264
- }
265
-
266
- .custom-file-label {
267
- position: absolute;
268
- top: 0;
269
- right: 0;
270
- left: 0;
271
- z-index: 1;
272
- height: $custom-file-height;
273
- padding: $custom-file-padding-y $custom-file-padding-x;
274
- line-height: $custom-file-line-height;
275
- color: $custom-file-color;
276
- background-color: $custom-file-bg;
277
- border: $custom-file-border-width solid $custom-file-border-color;
278
- @include border-radius($custom-file-border-radius);
279
- @include box-shadow($custom-file-box-shadow);
280
-
281
- &::after {
282
- position: absolute;
283
- top: 0;
284
- right: 0;
285
- bottom: 0;
286
- z-index: 3;
287
- display: block;
288
- height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
289
- padding: $custom-file-padding-y $custom-file-padding-x;
290
- line-height: $custom-file-line-height;
291
- color: $custom-file-button-color;
292
- content: "Browse";
293
- @include gradient-bg($custom-file-button-bg);
294
- border-left: $custom-file-border-width solid $custom-file-border-color;
295
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
296
- }
297
- }