bootstrap-scss 0.0.1 → 0.0.2

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.
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
+ }