flipper-ui 0.16.0 → 0.18.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (150) hide show
  1. checksums.yaml +5 -5
  2. data/docs/ui/README.md +29 -8
  3. data/examples/ui/basic.ru +19 -0
  4. data/flipper-ui.gemspec +1 -2
  5. data/lib/flipper/ui.rb +4 -7
  6. data/lib/flipper/ui/action.rb +4 -7
  7. data/lib/flipper/ui/actions/feature.rb +5 -2
  8. data/lib/flipper/ui/actions/features.rb +1 -0
  9. data/lib/flipper/ui/actions/file.rb +1 -1
  10. data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
  11. data/lib/flipper/ui/configuration.rb +25 -10
  12. data/lib/flipper/ui/decorators/feature.rb +39 -13
  13. data/lib/flipper/ui/public/css/application.css +20 -6493
  14. data/lib/flipper/ui/public/js/application.js +5 -5
  15. data/lib/flipper/ui/util.rb +40 -0
  16. data/lib/flipper/ui/views/add_actor.erb +2 -2
  17. data/lib/flipper/ui/views/add_feature.erb +2 -2
  18. data/lib/flipper/ui/views/add_group.erb +1 -1
  19. data/lib/flipper/ui/views/feature.erb +200 -181
  20. data/lib/flipper/ui/views/features.erb +50 -36
  21. data/lib/flipper/ui/views/layout.erb +4 -14
  22. data/lib/flipper/version.rb +1 -1
  23. data/spec/flipper/ui/action_spec.rb +61 -42
  24. data/spec/flipper/ui/actions/actors_gate_spec.rb +9 -13
  25. data/spec/flipper/ui/actions/feature_spec.rb +14 -16
  26. data/spec/flipper/ui/actions/features_spec.rb +49 -14
  27. data/spec/flipper/ui/actions/file_spec.rb +0 -10
  28. data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
  29. data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
  30. data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
  31. data/spec/flipper/ui/configuration_spec.rb +32 -34
  32. data/spec/flipper/ui/decorators/feature_spec.rb +2 -32
  33. data/spec/flipper/ui_spec.rb +1 -1
  34. metadata +17 -129
  35. data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
  36. data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
  37. data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
  38. data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
  39. data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  40. data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  41. data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  42. data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
  43. data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
  44. data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
  45. data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
  46. data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
  47. data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
  48. data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
  49. data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
  50. data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
  51. data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
  52. data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  53. data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  54. data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  55. data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
  56. data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  57. data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
  58. data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
  59. data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  60. data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
  61. data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
  62. data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
  63. data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
  64. data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  65. data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
  66. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
  67. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  68. data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  69. data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
  70. data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  71. data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
  72. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
  73. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
  74. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
  75. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  76. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  77. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  78. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  79. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  80. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  81. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  82. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  83. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  84. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  85. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  86. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  87. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  88. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  89. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
  90. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  91. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  92. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  93. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  94. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  95. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  96. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  97. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  98. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
  99. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  100. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  101. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  102. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  103. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  104. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  105. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  106. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  107. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  108. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  109. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  110. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  111. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  112. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
  113. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  114. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
  115. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  116. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  117. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  118. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  119. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
  120. data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
  121. data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
  122. data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
  123. data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
  124. data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
  125. data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
  126. data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
  127. data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
  128. data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
  129. data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
  130. data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
  131. data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
  132. data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
  133. data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
  134. data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
  135. data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
  136. data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
  137. data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
  138. data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
  139. data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
  140. data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
  141. data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
  142. data/lib/flipper/ui/eruby.rb +0 -11
  143. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  144. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
  145. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  146. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  147. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
  148. data/lib/flipper/ui/public/images/remove.png +0 -0
  149. data/lib/flipper/ui/public/octicons/octicons.less +0 -235
  150. data/lib/flipper/ui/public/octicons/sprockets-octicons.scss +0 -232
