jekyll-theme-clean-portfolio 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +674 -0
  3. data/README.md +54 -0
  4. data/_includes/footer.html +30 -0
  5. data/_includes/head.html +25 -0
  6. data/_includes/header.html +74 -0
  7. data/_includes/modal_img.html +34 -0
  8. data/_layouts/blank.html +7 -0
  9. data/_layouts/default.html +16 -0
  10. data/_layouts/page.html +9 -0
  11. data/_layouts/post.html +21 -0
  12. data/assets/css/bootstrap/_alert.scss +51 -0
  13. data/assets/css/bootstrap/_badge.scss +47 -0
  14. data/assets/css/bootstrap/_breadcrumb.scss +38 -0
  15. data/assets/css/bootstrap/_button-group.scss +166 -0
  16. data/assets/css/bootstrap/_buttons.scss +143 -0
  17. data/assets/css/bootstrap/_card.scss +270 -0
  18. data/assets/css/bootstrap/_carousel.scss +191 -0
  19. data/assets/css/bootstrap/_close.scss +34 -0
  20. data/assets/css/bootstrap/_code.scss +56 -0
  21. data/assets/css/bootstrap/_custom-forms.scss +297 -0
  22. data/assets/css/bootstrap/_dropdown.scss +131 -0
  23. data/assets/css/bootstrap/_forms.scss +333 -0
  24. data/assets/css/bootstrap/_functions.scss +86 -0
  25. data/assets/css/bootstrap/_grid.scss +52 -0
  26. data/assets/css/bootstrap/_images.scss +42 -0
  27. data/assets/css/bootstrap/_input-group.scss +159 -0
  28. data/assets/css/bootstrap/_jumbotron.scss +16 -0
  29. data/assets/css/bootstrap/_list-group.scss +115 -0
  30. data/assets/css/bootstrap/_media.scss +8 -0
  31. data/assets/css/bootstrap/_mixins.scss +42 -0
  32. data/assets/css/bootstrap/_modal.scss +168 -0
  33. data/assets/css/bootstrap/_nav.scss +118 -0
  34. data/assets/css/bootstrap/_navbar.scss +311 -0
  35. data/assets/css/bootstrap/_pagination.scss +77 -0
  36. data/assets/css/bootstrap/_popover.scss +183 -0
  37. data/assets/css/bootstrap/_print.scss +124 -0
  38. data/assets/css/bootstrap/_progress.scss +33 -0
  39. data/assets/css/bootstrap/_reboot.scss +482 -0
  40. data/assets/css/bootstrap/_root.scss +19 -0
  41. data/assets/css/bootstrap/_tables.scss +180 -0
  42. data/assets/css/bootstrap/_tooltip.scss +115 -0
  43. data/assets/css/bootstrap/_transitions.scss +36 -0
  44. data/assets/css/bootstrap/_type.scss +125 -0
  45. data/assets/css/bootstrap/_utilities.scss +14 -0
  46. data/assets/css/bootstrap/_variables.scss +894 -0
  47. data/assets/css/bootstrap/bootstrap-grid.scss +32 -0
  48. data/assets/css/bootstrap/bootstrap-reboot.scss +12 -0
  49. data/assets/css/bootstrap/bootstrap.scss +42 -0
  50. data/assets/css/bootstrap/mixins/_alert.scss +13 -0
  51. data/assets/css/bootstrap/mixins/_background-variant.scss +21 -0
  52. data/assets/css/bootstrap/mixins/_badge.scss +12 -0
  53. data/assets/css/bootstrap/mixins/_border-radius.scss +35 -0
  54. data/assets/css/bootstrap/mixins/_box-shadow.scss +5 -0
  55. data/assets/css/bootstrap/mixins/_breakpoints.scss +123 -0
  56. data/assets/css/bootstrap/mixins/_buttons.scss +109 -0
  57. data/assets/css/bootstrap/mixins/_caret.scss +65 -0
  58. data/assets/css/bootstrap/mixins/_clearfix.scss +7 -0
  59. data/assets/css/bootstrap/mixins/_float.scss +11 -0
  60. data/assets/css/bootstrap/mixins/_forms.scss +137 -0
  61. data/assets/css/bootstrap/mixins/_gradients.scss +45 -0
  62. data/assets/css/bootstrap/mixins/_grid-framework.scss +67 -0
  63. data/assets/css/bootstrap/mixins/_grid.scss +52 -0
  64. data/assets/css/bootstrap/mixins/_hover.scss +39 -0
  65. data/assets/css/bootstrap/mixins/_image.scss +36 -0
  66. data/assets/css/bootstrap/mixins/_list-group.scss +21 -0
  67. data/assets/css/bootstrap/mixins/_lists.scss +7 -0
  68. data/assets/css/bootstrap/mixins/_nav-divider.scss +10 -0
  69. data/assets/css/bootstrap/mixins/_navbar-align.scss +10 -0
  70. data/assets/css/bootstrap/mixins/_pagination.scss +22 -0
  71. data/assets/css/bootstrap/mixins/_reset-text.scss +17 -0
  72. data/assets/css/bootstrap/mixins/_resize.scss +6 -0
  73. data/assets/css/bootstrap/mixins/_screen-reader.scss +35 -0
  74. data/assets/css/bootstrap/mixins/_size.scss +6 -0
  75. data/assets/css/bootstrap/mixins/_table-row.scss +30 -0
  76. data/assets/css/bootstrap/mixins/_text-emphasis.scss +14 -0
  77. data/assets/css/bootstrap/mixins/_text-hide.scss +9 -0
  78. data/assets/css/bootstrap/mixins/_text-truncate.scss +8 -0
  79. data/assets/css/bootstrap/mixins/_transition.scss +9 -0
  80. data/assets/css/bootstrap/mixins/_visibility.scss +7 -0
  81. data/assets/css/bootstrap/utilities/_align.scss +8 -0
  82. data/assets/css/bootstrap/utilities/_background.scss +19 -0
  83. data/assets/css/bootstrap/utilities/_borders.scss +59 -0
  84. data/assets/css/bootstrap/utilities/_clearfix.scss +3 -0
  85. data/assets/css/bootstrap/utilities/_display.scss +38 -0
  86. data/assets/css/bootstrap/utilities/_embed.scss +52 -0
  87. data/assets/css/bootstrap/utilities/_flex.scss +46 -0
  88. data/assets/css/bootstrap/utilities/_float.scss +9 -0
  89. data/assets/css/bootstrap/utilities/_position.scss +36 -0
  90. data/assets/css/bootstrap/utilities/_screenreaders.scss +11 -0
  91. data/assets/css/bootstrap/utilities/_sizing.scss +12 -0
  92. data/assets/css/bootstrap/utilities/_spacing.scss +51 -0
  93. data/assets/css/bootstrap/utilities/_text.scss +52 -0
  94. data/assets/css/bootstrap/utilities/_visibility.scss +11 -0
  95. data/assets/css/custom/includes/_base.scss +240 -0
  96. data/assets/css/custom/includes/_layout.scss +27 -0
  97. data/assets/css/custom/includes/_syntax-highlighting.scss +67 -0
  98. data/assets/css/main.scss +100 -0
  99. data/assets/docs/dummy.pdf +0 -0
  100. data/assets/fonts/Segoe UI Bold Italic.ttf +0 -0
  101. data/assets/fonts/Segoe UI Bold.ttf +0 -0
  102. data/assets/fonts/Segoe UI Italic.ttf +0 -0
  103. data/assets/fonts/Segoe UI.ttf +0 -0
  104. data/assets/fonts/weblysleekuil.eot +0 -0
  105. data/assets/fonts/weblysleekuil.svg +151 -0
  106. data/assets/fonts/weblysleekuil.ttf +0 -0
  107. data/assets/fonts/weblysleekuil.woff +0 -0
  108. data/assets/icons/icon.png +0 -0
  109. data/assets/icons/icon_a.png +0 -0
  110. data/assets/icons/icon_b.png +0 -0
  111. data/assets/icons/icon_c.png +0 -0
  112. data/assets/images/profile.png +0 -0
  113. data/assets/scripts/all.js +4387 -0
  114. data/assets/scripts/yaml.min.js +1269 -0
  115. metadata +395 -0
@@ -0,0 +1,42 @@
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
+ }
@@ -0,0 +1,159 @@
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
+ }
@@ -0,0 +1,16 @@
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
+ }
@@ -0,0 +1,115 @@
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
+ }
@@ -0,0 +1,8 @@
1
+ .media {
2
+ display: flex;
3
+ align-items: flex-start;
4
+ }
5
+
6
+ .media-body {
7
+ flex: 1;
8
+ }
@@ -0,0 +1,42 @@
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";
@@ -0,0 +1,168 @@
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
+ }