flipper-ui 0.16.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +5 -5
- data/docs/ui/README.md +29 -8
- data/examples/ui/basic.ru +19 -0
- data/flipper-ui.gemspec +1 -2
- data/lib/flipper/ui.rb +4 -7
- data/lib/flipper/ui/action.rb +4 -7
- data/lib/flipper/ui/actions/feature.rb +5 -2
- data/lib/flipper/ui/actions/features.rb +1 -0
- data/lib/flipper/ui/actions/file.rb +1 -1
- data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
- data/lib/flipper/ui/configuration.rb +25 -10
- data/lib/flipper/ui/decorators/feature.rb +39 -13
- data/lib/flipper/ui/public/css/application.css +20 -6493
- data/lib/flipper/ui/public/js/application.js +5 -5
- data/lib/flipper/ui/util.rb +40 -0
- data/lib/flipper/ui/views/add_actor.erb +2 -2
- data/lib/flipper/ui/views/add_feature.erb +2 -2
- data/lib/flipper/ui/views/add_group.erb +1 -1
- data/lib/flipper/ui/views/feature.erb +200 -181
- data/lib/flipper/ui/views/features.erb +50 -36
- data/lib/flipper/ui/views/layout.erb +4 -14
- data/lib/flipper/version.rb +1 -1
- data/spec/flipper/ui/action_spec.rb +61 -42
- data/spec/flipper/ui/actions/actors_gate_spec.rb +9 -13
- data/spec/flipper/ui/actions/feature_spec.rb +14 -16
- data/spec/flipper/ui/actions/features_spec.rb +49 -14
- data/spec/flipper/ui/actions/file_spec.rb +0 -10
- data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
- data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
- data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
- data/spec/flipper/ui/configuration_spec.rb +32 -34
- data/spec/flipper/ui/decorators/feature_spec.rb +2 -32
- data/spec/flipper/ui_spec.rb +1 -1
- metadata +17 -129
- data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
- data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
- data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
- data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
- data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
- data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
- data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
- data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
- data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
- data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
- data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
- data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
- data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
- data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
- data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
- data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
- data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
- data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
- data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
- data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
- data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
- data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
- data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
- data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
- data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
- data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
- data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
- data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
- data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
- data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
- data/lib/flipper/ui/eruby.rb +0 -11
- data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
- data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
- data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
- data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
- data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
- data/lib/flipper/ui/public/images/remove.png +0 -0
- data/lib/flipper/ui/public/octicons/octicons.less +0 -235
- data/lib/flipper/ui/public/octicons/sprockets-octicons.scss +0 -232
@@ -1,42 +0,0 @@
|
|
1
|
-
// Responsive images (ensure images don't scale beyond their parents)
|
2
|
-
//
|
3
|
-
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
4
|
-
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
5
|
-
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
6
|
-
// which weren't expecting the images within themselves to be involuntarily resized.
|
7
|
-
// See also https://github.com/twbs/bootstrap/issues/18178
|
8
|
-
.img-fluid {
|
9
|
-
@include img-fluid;
|
10
|
-
}
|
11
|
-
|
12
|
-
|
13
|
-
// Image thumbnails
|
14
|
-
.img-thumbnail {
|
15
|
-
padding: $thumbnail-padding;
|
16
|
-
background-color: $thumbnail-bg;
|
17
|
-
border: $thumbnail-border-width solid $thumbnail-border-color;
|
18
|
-
@include border-radius($thumbnail-border-radius);
|
19
|
-
@include box-shadow($thumbnail-box-shadow);
|
20
|
-
|
21
|
-
// Keep them at most 100% wide
|
22
|
-
@include img-fluid;
|
23
|
-
}
|
24
|
-
|
25
|
-
//
|
26
|
-
// Figures
|
27
|
-
//
|
28
|
-
|
29
|
-
.figure {
|
30
|
-
// Ensures the caption's text aligns with the image.
|
31
|
-
display: inline-block;
|
32
|
-
}
|
33
|
-
|
34
|
-
.figure-img {
|
35
|
-
margin-bottom: ($spacer / 2);
|
36
|
-
line-height: 1;
|
37
|
-
}
|
38
|
-
|
39
|
-
.figure-caption {
|
40
|
-
font-size: $figure-caption-font-size;
|
41
|
-
color: $figure-caption-color;
|
42
|
-
}
|
@@ -1,159 +0,0 @@
|
|
1
|
-
// stylelint-disable selector-no-qualifying-type
|
2
|
-
|
3
|
-
//
|
4
|
-
// Base styles
|
5
|
-
//
|
6
|
-
|
7
|
-
.input-group {
|
8
|
-
position: relative;
|
9
|
-
display: flex;
|
10
|
-
flex-wrap: wrap; // For form validation feedback
|
11
|
-
align-items: stretch;
|
12
|
-
width: 100%;
|
13
|
-
|
14
|
-
> .form-control,
|
15
|
-
> .custom-select,
|
16
|
-
> .custom-file {
|
17
|
-
position: relative; // For focus state's z-index
|
18
|
-
flex: 1 1 auto;
|
19
|
-
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
20
|
-
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
21
|
-
width: 1%;
|
22
|
-
margin-bottom: 0;
|
23
|
-
|
24
|
-
// Bring the "active" form control to the top of surrounding elements
|
25
|
-
&:focus {
|
26
|
-
z-index: 3;
|
27
|
-
}
|
28
|
-
|
29
|
-
+ .form-control,
|
30
|
-
+ .custom-select,
|
31
|
-
+ .custom-file {
|
32
|
-
margin-left: -$input-border-width;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
> .form-control,
|
37
|
-
> .custom-select {
|
38
|
-
&:not(:last-child) { @include border-right-radius(0); }
|
39
|
-
&:not(:first-child) { @include border-left-radius(0); }
|
40
|
-
}
|
41
|
-
|
42
|
-
// Custom file inputs have more complex markup, thus requiring different
|
43
|
-
// border-radius overrides.
|
44
|
-
> .custom-file {
|
45
|
-
display: flex;
|
46
|
-
align-items: center;
|
47
|
-
|
48
|
-
&:not(:last-child) .custom-file-label,
|
49
|
-
&:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }
|
50
|
-
&:not(:first-child) .custom-file-label,
|
51
|
-
&:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }
|
52
|
-
}
|
53
|
-
}
|
54
|
-
|
55
|
-
|
56
|
-
// Prepend and append
|
57
|
-
//
|
58
|
-
// While it requires one extra layer of HTML for each, dedicated prepend and
|
59
|
-
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
|
60
|
-
// 3) support HTML5 form validation.
|
61
|
-
|
62
|
-
.input-group-prepend,
|
63
|
-
.input-group-append {
|
64
|
-
display: flex;
|
65
|
-
|
66
|
-
// Ensure buttons are always above inputs for more visually pleasing borders.
|
67
|
-
// This isn't needed for `.input-group-text` since it shares the same border-color
|
68
|
-
// as our inputs.
|
69
|
-
.btn {
|
70
|
-
position: relative;
|
71
|
-
z-index: 2;
|
72
|
-
}
|
73
|
-
|
74
|
-
.btn + .btn,
|
75
|
-
.btn + .input-group-text,
|
76
|
-
.input-group-text + .input-group-text,
|
77
|
-
.input-group-text + .btn {
|
78
|
-
margin-left: -$input-border-width;
|
79
|
-
}
|
80
|
-
}
|
81
|
-
|
82
|
-
.input-group-prepend { margin-right: -$input-border-width; }
|
83
|
-
.input-group-append { margin-left: -$input-border-width; }
|
84
|
-
|
85
|
-
|
86
|
-
// Textual addons
|
87
|
-
//
|
88
|
-
// Serves as a catch-all element for any text or radio/checkbox input you wish
|
89
|
-
// to prepend or append to an input.
|
90
|
-
|
91
|
-
.input-group-text {
|
92
|
-
display: flex;
|
93
|
-
align-items: center;
|
94
|
-
padding: $input-padding-y $input-padding-x;
|
95
|
-
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
96
|
-
font-size: $font-size-base; // Match inputs
|
97
|
-
font-weight: $font-weight-normal;
|
98
|
-
line-height: $input-line-height;
|
99
|
-
color: $input-group-addon-color;
|
100
|
-
text-align: center;
|
101
|
-
white-space: nowrap;
|
102
|
-
background-color: $input-group-addon-bg;
|
103
|
-
border: $input-border-width solid $input-group-addon-border-color;
|
104
|
-
@include border-radius($input-border-radius);
|
105
|
-
|
106
|
-
// Nuke default margins from checkboxes and radios to vertically center within.
|
107
|
-
input[type="radio"],
|
108
|
-
input[type="checkbox"] {
|
109
|
-
margin-top: 0;
|
110
|
-
}
|
111
|
-
}
|
112
|
-
|
113
|
-
|
114
|
-
// Sizing
|
115
|
-
//
|
116
|
-
// Remix the default form control sizing classes into new ones for easier
|
117
|
-
// manipulation.
|
118
|
-
|
119
|
-
.input-group-lg > .form-control,
|
120
|
-
.input-group-lg > .input-group-prepend > .input-group-text,
|
121
|
-
.input-group-lg > .input-group-append > .input-group-text,
|
122
|
-
.input-group-lg > .input-group-prepend > .btn,
|
123
|
-
.input-group-lg > .input-group-append > .btn {
|
124
|
-
@extend .form-control-lg;
|
125
|
-
}
|
126
|
-
|
127
|
-
.input-group-sm > .form-control,
|
128
|
-
.input-group-sm > .input-group-prepend > .input-group-text,
|
129
|
-
.input-group-sm > .input-group-append > .input-group-text,
|
130
|
-
.input-group-sm > .input-group-prepend > .btn,
|
131
|
-
.input-group-sm > .input-group-append > .btn {
|
132
|
-
@extend .form-control-sm;
|
133
|
-
}
|
134
|
-
|
135
|
-
|
136
|
-
// Prepend and append rounded corners
|
137
|
-
//
|
138
|
-
// These rulesets must come after the sizing ones to properly override sm and lg
|
139
|
-
// border-radius values when extending. They're more specific than we'd like
|
140
|
-
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
141
|
-
|
142
|
-
|
143
|
-
.input-group > .input-group-prepend > .btn,
|
144
|
-
.input-group > .input-group-prepend > .input-group-text,
|
145
|
-
.input-group > .input-group-append:not(:last-child) > .btn,
|
146
|
-
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
147
|
-
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
148
|
-
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
149
|
-
@include border-right-radius(0);
|
150
|
-
}
|
151
|
-
|
152
|
-
.input-group > .input-group-append > .btn,
|
153
|
-
.input-group > .input-group-append > .input-group-text,
|
154
|
-
.input-group > .input-group-prepend:not(:first-child) > .btn,
|
155
|
-
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
|
156
|
-
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
|
157
|
-
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
|
158
|
-
@include border-left-radius(0);
|
159
|
-
}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
.jumbotron {
|
2
|
-
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
3
|
-
margin-bottom: $jumbotron-padding;
|
4
|
-
background-color: $jumbotron-bg;
|
5
|
-
@include border-radius($border-radius-lg);
|
6
|
-
|
7
|
-
@include media-breakpoint-up(sm) {
|
8
|
-
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
9
|
-
}
|
10
|
-
}
|
11
|
-
|
12
|
-
.jumbotron-fluid {
|
13
|
-
padding-right: 0;
|
14
|
-
padding-left: 0;
|
15
|
-
@include border-radius(0);
|
16
|
-
}
|
@@ -1,115 +0,0 @@
|
|
1
|
-
// Base class
|
2
|
-
//
|
3
|
-
// Easily usable on <ul>, <ol>, or <div>.
|
4
|
-
|
5
|
-
.list-group {
|
6
|
-
display: flex;
|
7
|
-
flex-direction: column;
|
8
|
-
|
9
|
-
// No need to set list-style: none; since .list-group-item is block level
|
10
|
-
padding-left: 0; // reset padding because ul and ol
|
11
|
-
margin-bottom: 0;
|
12
|
-
}
|
13
|
-
|
14
|
-
|
15
|
-
// Interactive list items
|
16
|
-
//
|
17
|
-
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
18
|
-
// list items. Includes an extra `.active` modifier class for selected items.
|
19
|
-
|
20
|
-
.list-group-item-action {
|
21
|
-
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
22
|
-
color: $list-group-action-color;
|
23
|
-
text-align: inherit; // For `<button>`s (anchors inherit)
|
24
|
-
|
25
|
-
// Hover state
|
26
|
-
@include hover-focus {
|
27
|
-
color: $list-group-action-hover-color;
|
28
|
-
text-decoration: none;
|
29
|
-
background-color: $list-group-hover-bg;
|
30
|
-
}
|
31
|
-
|
32
|
-
&:active {
|
33
|
-
color: $list-group-action-active-color;
|
34
|
-
background-color: $list-group-action-active-bg;
|
35
|
-
}
|
36
|
-
}
|
37
|
-
|
38
|
-
|
39
|
-
// Individual list items
|
40
|
-
//
|
41
|
-
// Use on `li`s or `div`s within the `.list-group` parent.
|
42
|
-
|
43
|
-
.list-group-item {
|
44
|
-
position: relative;
|
45
|
-
display: block;
|
46
|
-
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
47
|
-
// Place the border on the list items and negative margin up for better styling
|
48
|
-
margin-bottom: -$list-group-border-width;
|
49
|
-
background-color: $list-group-bg;
|
50
|
-
border: $list-group-border-width solid $list-group-border-color;
|
51
|
-
|
52
|
-
&:first-child {
|
53
|
-
@include border-top-radius($list-group-border-radius);
|
54
|
-
}
|
55
|
-
|
56
|
-
&:last-child {
|
57
|
-
margin-bottom: 0;
|
58
|
-
@include border-bottom-radius($list-group-border-radius);
|
59
|
-
}
|
60
|
-
|
61
|
-
@include hover-focus {
|
62
|
-
z-index: 1; // Place hover/active items above their siblings for proper border styling
|
63
|
-
text-decoration: none;
|
64
|
-
}
|
65
|
-
|
66
|
-
&.disabled,
|
67
|
-
&:disabled {
|
68
|
-
color: $list-group-disabled-color;
|
69
|
-
background-color: $list-group-disabled-bg;
|
70
|
-
}
|
71
|
-
|
72
|
-
// Include both here for `<a>`s and `<button>`s
|
73
|
-
&.active {
|
74
|
-
z-index: 2; // Place active items above their siblings for proper border styling
|
75
|
-
color: $list-group-active-color;
|
76
|
-
background-color: $list-group-active-bg;
|
77
|
-
border-color: $list-group-active-border-color;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
|
81
|
-
|
82
|
-
// Flush list items
|
83
|
-
//
|
84
|
-
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
85
|
-
// useful within other components (e.g., cards).
|
86
|
-
|
87
|
-
.list-group-flush {
|
88
|
-
.list-group-item {
|
89
|
-
border-right: 0;
|
90
|
-
border-left: 0;
|
91
|
-
@include border-radius(0);
|
92
|
-
}
|
93
|
-
|
94
|
-
&:first-child {
|
95
|
-
.list-group-item:first-child {
|
96
|
-
border-top: 0;
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
&:last-child {
|
101
|
-
.list-group-item:last-child {
|
102
|
-
border-bottom: 0;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
|
108
|
-
// Contextual variants
|
109
|
-
//
|
110
|
-
// Add modifier classes to change text and background color on individual items.
|
111
|
-
// Organizationally, this must come after the `:hover` states.
|
112
|
-
|
113
|
-
@each $color, $value in $theme-colors {
|
114
|
-
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
115
|
-
}
|
@@ -1,42 +0,0 @@
|
|
1
|
-
// Toggles
|
2
|
-
//
|
3
|
-
// Used in conjunction with global variables to enable certain theme features.
|
4
|
-
|
5
|
-
// Utilities
|
6
|
-
@import "mixins/breakpoints";
|
7
|
-
@import "mixins/hover";
|
8
|
-
@import "mixins/image";
|
9
|
-
@import "mixins/badge";
|
10
|
-
@import "mixins/resize";
|
11
|
-
@import "mixins/screen-reader";
|
12
|
-
@import "mixins/size";
|
13
|
-
@import "mixins/reset-text";
|
14
|
-
@import "mixins/text-emphasis";
|
15
|
-
@import "mixins/text-hide";
|
16
|
-
@import "mixins/text-truncate";
|
17
|
-
@import "mixins/visibility";
|
18
|
-
|
19
|
-
// // Components
|
20
|
-
@import "mixins/alert";
|
21
|
-
@import "mixins/buttons";
|
22
|
-
@import "mixins/caret";
|
23
|
-
@import "mixins/pagination";
|
24
|
-
@import "mixins/lists";
|
25
|
-
@import "mixins/list-group";
|
26
|
-
@import "mixins/nav-divider";
|
27
|
-
@import "mixins/forms";
|
28
|
-
@import "mixins/table-row";
|
29
|
-
|
30
|
-
// // Skins
|
31
|
-
@import "mixins/background-variant";
|
32
|
-
@import "mixins/border-radius";
|
33
|
-
@import "mixins/box-shadow";
|
34
|
-
@import "mixins/gradients";
|
35
|
-
@import "mixins/transition";
|
36
|
-
|
37
|
-
// // Layout
|
38
|
-
@import "mixins/clearfix";
|
39
|
-
// @import "mixins/navbar-align";
|
40
|
-
@import "mixins/grid-framework";
|
41
|
-
@import "mixins/grid";
|
42
|
-
@import "mixins/float";
|
@@ -1,168 +0,0 @@
|
|
1
|
-
// .modal-open - body class for killing the scroll
|
2
|
-
// .modal - container to scroll within
|
3
|
-
// .modal-dialog - positioning shell for the actual modal
|
4
|
-
// .modal-content - actual modal w/ bg and corners and stuff
|
5
|
-
|
6
|
-
|
7
|
-
// Kill the scroll on the body
|
8
|
-
.modal-open {
|
9
|
-
overflow: hidden;
|
10
|
-
}
|
11
|
-
|
12
|
-
// Container that the modal scrolls within
|
13
|
-
.modal {
|
14
|
-
position: fixed;
|
15
|
-
top: 0;
|
16
|
-
right: 0;
|
17
|
-
bottom: 0;
|
18
|
-
left: 0;
|
19
|
-
z-index: $zindex-modal;
|
20
|
-
display: none;
|
21
|
-
overflow: hidden;
|
22
|
-
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
23
|
-
// https://github.com/twbs/bootstrap/pull/10951.
|
24
|
-
outline: 0;
|
25
|
-
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
26
|
-
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
27
|
-
// See also https://github.com/twbs/bootstrap/issues/17695
|
28
|
-
|
29
|
-
.modal-open & {
|
30
|
-
overflow-x: hidden;
|
31
|
-
overflow-y: auto;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
// Shell div to position the modal with bottom padding
|
36
|
-
.modal-dialog {
|
37
|
-
position: relative;
|
38
|
-
width: auto;
|
39
|
-
margin: $modal-dialog-margin;
|
40
|
-
// allow clicks to pass through for custom click handling to close modal
|
41
|
-
pointer-events: none;
|
42
|
-
|
43
|
-
// When fading in the modal, animate it to slide down
|
44
|
-
.modal.fade & {
|
45
|
-
@include transition($modal-transition);
|
46
|
-
transform: translate(0, -25%);
|
47
|
-
}
|
48
|
-
.modal.show & {
|
49
|
-
transform: translate(0, 0);
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
.modal-dialog-centered {
|
54
|
-
display: flex;
|
55
|
-
align-items: center;
|
56
|
-
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
57
|
-
}
|
58
|
-
|
59
|
-
// Actual modal
|
60
|
-
.modal-content {
|
61
|
-
position: relative;
|
62
|
-
display: flex;
|
63
|
-
flex-direction: column;
|
64
|
-
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
65
|
-
// counteract the pointer-events: none; in the .modal-dialog
|
66
|
-
pointer-events: auto;
|
67
|
-
background-color: $modal-content-bg;
|
68
|
-
background-clip: padding-box;
|
69
|
-
border: $modal-content-border-width solid $modal-content-border-color;
|
70
|
-
@include border-radius($border-radius-lg);
|
71
|
-
@include box-shadow($modal-content-box-shadow-xs);
|
72
|
-
// Remove focus outline from opened modal
|
73
|
-
outline: 0;
|
74
|
-
}
|
75
|
-
|
76
|
-
// Modal background
|
77
|
-
.modal-backdrop {
|
78
|
-
position: fixed;
|
79
|
-
top: 0;
|
80
|
-
right: 0;
|
81
|
-
bottom: 0;
|
82
|
-
left: 0;
|
83
|
-
z-index: $zindex-modal-backdrop;
|
84
|
-
background-color: $modal-backdrop-bg;
|
85
|
-
|
86
|
-
// Fade for backdrop
|
87
|
-
&.fade { opacity: 0; }
|
88
|
-
&.show { opacity: $modal-backdrop-opacity; }
|
89
|
-
}
|
90
|
-
|
91
|
-
// Modal header
|
92
|
-
// Top section of the modal w/ title and dismiss
|
93
|
-
.modal-header {
|
94
|
-
display: flex;
|
95
|
-
align-items: flex-start; // so the close btn always stays on the upper right corner
|
96
|
-
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
97
|
-
padding: $modal-header-padding;
|
98
|
-
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
99
|
-
@include border-top-radius($border-radius-lg);
|
100
|
-
|
101
|
-
.close {
|
102
|
-
padding: $modal-header-padding;
|
103
|
-
// auto on the left force icon to the right even when there is no .modal-title
|
104
|
-
margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
// Title text within header
|
109
|
-
.modal-title {
|
110
|
-
margin-bottom: 0;
|
111
|
-
line-height: $modal-title-line-height;
|
112
|
-
}
|
113
|
-
|
114
|
-
// Modal body
|
115
|
-
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
116
|
-
.modal-body {
|
117
|
-
position: relative;
|
118
|
-
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
119
|
-
// when should there be a fixed height on `.modal-dialog`.
|
120
|
-
flex: 1 1 auto;
|
121
|
-
padding: $modal-inner-padding;
|
122
|
-
}
|
123
|
-
|
124
|
-
// Footer (for actions)
|
125
|
-
.modal-footer {
|
126
|
-
display: flex;
|
127
|
-
align-items: center; // vertically center
|
128
|
-
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
129
|
-
padding: $modal-inner-padding;
|
130
|
-
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
131
|
-
|
132
|
-
// Easily place margin between footer elements
|
133
|
-
> :not(:first-child) { margin-left: .25rem; }
|
134
|
-
> :not(:last-child) { margin-right: .25rem; }
|
135
|
-
}
|
136
|
-
|
137
|
-
// Measure scrollbar width for padding body during modal show/hide
|
138
|
-
.modal-scrollbar-measure {
|
139
|
-
position: absolute;
|
140
|
-
top: -9999px;
|
141
|
-
width: 50px;
|
142
|
-
height: 50px;
|
143
|
-
overflow: scroll;
|
144
|
-
}
|
145
|
-
|
146
|
-
// Scale up the modal
|
147
|
-
@include media-breakpoint-up(sm) {
|
148
|
-
// Automatically set modal's width for larger viewports
|
149
|
-
.modal-dialog {
|
150
|
-
max-width: $modal-md;
|
151
|
-
margin: $modal-dialog-margin-y-sm-up auto;
|
152
|
-
}
|
153
|
-
|
154
|
-
.modal-dialog-centered {
|
155
|
-
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
156
|
-
}
|
157
|
-
|
158
|
-
.modal-content {
|
159
|
-
@include box-shadow($modal-content-box-shadow-sm-up);
|
160
|
-
}
|
161
|
-
|
162
|
-
.modal-sm { max-width: $modal-sm; }
|
163
|
-
|
164
|
-
}
|
165
|
-
|
166
|
-
@include media-breakpoint-up(lg) {
|
167
|
-
.modal-lg { max-width: $modal-lg; }
|
168
|
-
}
|