bootstrap-scss 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/bootstrap-scss.gemspec +28 -25
  3. data/lib/bootstrap/scss/engine.rb +11 -0
  4. data/lib/bootstrap/scss/version.rb +4 -1
  5. data/lib/bootstrap/scss.rb +53 -3
  6. data/vendor/assets/bootstrap/scss/_accordion.scss +118 -0
  7. data/vendor/assets/bootstrap/scss/_alert.scss +57 -0
  8. data/vendor/assets/bootstrap/scss/_badge.scss +29 -0
  9. data/vendor/assets/bootstrap/scss/_breadcrumb.scss +28 -0
  10. data/vendor/assets/bootstrap/scss/_button-group.scss +139 -0
  11. data/vendor/assets/bootstrap/scss/_buttons.scss +111 -0
  12. data/vendor/assets/bootstrap/scss/_card.scss +216 -0
  13. data/vendor/assets/bootstrap/scss/_carousel.scss +229 -0
  14. data/vendor/assets/bootstrap/scss/_close.scss +40 -0
  15. data/vendor/assets/bootstrap/scss/_containers.scss +41 -0
  16. data/vendor/assets/bootstrap/scss/_dropdown.scss +240 -0
  17. data/vendor/assets/bootstrap/scss/_forms.scss +9 -0
  18. data/vendor/assets/bootstrap/scss/_functions.scss +302 -0
  19. data/vendor/assets/bootstrap/scss/_grid.scss +33 -0
  20. data/vendor/assets/bootstrap/scss/_helpers.scss +9 -0
  21. data/vendor/assets/bootstrap/scss/_images.scss +42 -0
  22. data/vendor/assets/bootstrap/scss/_list-group.scss +174 -0
  23. data/vendor/assets/bootstrap/scss/_mixins.scss +43 -0
  24. data/vendor/assets/bootstrap/scss/_modal.scss +209 -0
  25. data/vendor/assets/bootstrap/scss/_nav.scss +139 -0
  26. data/vendor/assets/bootstrap/scss/_navbar.scss +335 -0
  27. data/vendor/assets/bootstrap/scss/_offcanvas.scss +83 -0
  28. data/vendor/assets/bootstrap/scss/_pagination.scss +64 -0
  29. data/vendor/assets/bootstrap/scss/_placeholders.scss +51 -0
  30. data/vendor/assets/bootstrap/scss/_popover.scss +158 -0
  31. data/vendor/assets/bootstrap/scss/_progress.scss +48 -0
  32. data/vendor/assets/bootstrap/scss/_reboot.scss +625 -0
  33. data/vendor/assets/bootstrap/scss/_root.scss +54 -0
  34. data/vendor/assets/bootstrap/scss/_spinners.scss +69 -0
  35. data/vendor/assets/bootstrap/scss/_tables.scss +155 -0
  36. data/vendor/assets/bootstrap/scss/_toasts.scss +51 -0
  37. data/vendor/assets/bootstrap/scss/_tooltip.scss +115 -0
  38. data/vendor/assets/bootstrap/scss/_transitions.scss +27 -0
  39. data/vendor/assets/bootstrap/scss/_type.scss +104 -0
  40. data/vendor/assets/bootstrap/scss/_utilities.scss +630 -0
  41. data/vendor/assets/bootstrap/scss/_variables.scss +1641 -0
  42. data/vendor/assets/bootstrap/scss/bootstrap-grid.scss +67 -0
  43. data/vendor/assets/bootstrap/scss/bootstrap-reboot.scss +13 -0
  44. data/vendor/assets/bootstrap/scss/bootstrap-utilities.scss +18 -0
  45. data/vendor/assets/bootstrap/scss/bootstrap.scss +53 -0
  46. data/vendor/assets/bootstrap/scss/forms/_floating-labels.scss +63 -0
  47. data/vendor/assets/bootstrap/scss/forms/_form-check.scss +152 -0
  48. data/vendor/assets/bootstrap/scss/forms/_form-control.scss +219 -0
  49. data/vendor/assets/bootstrap/scss/forms/_form-range.scss +91 -0
  50. data/vendor/assets/bootstrap/scss/forms/_form-select.scss +72 -0
  51. data/vendor/assets/bootstrap/scss/forms/_form-text.scss +11 -0
  52. data/vendor/assets/bootstrap/scss/forms/_input-group.scss +121 -0
  53. data/vendor/assets/bootstrap/scss/forms/_labels.scss +36 -0
  54. data/vendor/assets/bootstrap/scss/forms/_validation.scss +12 -0
  55. data/vendor/assets/bootstrap/scss/helpers/_clearfix.scss +3 -0
  56. data/vendor/assets/bootstrap/scss/helpers/_colored-links.scss +12 -0
  57. data/vendor/assets/bootstrap/scss/helpers/_position.scss +30 -0
  58. data/vendor/assets/bootstrap/scss/helpers/_ratio.scss +26 -0
  59. data/vendor/assets/bootstrap/scss/helpers/_stacks.scss +15 -0
  60. data/vendor/assets/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  61. data/vendor/assets/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  62. data/vendor/assets/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  63. data/vendor/assets/bootstrap/scss/helpers/_vr.scss +8 -0
  64. data/vendor/assets/bootstrap/scss/mixins/_alert.scss +11 -0
  65. data/vendor/assets/bootstrap/scss/mixins/_backdrop.scss +14 -0
  66. data/vendor/assets/bootstrap/scss/mixins/_border-radius.scss +78 -0
  67. data/vendor/assets/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  68. data/vendor/assets/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  69. data/vendor/assets/bootstrap/scss/mixins/_buttons.scss +133 -0
  70. data/vendor/assets/bootstrap/scss/mixins/_caret.scss +64 -0
  71. data/vendor/assets/bootstrap/scss/mixins/_clearfix.scss +9 -0
  72. data/vendor/assets/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  73. data/vendor/assets/bootstrap/scss/mixins/_container.scss +9 -0
  74. data/vendor/assets/bootstrap/scss/mixins/_deprecate.scss +10 -0
  75. data/vendor/assets/bootstrap/scss/mixins/_forms.scss +144 -0
  76. data/vendor/assets/bootstrap/scss/mixins/_gradients.scss +47 -0
  77. data/vendor/assets/bootstrap/scss/mixins/_grid.scss +151 -0
  78. data/vendor/assets/bootstrap/scss/mixins/_image.scss +16 -0
  79. data/vendor/assets/bootstrap/scss/mixins/_list-group.scss +24 -0
  80. data/vendor/assets/bootstrap/scss/mixins/_lists.scss +7 -0
  81. data/vendor/assets/bootstrap/scss/mixins/_pagination.scss +31 -0
  82. data/vendor/assets/bootstrap/scss/mixins/_reset-text.scss +17 -0
  83. data/vendor/assets/bootstrap/scss/mixins/_resize.scss +6 -0
  84. data/vendor/assets/bootstrap/scss/mixins/_table-variants.scss +21 -0
  85. data/vendor/assets/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  86. data/vendor/assets/bootstrap/scss/mixins/_transition.scss +26 -0
  87. data/vendor/assets/bootstrap/scss/mixins/_utilities.scss +89 -0
  88. data/vendor/assets/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  89. data/vendor/assets/bootstrap/scss/utilities/_api.scss +47 -0
  90. data/vendor/assets/bootstrap/scss/vendor/_rfs.scss +354 -0
  91. metadata +105 -20
  92. data/.gitignore +0 -14
  93. data/.rspec +0 -3
  94. data/.travis.yml +0 -7
  95. data/Gemfile +0 -6
  96. data/Rakefile +0 -6
  97. data/bin/console +0 -14
  98. data/bin/setup +0 -8
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 18452b2e60d6362d652c0ae10e81d35e322cb17fe4165d65fbdc489fcfdc88ff
4
- data.tar.gz: 60a997563f116169d118712e27626005a26f1f79571f4fa5a253cdf799e47a8a
3
+ metadata.gz: 23498c32c8783c544877964f14dda60477d6ffd6cc6a52ff552fc86d18884dfb
4
+ data.tar.gz: 3b240effa11ddf4108f2e2f4f2d707a0bd5e6da444aead7dfd090cd9aea95b3b
5
5
  SHA512:
6
- metadata.gz: 9d9228d778e0be331e9cb071e8557ecd76fde17f9fcbb07092ea8f3a86e46a62943349bf0b300957162123edcefbda52d8f5949f6f37d615e8054ef59ab47f95
7
- data.tar.gz: 33b26b231ca76815ec37224809241205663fcc104e831475c230cab696a4f624660b63c490a23f87fd7074a207e84fad2fa606d2c9e75f4a82ce606f8ace91ae
6
+ metadata.gz: 047a3b5df82c927912278f353e5393be77eb55e38edfae1dab30d62b0efedd53d2d777e6d96ac6f5a85cba2cece4021aac8d325032f1488fd94ab46ac684891c
7
+ data.tar.gz: 12e65091924df66d45f47fee56047730ce0a22a054e77ae604670f59357a03d95b704b3f12685bf0fd58ee20940920e4e969396e5568aa77eeae407504f4d643
@@ -1,42 +1,45 @@
1
+ # frozen_string_literal: true
1
2
 
2
- lib = File.expand_path("../lib", __FILE__)
3
+ lib = File.expand_path('lib', __dir__)
3
4
  $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
- require "bootstrap/scss/version"
5
+ require 'bootstrap/scss/version'
5
6
 
6
7
  Gem::Specification.new do |spec|