@@ -1,7 +0,0 @@
1
- @mixin clearfix() {
2
- &::after {
3
- display: block;
4
- clear: both;
5
- content: "";
6
- }
7
- }
@@ -1,11 +0,0 @@
1
- // stylelint-disable declaration-no-important
2
-
3
- @mixin float-left {
4
- float: left !important;
5
- }
6
- @mixin float-right {
7
- float: right !important;
8
- }
9
- @mixin float-none {
10
- float: none !important;
11
- }
@@ -1,137 +0,0 @@
1
- // Form control focus state
2
- //
3
- // Generate a customized focus state and for any input with the specified color,
4
- // which defaults to the `$input-focus-border-color` variable.
5
- //
6
- // We highly encourage you to not customize the default value, but instead use
7
- // this to tweak colors on an as-needed basis. This aesthetic change is based on
8
- // WebKit's default styles, but applicable to a wider range of browsers. Its
9
- // usability and accessibility should be taken into account with any change.
10
- //
11
- // Example usage: change the default blue border and shadow to white for better
12
- // contrast against a dark gray background.
13
- @mixin form-control-focus() {
14
- &:focus {
15
- color: $input-focus-color;
16
- background-color: $input-focus-bg;
17
- border-color: $input-focus-border-color;
18
- outline: 0;
19
- // Avoid using mixin so we can pass custom focus shadow properly
20
- @if $enable-shadows {
21
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
22
- } @else {
23
- box-shadow: $input-focus-box-shadow;
24
- }
25
- }
26
- }
27
-
28
-
29
- @mixin form-validation-state($state, $color) {
30
- .#{$state}-feedback {
31
- display: none;
32
- width: 100%;
33
- margin-top: $form-feedback-margin-top;
34
- font-size: $form-feedback-font-size;
35
- color: $color;
36
- }
37
-
38
- .#{$state}-tooltip {
39
- position: absolute;
40
- top: 100%;
41
- z-index: 5;
42
- display: none;
43
- max-width: 100%; // Contain to parent when possible
44
- padding: .5rem;
45
- margin-top: .1rem;
46
- font-size: .875rem;
47
- line-height: 1;
48
- color: #fff;
49
- background-color: rgba($color, .8);
50
- border-radius: .2rem;
51
- }
52
-
53
- .form-control,
54
- .custom-select {
55
- .was-validated &:#{$state},
56
- &.is-#{$state} {
57
- border-color: $color;
58
-
59
- &:focus {
60
- border-color: $color;
61
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
62
- }
63
-
64
- ~ .#{$state}-feedback,
65
- ~ .#{$state}-tooltip {
66
- display: block;
67
- }
68
- }
69
- }
70
-
71
- .form-check-input {
72
- .was-validated &:#{$state},
73
- &.is-#{$state} {
74
- ~ .form-check-label {
75
- color: $color;
76
- }
77
-
78
- ~ .#{$state}-feedback,
79
- ~ .#{$state}-tooltip {
80
- display: block;
81
- }
82
- }
83
- }
84
-
85
- .custom-control-input {
86
- .was-validated &:#{$state},
87
- &.is-#{$state} {
88
- ~ .custom-control-label {
89
- color: $color;
90
-
91
- &::before {
92
- background-color: lighten($color, 25%);
93
- }
94
- }
95
-
96
- ~ .#{$state}-feedback,
97
- ~ .#{$state}-tooltip {
98
- display: block;
99
- }
100
-
101
- &:checked {
102
- ~ .custom-control-label::before {
103
- @include gradient-bg(lighten($color, 10%));
104
- }
105
- }
106
-
107
- &:focus {
108
- ~ .custom-control-label::before {
109
- box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
110
- }
111
- }
112
- }
113
- }
114
-
115
- // custom file
116
- .custom-file-input {
117
- .was-validated &:#{$state},
118
- &.is-#{$state} {
119
- ~ .custom-file-label {
120
- border-color: $color;
121
-
122
- &::before { border-color: inherit; }
123
- }
124
-
125
- ~ .#{$state}-feedback,
126
- ~ .#{$state}-tooltip {
127
- display: block;
128
- }
129
-
130
- &:focus {
131
- ~ .custom-file-label {
132
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
133
- }
134
- }
135
- }
136
- }
137
- }
@@ -1,45 +0,0 @@
1
- // Gradients
2
-
3
- @mixin gradient-bg($color) {
4
- @if $enable-gradients {
5
- background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
6
- } @else {
7
- background-color: $color;
8
- }
9
- }
10
-
11
- // Horizontal gradient, from left to right
12
- //
13
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
14
- @mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
15
- background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
16
- background-repeat: repeat-x;
17
- }
18
-
19
- // Vertical gradient, from top to bottom
20
- //
21
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
22
- @mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
23
- background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
24
- background-repeat: repeat-x;
25
- }
26
-
27
- @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
28
- background-image: linear-gradient($deg, $start-color, $end-color);
29
- background-repeat: repeat-x;
30
- }
31
- @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
32
- background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33
- background-repeat: no-repeat;
34
- }
35
- @mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
36
- background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37
- background-repeat: no-repeat;
38
- }
39
- @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
40
- background-image: radial-gradient(circle, $inner-color, $outer-color);
41
- background-repeat: no-repeat;
42
- }
43
- @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
44
- background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
45
- }
@@ -1,67 +0,0 @@
1
- // Framework grid generation
2
- //
3
- // Used only by Bootstrap to generate the correct number of grid classes given
4
- // any value of `$grid-columns`.
5
-
6
- @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7
- // Common properties for all breakpoints
8
- %grid-column {
9
- position: relative;
10
- width: 100%;
11
- min-height: 1px; // Prevent columns from collapsing when empty
12
- padding-right: ($gutter / 2);
13
- padding-left: ($gutter / 2);
14
- }
15
-
16
- @each $breakpoint in map-keys($breakpoints) {
17
- $infix: breakpoint-infix($breakpoint, $breakpoints);
18
-
19
- // Allow columns to stretch full width below their breakpoints
20
- @for $i from 1 through $columns {
21
- .col#{$infix}-#{$i} {
22
- @extend %grid-column;
23
- }
24
- }
25
- .col#{$infix},
26
- .col#{$infix}-auto {
27
- @extend %grid-column;
28
- }
29
-
30
- @include media-breakpoint-up($breakpoint, $breakpoints) {
31
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
32
- .col#{$infix} {
33
- flex-basis: 0;
34
- flex-grow: 1;
35
- max-width: 100%;
36
- }
37
- .col#{$infix}-auto {
38
- flex: 0 0 auto;
39
- width: auto;
40
- max-width: none; // Reset earlier grid tiers
41
- }
42
-
43
- @for $i from 1 through $columns {
44
- .col#{$infix}-#{$i} {
45
- @include make-col($i, $columns);
46
- }
47
- }
48
-
49
- .order#{$infix}-first { order: -1; }
50
-
51
- .order#{$infix}-last { order: $columns + 1; }
52
-
53
- @for $i from 0 through $columns {
54
- .order#{$infix}-#{$i} { order: $i; }
55
- }
56
-
57
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
58
- @for $i from 0 through ($columns - 1) {
59
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
60
- .offset#{$infix}-#{$i} {
61
- @include make-col-offset($i, $columns);
62
- }
63
- }
64
- }
65
- }
66
- }
67
- }
@@ -1,52 +0,0 @@
1
- /// Grid system
2
- //
3
- // Generate semantic grid columns with these mixins.
4
-
5
- @mixin make-container() {
6
- width: 100%;
7
- padding-right: ($grid-gutter-width / 2);
8
- padding-left: ($grid-gutter-width / 2);
9
- margin-right: auto;
10
- margin-left: auto;
11
- }
12
-
13
-
14
- // For each breakpoint, define the maximum width of the container in a media query
15
- @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16
- @each $breakpoint, $container-max-width in $max-widths {
17
- @include media-breakpoint-up($breakpoint, $breakpoints) {
18
- max-width: $container-max-width;
19
- }
20
- }
21
- }
22
-
23
- @mixin make-row() {
24
- display: flex;
25
- flex-wrap: wrap;
26
- margin-right: ($grid-gutter-width / -2);
27
- margin-left: ($grid-gutter-width / -2);
28
- }
29
-
30
- @mixin make-col-ready() {
31
- position: relative;
32
- // Prevent columns from becoming too narrow when at smaller grid tiers by
33
- // always setting `width: 100%;`. This works because we use `flex` values
34
- // later on to override this initial width.
35
- width: 100%;
36
- min-height: 1px; // Prevent collapsing
37
- padding-right: ($grid-gutter-width / 2);
38
- padding-left: ($grid-gutter-width / 2);
39
- }
40
-
41
- @mixin make-col($size, $columns: $grid-columns) {
42
- flex: 0 0 percentage($size / $columns);
43
- // Add a `max-width` to ensure content within each column does not blow out
44
- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
45
- // do not appear to require this.
46
- max-width: percentage($size / $columns);
47
- }
48
-
49
- @mixin make-col-offset($size, $columns: $grid-columns) {
50
- $num: $size / $columns;
51
- margin-left: if($num == 0, 0, percentage($num));
52
- }
@@ -1,39 +0,0 @@
1
- // stylelint-disable indentation
2
-
3
- // Hover mixin and `$enable-hover-media-query` are deprecated.
4
- //
5
- // Origally added during our alphas and maintained during betas, this mixin was
6
- // designed to prevent `:hover` stickiness on iOS—an issue where hover styles
7
- // would persist after initial touch.
8
- //
9
- // For backward compatibility, we've kept these mixins and updated them to
10
- // always return their regular psuedo-classes instead of a shimmed media query.
11
- //
12
- // Issue: https://github.com/twbs/bootstrap/issues/25195
13
-
14
- @mixin hover {
15
- &:hover { @content; }
16
- }
17
-
18
- @mixin hover-focus {
19
- &:hover,
20
- &:focus {
21
- @content;
22
- }
23
- }
24
-
25
- @mixin plain-hover-focus {
26
- &,
27
- &:hover,
28
- &:focus {
29
- @content;
30
- }
31
- }
32
-
33
- @mixin hover-focus-active {
34
- &:hover,
35
- &:focus,
36
- &:active {
37
- @content;
38
- }
39
- }
@@ -1,36 +0,0 @@
1
- // Image Mixins
2
- // - Responsive image
3
- // - Retina image
4
-
5
-
6
- // Responsive image
7
- //
8
- // Keep images from scaling beyond the width of their parents.
9
-
10
- @mixin img-fluid {
11
- // Part 1: Set a maximum relative to the parent
12
- max-width: 100%;
13
- // Part 2: Override the height to auto, otherwise images will be stretched
14
- // when setting a width and height attribute on the img element.
15
- height: auto;
16
- }
17
-
18
-
19
- // Retina image
20
- //
21
- // Short retina mixin for setting background-image and -size.
22
-
23
- // stylelint-disable indentation, media-query-list-comma-newline-after
24
- @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
25
- background-image: url($file-1x);
26
-
27
- // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
28
- // but doesn't convert dppx=>dpi.
29
- // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
30
- // Compatibility info: https://caniuse.com/#feat=css-media-resolution
31
- @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
32
- only screen and (min-resolution: 2dppx) { // Standardized
33
- background-image: url($file-2x);
34
- background-size: $width-1x $height-1x;
35
- }
36
- }
@@ -1,21 +0,0 @@
1
- // List Groups
2
-
3
- @mixin list-group-item-variant($state, $background, $color) {
4
- .list-group-item-#{$state} {
5
- color: $color;
6
- background-color: $background;
7
-
8
- &.list-group-item-action {
9
- @include hover-focus {
10
- color: $color;
11
- background-color: darken($background, 5%);
12
- }
13
-
14
- &.active {
15
- color: #fff;
16
- background-color: $color;
17
- border-color: $color;
18
- }
19
- }
20
- }
21
- }
@@ -1,7 +0,0 @@
1
- // Lists
2
-
3
- // Unstyled keeps list items block level, just removes default browser padding and list-style
4
- @mixin list-unstyled {
5
- padding-left: 0;
6
- list-style: none;
7
- }
@@ -1,10 +0,0 @@
1
- // Horizontal dividers
2
- //
3
- // Dividers (basically an hr) within dropdowns and nav lists
4
-
5
- @mixin nav-divider($color: #e5e5e5) {
6
- height: 0;
7
- margin: ($spacer / 2) 0;
8
- overflow: hidden;
9
- border-top: 1px solid $color;
10
- }