viniBaxter-desk_front 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/lib/viniBaxter/desk_front/version.rb +1 -1
  3. data/lib/viniBaxter/sass/desk_front.scss +2 -20
  4. metadata +2 -93
  5. data/lib/viniBaxter/sass/desk_front/_user-variables.scss +0 -8
  6. data/lib/viniBaxter/sass/desk_front/_user.scss +0 -4
  7. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_alert.scss +0 -51
  8. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_badge.scss +0 -54
  9. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_breadcrumb.scss +0 -42
  10. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_button-group.scss +0 -163
  11. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_buttons.scss +0 -139
  12. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_card.scss +0 -278
  13. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_carousel.scss +0 -197
  14. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_close.scss +0 -41
  15. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_code.scss +0 -48
  16. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_custom-forms.scss +0 -521
  17. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_dropdown.scss +0 -191
  18. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_forms.scss +0 -338
  19. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_functions.scss +0 -134
  20. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_grid.scss +0 -69
  21. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_images.scss +0 -42
  22. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_input-group.scss +0 -191
  23. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_jumbotron.scss +0 -17
  24. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_list-group.scss +0 -158
  25. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_media.scss +0 -8
  26. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_mixins.scss +0 -47
  27. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_modal.scss +0 -239
  28. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_nav.scss +0 -120
  29. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_navbar.scss +0 -324
  30. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_pagination.scss +0 -73
  31. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_popover.scss +0 -170
  32. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_print.scss +0 -141
  33. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_progress.scss +0 -46
  34. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_reboot.scss +0 -482
  35. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_root.scss +0 -20
  36. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_spinners.scss +0 -55
  37. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_tables.scss +0 -185
  38. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_toasts.scss +0 -44
  39. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_tooltip.scss +0 -115
  40. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_transitions.scss +0 -20
  41. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_type.scss +0 -125
  42. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_utilities.scss +0 -17
  43. data/lib/viniBaxter/sass/desk_front/bootstrap_4/_variables.scss +0 -1143
  44. data/lib/viniBaxter/sass/desk_front/bootstrap_4/bootstrap-grid.scss +0 -29
  45. data/lib/viniBaxter/sass/desk_front/bootstrap_4/bootstrap-reboot.scss +0 -12
  46. data/lib/viniBaxter/sass/desk_front/bootstrap_4/bootstrap.scss +0 -44
  47. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_alert.scss +0 -13
  48. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_background-variant.scss +0 -22
  49. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_badge.scss +0 -17
  50. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_border-radius.scss +0 -63
  51. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_box-shadow.scss +0 -20
  52. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_breakpoints.scss +0 -123
  53. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_buttons.scss +0 -110
  54. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_caret.scss +0 -62
  55. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_clearfix.scss +0 -7
  56. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_deprecate.scss +0 -10
  57. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_float.scss +0 -14
  58. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_forms.scss +0 -177
  59. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_gradients.scss +0 -45
  60. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_grid-framework.scss +0 -71
  61. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_grid.scss +0 -69
  62. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_hover.scss +0 -37
  63. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_image.scss +0 -36
  64. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_list-group.scss +0 -21
  65. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_lists.scss +0 -7
  66. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_nav-divider.scss +0 -11
  67. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_pagination.scss +0 -22
  68. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_reset-text.scss +0 -17
  69. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_resize.scss +0 -6
  70. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_screen-reader.scss +0 -34
  71. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_size.scss +0 -7
  72. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_table-row.scss +0 -39
  73. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_text-emphasis.scss +0 -17
  74. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_text-hide.scss +0 -11
  75. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_text-truncate.scss +0 -8
  76. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_transition.scss +0 -16
  77. data/lib/viniBaxter/sass/desk_front/bootstrap_4/mixins/_visibility.scss +0 -8
  78. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_align.scss +0 -8
  79. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_background.scss +0 -19
  80. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_borders.scss +0 -75
  81. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_clearfix.scss +0 -3
  82. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_display.scss +0 -26
  83. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_embed.scss +0 -39
  84. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_flex.scss +0 -51
  85. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_float.scss +0 -11
  86. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_overflow.scss +0 -5
  87. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_position.scss +0 -32
  88. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_screenreaders.scss +0 -11
  89. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_shadows.scss +0 -6
  90. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_sizing.scss +0 -20
  91. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_spacing.scss +0 -73
  92. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_stretched-link.scss +0 -19
  93. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_text.scss +0 -72
  94. data/lib/viniBaxter/sass/desk_front/bootstrap_4/utilities/_visibility.scss +0 -13
  95. data/lib/viniBaxter/sass/desk_front/bootstrap_4/vendor/_rfs.scss +0 -204