7
- spec.name = "bootstrap-scss"
8
+ spec.name = 'bootstrap-scss'
8
9
  spec.version = Bootstrap::Scss::VERSION
9
- spec.authors = ["Roberto Quintanilla"]
10
- spec.email = ["roberto.quintanilla@gmail.com"]
10
+ spec.authors = ['Roberto Quintanilla']
11
+ spec.email = ['roberto.quintanilla@gmail.com']
11
12
 
12
- spec.summary = "Bundle Bootstrap SCSS without requiring npm"
13
- spec.description = "Bundle Bootstrap SCSS without requiring npm"
14
- spec.homepage = "https://github.com/IcaliaLabs/bootstrap-scss-gem"
15
- spec.license = "MIT"
13
+ spec.summary = 'Bundle Bootstrap SCSS without requiring npm'
14
+ spec.description = 'Bundle Bootstrap SCSS without requiring npm'
15
+ spec.homepage = 'https://github.com/IcaliaLabs/bootstrap-scss-gem'
16
+ spec.license = 'MIT'
16
17
 
17
18
  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
18
19
  # to allow pushing to a single host or delete this section to allow pushing to any host.
19
20
  if spec.respond_to?(:metadata)
20
- spec.metadata["allowed_push_host"] = "https://rubygems.org"
21
+ spec.metadata['allowed_push_host'] = 'https://rubygems.org'
21
22
 
22
- spec.metadata["homepage_uri"] = spec.homepage
23
- spec.metadata["source_code_uri"] = "https://github.com/IcaliaLabs/bootstrap-scss-gem"
24
- spec.metadata["changelog_uri"] = "https://github.com/IcaliaLabs/bootstrap-scss-gem/blob/main/CHANGELOG.md"
23
+ spec.metadata['homepage_uri'] = spec.homepage
24
+ spec.metadata['source_code_uri'] = 'https://github.com/IcaliaLabs/bootstrap-scss-gem'
25
+ spec.metadata['changelog_uri'] = 'https://github.com/IcaliaLabs/bootstrap-scss-gem/blob/main/CHANGELOG.md'
25
26
  else
26
- raise "RubyGems 2.0 or newer is required to protect against " \
27
- "public gem pushes."
27
+ raise 'RubyGems 2.0 or newer is required to protect against ' \
28
+ 'public gem pushes.'
28
29
  end
29
30
 
30
- # Specify which files should be added to the gem when it is released.
31
- # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
32
- spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
33
- `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
34
- end
35
- spec.bindir = "exe"
31
+ files = 'lib/* *.md *.gemspec *.txt vendor/assets/bootstrap/scss/*'
32
+
36
33
  spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
37
- spec.require_paths = ["lib"]
34
+ spec.files = `git ls-files --recurse-submodules -- #{files}`.split("\n")
35
+ spec.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
36
+ spec.bindir = 'exe'
37
+ spec.require_paths = ['lib']
38
+
39
+ # SassC requires Ruby 2.3.3. Also specify here to make it obvious.
40
+ spec.required_ruby_version = '>= 2.3.3'
38
41
 