@@ -1,191 +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
- > .form-control-plaintext,
16
- > .custom-select,
17
- > .custom-file {
18
- position: relative; // For focus state's z-index
19
- flex: 1 1 0%;
20
- min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
21
- margin-bottom: 0;
22
-
23
- + .form-control,
24
- + .custom-select,
25
- + .custom-file {
26
- margin-left: -$input-border-width;
27
- }
28
- }
29
-
30
- // Bring the "active" form control to the top of surrounding elements
31
- > .form-control:focus,
32
- > .custom-select:focus,
33
- > .custom-file .custom-file-input:focus ~ .custom-file-label {
34
- z-index: 3;
35
- }
36
-
37
- // Bring the custom file input above the label
38
- > .custom-file .custom-file-input:focus {
39
- z-index: 4;
40
- }
41
-
42
- > .form-control,
43
- > .custom-select {
44
- &:not(:last-child) { @include border-right-radius(0); }
45
- &:not(:first-child) { @include border-left-radius(0); }
46
- }
47
-
48
- // Custom file inputs have more complex markup, thus requiring different
49
- // border-radius overrides.
50
- > .custom-file {
51
- display: flex;
52
- align-items: center;
53
-
54
- &:not(:last-child) .custom-file-label,
55
- &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
56
- &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
57
- }
58
- }
59
-
60
-
61
- // Prepend and append
62
- //
63
- // While it requires one extra layer of HTML for each, dedicated prepend and
64
- // append elements allow us to 1) be less clever, 2) simplify our selectors, and
65
- // 3) support HTML5 form validation.
66
-
67
- .input-group-prepend,
68
- .input-group-append {
69
- display: flex;
70
-
71
- // Ensure buttons are always above inputs for more visually pleasing borders.
72
- // This isn't needed for `.input-group-text` since it shares the same border-color
73
- // as our inputs.
74
- .btn {
75
- position: relative;
76
- z-index: 2;
77
-
78
- &:focus {
79
- z-index: 3;
80
- }
81
- }
82
-
83
- .btn + .btn,
84
- .btn + .input-group-text,
85
- .input-group-text + .input-group-text,
86
- .input-group-text + .btn {
87
- margin-left: -$input-border-width;
88
- }
89
- }
90
-
91
- .input-group-prepend { margin-right: -$input-border-width; }
92
- .input-group-append { margin-left: -$input-border-width; }
93
-
94
-
95
- // Textual addons
96
- //
97
- // Serves as a catch-all element for any text or radio/checkbox input you wish
98
- // to prepend or append to an input.
99
-
100
- .input-group-text {
101
- display: flex;
102
- align-items: center;
103
- padding: $input-padding-y $input-padding-x;
104
- margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
105
- @include font-size($input-font-size); // Match inputs
106
- font-weight: $font-weight-normal;
107
- line-height: $input-line-height;
108
- color: $input-group-addon-color;
109
- text-align: center;
110
- white-space: nowrap;
111
- background-color: $input-group-addon-bg;
112
- border: $input-border-width solid $input-group-addon-border-color;
113
- @include border-radius($input-border-radius);
114
-
115
- // Nuke default margins from checkboxes and radios to vertically center within.
116
- input[type="radio"],
117
- input[type="checkbox"] {
118
- margin-top: 0;
119
- }
120
- }
121
-
122
-
123
- // Sizing
124
- //
125
- // Remix the default form control sizing classes into new ones for easier
126
- // manipulation.
127
-
128
- .input-group-lg > .form-control:not(textarea),
129
- .input-group-lg > .custom-select {
130
- height: $input-height-lg;
131
- }
132
-
133
- .input-group-lg > .form-control,
134
- .input-group-lg > .custom-select,
135
- .input-group-lg > .input-group-prepend > .input-group-text,
136
- .input-group-lg > .input-group-append > .input-group-text,
137
- .input-group-lg > .input-group-prepend > .btn,
138
- .input-group-lg > .input-group-append > .btn {
139
- padding: $input-padding-y-lg $input-padding-x-lg;
140
- @include font-size($input-font-size-lg);
141
- line-height: $input-line-height-lg;
142
- @include border-radius($input-border-radius-lg);
143
- }
144
-
145
- .input-group-sm > .form-control:not(textarea),
146
- .input-group-sm > .custom-select {
147
- height: $input-height-sm;
148
- }
149
-
150
- .input-group-sm > .form-control,
151
- .input-group-sm > .custom-select,
152
- .input-group-sm > .input-group-prepend > .input-group-text,
153
- .input-group-sm > .input-group-append > .input-group-text,
154
- .input-group-sm > .input-group-prepend > .btn,
155
- .input-group-sm > .input-group-append > .btn {
156
- padding: $input-padding-y-sm $input-padding-x-sm;
157
- @include font-size($input-font-size-sm);
158
- line-height: $input-line-height-sm;
159
- @include border-radius($input-border-radius-sm);
160
- }
161
-
162
- .input-group-lg > .custom-select,
163
- .input-group-sm > .custom-select {
164
- padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
165
- }
166
-
167
-
168
- // Prepend and append rounded corners
169
- //
170
- // These rulesets must come after the sizing ones to properly override sm and lg
171
- // border-radius values when extending. They're more specific than we'd like
172
- // with the `.input-group >` part, but without it, we cannot override the sizing.
173
-
174
-
175
- .input-group > .input-group-prepend > .btn,
176
- .input-group > .input-group-prepend > .input-group-text,
177
- .input-group > .input-group-append:not(:last-child) > .btn,
178
- .input-group > .input-group-append:not(:last-child) > .input-group-text,
179
- .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
180
- .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
181
- @include border-right-radius(0);
182
- }
183
-
184
- .input-group > .input-group-append > .btn,
185
- .input-group > .input-group-append > .input-group-text,
186
- .input-group > .input-group-prepend:not(:first-child) > .btn,
187
- .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
188
- .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
189
- .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
190
- @include border-left-radius(0);
191
- }
@@ -1,17 +0,0 @@
1
- .jumbotron {
2
- padding: $jumbotron-padding ($jumbotron-padding / 2);
3
- margin-bottom: $jumbotron-padding;
4
- color: $jumbotron-color;
5
- background-color: $jumbotron-bg;
6
- @include border-radius($border-radius-lg);
7
-
8
- @include media-breakpoint-up(sm) {
9
- padding: ($jumbotron-padding * 2) $jumbotron-padding;
10
- }
11
- }
12
-
13
- .jumbotron-fluid {
14
- padding-right: 0;
15
- padding-left: 0;
16
- @include border-radius(0);
17
- }
@@ -1,158 +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
- z-index: 1; // Place hover/focus items above their siblings for proper border styling
28
- color: $list-group-action-hover-color;
29
- text-decoration: none;
30
- background-color: $list-group-hover-bg;
31
- }
32
-
33
- &:active {
34
- color: $list-group-action-active-color;
35
- background-color: $list-group-action-active-bg;
36
- }
37
- }
38
-
39
-
40
- // Individual list items
41
- //
42
- // Use on `li`s or `div`s within the `.list-group` parent.
43
-
44
- .list-group-item {
45
- position: relative;
46
- display: block;
47
- padding: $list-group-item-padding-y $list-group-item-padding-x;
48
- color: $list-group-color;
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
- @include border-bottom-radius($list-group-border-radius);
58
- }
59
-
60
- &.disabled,
61
- &:disabled {
62
- color: $list-group-disabled-color;
63
- pointer-events: none;
64
- background-color: $list-group-disabled-bg;
65
- }
66
-
67
- // Include both here for `<a>`s and `<button>`s
68
- &.active {
69
- z-index: 2; // Place active items above their siblings for proper border styling
70
- color: $list-group-active-color;
71
- background-color: $list-group-active-bg;
72
- border-color: $list-group-active-border-color;
73
- }
74
-
75
- & + & {
76
- border-top-width: 0;
77
-
78
- &.active {
79
- margin-top: -$list-group-border-width;
80
- border-top-width: $list-group-border-width;
81
- }
82
- }
83
- }
84
-
85
-
86
- // Horizontal
87
- //
88
- // Change the layout of list group items from vertical (default) to horizontal.
89
-
90
- @each $breakpoint in map-keys($grid-breakpoints) {
91
- @include media-breakpoint-up($breakpoint) {
92
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
93
-
94
- .list-group-horizontal#{$infix} {
95
- flex-direction: row;
96
-
97
- .list-group-item {
98
- &:first-child {
99
- @include border-bottom-left-radius($list-group-border-radius);
100
- @include border-top-right-radius(0);
101
- }
102
-
103
- &:last-child {
104
- @include border-top-right-radius($list-group-border-radius);
105
- @include border-bottom-left-radius(0);
106
- }
107
-
108
- &.active {
109
- margin-top: 0;
110
- }
111
-
112
- & + .list-group-item {
113
- border-top-width: $list-group-border-width;
114
- border-left-width: 0;
115
-
116
- &.active {
117
- margin-left: -$list-group-border-width;
118
- border-left-width: $list-group-border-width;
119
- }
120
- }
121
- }
122
- }
123
- }
124
- }
125
-
126
-
127
- // Flush list items
128
- //
129
- // Remove borders and border-radius to keep list group items edge-to-edge. Most
130
- // useful within other components (e.g., cards).
131
-
132
- .list-group-flush {
133
- .list-group-item {
134
- border-right-width: 0;
135
- border-left-width: 0;
136
- @include border-radius(0);
137
-
138
- &:first-child {
139
- border-top-width: 0;
140
- }
141
- }
142
-
143
- &:last-child {
144
- .list-group-item:last-child {
145
- border-bottom-width: 0;
146
- }
147
- }
148
- }
149
-
150
-
151
- // Contextual variants
152
- //
153
- // Add modifier classes to change text and background color on individual items.
154
- // Organizationally, this must come after the `:hover` states.
155
-
156
- @each $color, $value in $theme-colors {
157
- @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
158
- }
@@ -1,8 +0,0 @@
1
- .media {
2
- display: flex;
3
- align-items: flex-start;
4
- }
5
-
6
- .media-body {
7
- flex: 1;
8
- }
@@ -1,47 +0,0 @@
1
- // Toggles
2
- //
3
- // Used in conjunction with global variables to enable certain theme features.
4
-
5
- // Vendor
6
- @import "vendor/rfs";
7
-
8
- // Deprecate
9
- @import "mixins/deprecate";
10
-
11
- // Utilities
12
- @import "mixins/breakpoints";
13
- @import "mixins/hover";
14
- @import "mixins/image";
15
- @import "mixins/badge";
16
- @import "mixins/resize";
17
- @import "mixins/screen-reader";
18
- @import "mixins/size";
19
- @import "mixins/reset-text";
20
- @import "mixins/text-emphasis";
21
- @import "mixins/text-hide";
22
- @import "mixins/text-truncate";
23
- @import "mixins/visibility";
24
-
25
- // Components
26
- @import "mixins/alert";
27
- @import "mixins/buttons";
28
- @import "mixins/caret";
29
- @import "mixins/pagination";
30
- @import "mixins/lists";
31
- @import "mixins/list-group";
32
- @import "mixins/nav-divider";
33
- @import "mixins/forms";
34
- @import "mixins/table-row";
35
-
36
- // Skins
37
- @import "mixins/background-variant";
38
- @import "mixins/border-radius";
39
- @import "mixins/box-shadow";
40
- @import "mixins/gradients";
41
- @import "mixins/transition";
42
-
43
- // Layout
44
- @import "mixins/clearfix";
45
- @import "mixins/grid-framework";
46
- @import "mixins/grid";
47
- @import "mixins/float";
@@ -1,239 +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
- .modal-open {
8
- // Kill the scroll on the body
9
- overflow: hidden;
10
-
11
- .modal {
12
- overflow-x: hidden;
13
- overflow-y: auto;
14
- }
15
- }
16
-
17
- // Container that the modal scrolls within
18
- .modal {
19
- position: fixed;
20
- top: 0;
21
- left: 0;
22
- z-index: $zindex-modal;
23
- display: none;
24
- width: 100%;
25
- height: 100%;
26
- overflow: hidden;
27
- // Prevent Chrome on Windows from adding a focus outline. For details, see
28
- // https://github.com/twbs/bootstrap/pull/10951.
29
- outline: 0;
30
- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
31
- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
32
- // See also https://github.com/twbs/bootstrap/issues/17695
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: $modal-fade-transform;
47
- }
48
- .modal.show & {
49
- transform: $modal-show-transform;
50
- }
51
-
52
- // When trying to close, animate focus to scale
53
- .modal.modal-static & {
54
- transform: $modal-scale-transform;
55
- }
56
- }
57
-
58
- .modal-dialog-scrollable {
59
- display: flex; // IE10/11
60
- max-height: subtract(100%, $modal-dialog-margin * 2);
61
-
62
- .modal-content {
63
- max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
64
- overflow: hidden;
65
- }
66
-
67
- .modal-header,
68
- .modal-footer {
69
- flex-shrink: 0;
70
- }
71
-
72
- .modal-body {
73
- overflow-y: auto;
74
- }
75
- }
76
-
77
- .modal-dialog-centered {
78
- display: flex;
79
- align-items: center;
80
- min-height: subtract(100%, $modal-dialog-margin * 2);
81
-
82
- // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
83
- &::before {
84
- display: block; // IE10
85
- height: subtract(100vh, $modal-dialog-margin * 2);
86
- content: "";
87
- }
88
-
89
- // Ensure `.modal-body` shows scrollbar (IE10/11)
90
- &.modal-dialog-scrollable {
91
- flex-direction: column;
92
- justify-content: center;
93
- height: 100%;
94
-
95
- .modal-content {
96
- max-height: none;
97
- }
98
-
99
- &::before {
100
- content: none;
101
- }
102
- }
103
- }
104
-
105
- // Actual modal
106
- .modal-content {
107
- position: relative;
108
- display: flex;
109
- flex-direction: column;
110
- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
111
- // counteract the pointer-events: none; in the .modal-dialog
112
- color: $modal-content-color;
113
- pointer-events: auto;
114
- background-color: $modal-content-bg;
115
- background-clip: padding-box;
116
- border: $modal-content-border-width solid $modal-content-border-color;
117
- @include border-radius($modal-content-border-radius);
118
- @include box-shadow($modal-content-box-shadow-xs);
119
- // Remove focus outline from opened modal
120
- outline: 0;
121
- }
122
-
123
- // Modal background
124
- .modal-backdrop {
125
- position: fixed;
126
- top: 0;
127
- left: 0;
128
- z-index: $zindex-modal-backdrop;
129
- width: 100vw;
130
- height: 100vh;
131
- background-color: $modal-backdrop-bg;
132
-
133
- // Fade for backdrop
134
- &.fade { opacity: 0; }
135
- &.show { opacity: $modal-backdrop-opacity; }
136
- }
137
-
138
- // Modal header
139
- // Top section of the modal w/ title and dismiss
140
- .modal-header {
141
- display: flex;
142
- align-items: flex-start; // so the close btn always stays on the upper right corner
143
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
144
- padding: $modal-header-padding;
145
- border-bottom: $modal-header-border-width solid $modal-header-border-color;
146
- @include border-top-radius($modal-content-inner-border-radius);
147
-
148
- .close {
149
- padding: $modal-header-padding;
150
- // auto on the left force icon to the right even when there is no .modal-title
151
- margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
152
- }
153
- }
154
-
155
- // Title text within header
156
- .modal-title {
157
- margin-bottom: 0;
158
- line-height: $modal-title-line-height;
159
- }
160
-
161
- // Modal body
162
- // Where all modal content resides (sibling of .modal-header and .modal-footer)
163
- .modal-body {
164
- position: relative;
165
- // Enable `flex-grow: 1` so that the body take up as much space as possible
166
- // when there should be a fixed height on `.modal-dialog`.
167
- flex: 1 1 auto;
168
- padding: $modal-inner-padding;
169
- }
170
-
171
- // Footer (for actions)
172
- .modal-footer {
173
- display: flex;
174
- flex-wrap: wrap;
175
- align-items: center; // vertically center
176
- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
177
- padding: $modal-inner-padding - $modal-footer-margin-between / 2;
178
- border-top: $modal-footer-border-width solid $modal-footer-border-color;
179
- @include border-bottom-radius($modal-content-inner-border-radius);
180
-
181
- // Place margin between footer elements
182
- // This solution is far from ideal because of the universal selector usage,
183
- // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
184
- // stylelint-disable-next-line selector-max-universal
185
- > * {
186
- margin: $modal-footer-margin-between / 2;
187
- }
188
- }
189
-
190
- // Measure scrollbar width for padding body during modal show/hide
191
- .modal-scrollbar-measure {
192
- position: absolute;
193
- top: -9999px;
194
- width: 50px;
195
- height: 50px;
196
- overflow: scroll;
197
- }
198
-
199
- // Scale up the modal
200
- @include media-breakpoint-up(sm) {
201
- // Automatically set modal's width for larger viewports
202
- .modal-dialog {
203
- max-width: $modal-md;
204
- margin: $modal-dialog-margin-y-sm-up auto;
205
- }
206
-
207
- .modal-dialog-scrollable {
208
- max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
209
-
210
- .modal-content {
211
- max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
212
- }
213
- }
214
-
215
- .modal-dialog-centered {
216
- min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
217
-
218
- &::before {
219
- height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
220
- }
221
- }
222
-
223
- .modal-content {
224
- @include box-shadow($modal-content-box-shadow-sm-up);
225
- }
226
-
227
- .modal-sm { max-width: $modal-sm; }
228
- }
229
-
230
- @include media-breakpoint-up(lg) {
231
- .modal-lg,
232
- .modal-xl {
233
- max-width: $modal-lg;
234
- }
235
- }
236
-
237
- @include media-breakpoint-up(xl) {
238
- .modal-xl { max-width: $modal-xl; }
239
- }