39
- spec.add_development_dependency "bundler", "~> 1.17"
40
- spec.add_development_dependency "rake", "~> 10.0"
41
- spec.add_development_dependency "rspec", "~> 3.0"
42
+ spec.add_development_dependency 'bundler', '~> 2.2', '>= 2.2.33'
43
+ spec.add_development_dependency 'rake', '>= 12.3.3'
44
+ spec.add_development_dependency 'rspec', '~> 3.0'
42
45
  end
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bootstrap
4
+ module Scss
5
+ class Engine < ::Rails::Engine
6
+ initializer :assets do |app|
7
+ app.config.assets.paths << root.join('vendor', 'assets')
8
+ end
9
+ end
10
+ end
11
+ end
@@ -1,5 +1,8 @@
1
+ # frozen_string_literal: true
2
+
1
3
  module Bootstrap
2
4
  module Scss
3
- VERSION = "0.0.1"
5
+ # We won't adopt bootstrap versions until we figure this gem out
6
+ VERSION = '0.0.2'
4
7
  end
5
8
  end
@@ -1,8 +1,58 @@
1
- require "bootstrap/scss/version"
1
+ # frozen_string_literal: true
2
+
3
+ require 'bootstrap/scss/version'
2
4
 
3
5
  module Bootstrap
4
6
  module Scss
5
- class Error < StandardError; end
6
- # Your code goes here...
7
+ GEM_PATH = File.expand_path '..', File.dirname(__FILE__)
8
+ ASSETS_PATH = File.join GEM_PATH, 'vendor', 'assets'
9
+
10
+ class << self
11
+ def load!
12
+ if rails?
13
+ register_rails_engine
14
+ elsif hanami?
15
+ register_hanami
16
+ elsif sprockets?
17
+ register_sprockets
18
+ elsif defined?(::Sass) && ::Sass.respond_to?(:load_paths)
19
+ # The deprecated `sass` gem:
20
+ ::Sass.load_paths << ASSETS_PATH
21
+ end
22
+
23
+ if defined?(::Sass::Script::Value::Number)
24
+ # Set precision to 6 as per:
25
+ # https://github.com/twbs/bootstrap/blob/da717b03e6e72d7a61c007acb9223b9626ae5ee5/package.json#L28
26
+ ::Sass::Script::Value::Number.precision = [6, ::Sass::Script::Value::Number.precision].max
27
+ end
28
+ end
29
+
30
+ # Environment detection helpers
31
+ def sprockets?
32
+ defined?(::Sprockets)
33
+ end
34
+
35
+ def rails?
36
+ defined?(::Rails)
37
+ end
38
+
39
+ def hanami?
40
+ defined?(::Hanami)
41
+ end
42
+
43
+ private
44
+
45
+ def register_rails_engine
46
+ require 'bootstrap/scss/engine'
47
+ end
48
+
49
+ def register_sprockets
50
+ Sprockets.append_path ASSETS_PATH
51
+ end
52
+
53
+ def register_hanami
54
+ Hanami::Assets.sources << ASSETS_PATH
55
+ end
56
+ end
7
57
  end
8
58
  end
@@ -0,0 +1,118 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .accordion-button {
6
+ position: relative;
7
+ display: flex;
8
+ align-items: center;
9
+ width: 100%;
10
+ padding: $accordion-button-padding-y $accordion-button-padding-x;
11
+ @include font-size($font-size-base);
12
+ color: $accordion-button-color;
13
+ text-align: left; // Reset button style
14
+ background-color: $accordion-button-bg;
15
+ border: 0;
16
+ @include border-radius(0);
17
+ overflow-anchor: none;
18
+ @include transition($accordion-transition);
19
+
20
+ &:not(.collapsed) {
21
+ color: $accordion-button-active-color;
22
+ background-color: $accordion-button-active-bg;
23
+ box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
24
+
25
+ &::after {
26
+ background-image: escape-svg($accordion-button-active-icon);
27
+ transform: $accordion-icon-transform;
28
+ }
29
+ }
30
+
31
+ // Accordion icon
32
+ &::after {
33
+ flex-shrink: 0;
34
+ width: $accordion-icon-width;
35
+ height: $accordion-icon-width;
36
+ margin-left: auto;
37
+ content: "";
38
+ background-image: escape-svg($accordion-button-icon);
39
+ background-repeat: no-repeat;
40
+ background-size: $accordion-icon-width;
41
+ @include transition($accordion-icon-transition);
42
+ }
43
+
44
+ &:hover {
45
+ z-index: 2;
46
+ }
47
+
48
+ &:focus {
49
+ z-index: 3;
50
+ border-color: $accordion-button-focus-border-color;
51
+ outline: 0;
52
+ box-shadow: $accordion-button-focus-box-shadow;
53
+ }
54
+ }
55
+
56
+ .accordion-header {
57
+ margin-bottom: 0;
58
+ }
59
+
60
+ .accordion-item {
61
+ background-color: $accordion-bg;
62
+ border: $accordion-border-width solid $accordion-border-color;
63
+
64
+ &:first-of-type {
65
+ @include border-top-radius($accordion-border-radius);
66
+
67
+ .accordion-button {
68
+ @include border-top-radius($accordion-inner-border-radius);
69
+ }
70
+ }
71
+
72
+ &:not(:first-of-type) {
73
+ border-top: 0;
74
+ }
75
+
76
+ // Only set a border-radius on the last item if the accordion is collapsed
77
+ &:last-of-type {
78
+ @include border-bottom-radius($accordion-border-radius);
79
+
80
+ .accordion-button {
81
+ &.collapsed {
82
+ @include border-bottom-radius($accordion-inner-border-radius);
83
+ }
84
+ }
85
+
86
+ .accordion-collapse {
87
+ @include border-bottom-radius($accordion-border-radius);
88
+ }
89
+ }
90
+ }
91
+
92
+ .accordion-body {
93
+ padding: $accordion-body-padding-y $accordion-body-padding-x;
94
+ }
95
+
96
+
97
+ // Flush accordion items
98
+ //
99
+ // Remove borders and border-radius to keep accordion items edge-to-edge.
100
+
101
+ .accordion-flush {
102
+ .accordion-collapse {
103
+ border-width: 0;
104
+ }
105
+
106
+ .accordion-item {
107
+ border-right: 0;
108
+ border-left: 0;
109
+ @include border-radius(0);
110
+
111
+ &:first-child { border-top: 0; }
112
+ &:last-child { border-bottom: 0; }
113
+
114
+ .accordion-button {
115
+ @include border-radius(0);
116
+ }
117
+ }
118
+ }
@@ -0,0 +1,57 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .alert {
6
+ position: relative;
7
+ padding: $alert-padding-y $alert-padding-x;
8
+ margin-bottom: $alert-margin-bottom;
9
+ border: $alert-border-width solid transparent;
10
+ @include border-radius($alert-border-radius);
11
+ }
12
+
13
+ // Headings for larger alerts
14
+ .alert-heading {
15
+ // Specified to prevent conflicts of changing $headings-color
16
+ color: inherit;
17
+ }
18
+
19
+ // Provide class for links that match alerts
20
+ .alert-link {
21
+ font-weight: $alert-link-font-weight;
22
+ }
23
+
24
+
25
+ // Dismissible alerts
26
+ //
27
+ // Expand the right padding and account for the close button's positioning.
28
+
29
+ .alert-dismissible {
30
+ padding-right: $alert-dismissible-padding-r;
31
+
32
+ // Adjust close link position
33
+ .btn-close {
34
+ position: absolute;
35
+ top: 0;
36
+ right: 0;
37
+ z-index: $stretched-link-z-index + 1;
38
+ padding: $alert-padding-y * 1.25 $alert-padding-x;
39
+ }
40
+ }
41
+
42
+
43
+ // scss-docs-start alert-modifiers
44
+ // Generate contextual modifier classes for colorizing the alert.
45
+
46
+ @each $state, $value in $theme-colors {
47
+ $alert-background: shift-color($value, $alert-bg-scale);
48
+ $alert-border: shift-color($value, $alert-border-scale);
49
+ $alert-color: shift-color($value, $alert-color-scale);
50
+ @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
51
+ $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
52
+ }
53
+ .alert-#{$state} {
54
+ @include alert-variant($alert-background, $alert-border, $alert-color);
55
+ }
56
+ }
57
+ // scss-docs-end alert-modifiers
@@ -0,0 +1,29 @@
1
+ // Base class
2
+ //
3
+ // Requires one of the contextual, color modifier classes for `color` and
4
+ // `background-color`.
5
+
6
+ .badge {
7
+ display: inline-block;
8
+ padding: $badge-padding-y $badge-padding-x;
9
+ @include font-size($badge-font-size);
10
+ font-weight: $badge-font-weight;
11
+ line-height: 1;
12
+ color: $badge-color;
13
+ text-align: center;
14
+ white-space: nowrap;
15
+ vertical-align: baseline;
16
+ @include border-radius($badge-border-radius);
17
+ @include gradient-bg();
18
+
19
+ // Empty badges collapse automatically
20
+ &:empty {
21
+ display: none;
22
+ }
23
+ }
24
+
25
+ // Quick fix for badges in buttons
26
+ .btn .badge {
27
+ position: relative;
28
+ top: -1px;
29
+ }
@@ -0,0 +1,28 @@
1
+ .breadcrumb {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5
+ margin-bottom: $breadcrumb-margin-bottom;
6
+ @include font-size($breadcrumb-font-size);
7
+ list-style: none;
8
+ background-color: $breadcrumb-bg;
9
+ @include border-radius($breadcrumb-border-radius);
10
+ }
11
+
12
+ .breadcrumb-item {
13
+ // The separator between breadcrumbs (by default, a forward-slash: "/")
14
+ + .breadcrumb-item {
15
+ padding-left: $breadcrumb-item-padding-x;
16
+
17
+ &::before {
18
+ float: left; // Suppress inline spacings and underlining of the separator
19
+ padding-right: $breadcrumb-item-padding-x;
20
+ color: $breadcrumb-divider-color;
21
+ content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
22
+ }
23
+ }
24
+
25
+ &.active {
26
+ color: $breadcrumb-active-color;
27
+ }
28
+ }
@@ -0,0 +1,139 @@
1
+ // Make the div behave like a button
2
+ .btn-group,
3
+ .btn-group-vertical {
4
+ position: relative;
5
+ display: inline-flex;
6
+ vertical-align: middle; // match .btn alignment given font-size hack above
7
+
8
+ > .btn {
9
+ position: relative;
10
+ flex: 1 1 auto;
11
+ }
12
+
13
+ // Bring the hover, focused, and "active" buttons to the front to overlay
14
+ // the borders properly
15
+ > .btn-check:checked + .btn,
16
+ > .btn-check:focus + .btn,
17
+ > .btn:hover,
18
+ > .btn:focus,
19
+ > .btn:active,
20
+ > .btn.active {
21
+ z-index: 1;
22
+ }
23
+ }
24
+
25
+ // Optional: Group multiple button groups together for a toolbar
26
+ .btn-toolbar {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ justify-content: flex-start;
30
+
31
+ .input-group {
32
+ width: auto;
33
+ }
34
+ }
35
+
36
+ .btn-group {
37
+ // Prevent double borders when buttons are next to each other
38
+ > .btn:not(:first-child),
39
+ > .btn-group:not(:first-child) {
40
+ margin-left: -$btn-border-width;
41
+ }
42
+
43
+ // Reset rounded corners
44
+ > .btn:not(:last-child):not(.dropdown-toggle),
45
+ > .btn-group:not(:last-child) > .btn {
46
+ @include border-end-radius(0);
47
+ }
48
+
49
+ // The left radius should be 0 if the button is:
50
+ // - the "third or more" child
51
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
52
+ // - part of a btn-group which isn't the first child
53
+ > .btn:nth-child(n + 3),
54
+ > :not(.btn-check) + .btn,
55
+ > .btn-group:not(:first-child) > .btn {
56
+ @include border-start-radius(0);
57
+ }
58
+ }
59
+
60
+ // Sizing
61
+ //
62
+ // Remix the default button sizing classes into new ones for easier manipulation.
63
+
64
+ .btn-group-sm > .btn { @extend .btn-sm; }
65
+ .btn-group-lg > .btn { @extend .btn-lg; }
66
+
67
+
68
+ //
69
+ // Split button dropdowns
70
+ //
71
+
72
+ .dropdown-toggle-split {
73
+ padding-right: $btn-padding-x * .75;
74
+ padding-left: $btn-padding-x * .75;
75
+
76
+ &::after,
77
+ .dropup &::after,
78
+ .dropend &::after {
79
+ margin-left: 0;
80
+ }
81
+
82
+ .dropstart &::before {
83
+ margin-right: 0;
84
+ }
85
+ }
86
+
87
+ .btn-sm + .dropdown-toggle-split {
88
+ padding-right: $btn-padding-x-sm * .75;
89
+ padding-left: $btn-padding-x-sm * .75;
90
+ }
91
+
92
+ .btn-lg + .dropdown-toggle-split {
93
+ padding-right: $btn-padding-x-lg * .75;
94
+ padding-left: $btn-padding-x-lg * .75;
95
+ }
96
+
97
+
98
+ // The clickable button for toggling the menu
99
+ // Set the same inset shadow as the :active state
100
+ .btn-group.show .dropdown-toggle {
101
+ @include box-shadow($btn-active-box-shadow);
102
+
103
+ // Show no shadow for `.btn-link` since it has no other button styles.
104
+ &.btn-link {
105
+ @include box-shadow(none);
106
+ }
107
+ }
108
+
109
+
110
+ //
111
+ // Vertical button groups
112
+ //
113
+
114
+ .btn-group-vertical {
115
+ flex-direction: column;
116
+ align-items: flex-start;
117
+ justify-content: center;
118
+
119
+ > .btn,
120
+ > .btn-group {
121
+ width: 100%;
122
+ }
123
+
124
+ > .btn:not(:first-child),
125
+ > .btn-group:not(:first-child) {
126
+ margin-top: -$btn-border-width;
127
+ }
128
+
129
+ // Reset rounded corners
130
+ > .btn:not(:last-child):not(.dropdown-toggle),
131
+ > .btn-group:not(:last-child) > .btn {
132
+ @include border-bottom-radius(0);
133
+ }
134
+
135
+ > .btn ~ .btn,
136
+ > .btn-group:not(:first-child) > .btn {
137
+ @include border-top-radius(0);
138
+ }
139
+ }
@@ -0,0 +1,111 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .btn {
6
+ display: inline-block;
7
+ font-family: $btn-font-family;
8
+ font-weight: $btn-font-weight;
9
+ line-height: $btn-line-height;
10
+ color: $body-color;
11
+ text-align: center;
12
+ text-decoration: if($link-decoration == none, null, none);
13
+ white-space: $btn-white-space;
14
+ vertical-align: middle;
15
+ cursor: if($enable-button-pointers, pointer, null);
16
+ user-select: none;
17
+ background-color: transparent;
18
+ border: $btn-border-width solid transparent;
19
+ @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
20
+ @include transition($btn-transition);
21
+
22
+ &:hover {
23
+ color: $body-color;
24
+ text-decoration: if($link-hover-decoration == underline, none, null);
25
+ }
26
+
27
+ .btn-check:focus + &,
28
+ &:focus {
29
+ outline: 0;
30
+ box-shadow: $btn-focus-box-shadow;
31
+ }
32
+
33
+ .btn-check:checked + &,
34
+ .btn-check:active + &,
35
+ &:active,
36
+ &.active {
37
+ @include box-shadow($btn-active-box-shadow);
38
+
39
+ &:focus {
40
+ @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
41
+ }
42
+ }
43
+
44
+ &:disabled,
45
+ &.disabled,
46
+ fieldset:disabled & {
47
+ pointer-events: none;
48
+ opacity: $btn-disabled-opacity;
49
+ @include box-shadow(none);
50
+ }
51
+ }
52
+
53
+
54
+ //
55
+ // Alternate buttons
56
+ //
57
+
58
+ // scss-docs-start btn-variant-loops
59
+ @each $color, $value in $theme-colors {
60
+ .btn-#{$color} {
61
+ @include button-variant($value, $value);
62
+ }
63
+ }
64
+
65
+ @each $color, $value in $theme-colors {
66
+ .btn-outline-#{$color} {
67
+ @include button-outline-variant($value);
68
+ }
69
+ }
70
+ // scss-docs-end btn-variant-loops
71
+
72
+
73
+ //
74
+ // Link buttons
75
+ //
76
+
77
+ // Make a button look and behave like a link
78
+ .btn-link {
79
+ font-weight: $font-weight-normal;
80
+ color: $btn-link-color;
81
+ text-decoration: $link-decoration;
82
+
83
+ &:hover {
84
+ color: $btn-link-hover-color;
85
+ text-decoration: $link-hover-decoration;
86
+ }
87
+
88
+ &:focus {
89
+ text-decoration: $link-hover-decoration;
90
+ }
91
+
92
+ &:disabled,
93
+ &.disabled {
94
+ color: $btn-link-disabled-color;
95
+ }
96
+
97
+ // No need for an active state here
98
+ }
99
+
100
+
101
+ //
102
+ // Button Sizes
103
+ //
104
+
105
+ .btn-lg {
106
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
107
+ }
108
+
109
+ .btn-sm {
110
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
111
+ }