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.
- checksums.yaml +4 -4
- data/bootstrap-scss.gemspec +28 -25
- data/lib/bootstrap/scss/engine.rb +11 -0
- data/lib/bootstrap/scss/version.rb +4 -1
- data/lib/bootstrap/scss.rb +53 -3
- data/vendor/assets/bootstrap/scss/_accordion.scss +118 -0
- data/vendor/assets/bootstrap/scss/_alert.scss +57 -0
- data/vendor/assets/bootstrap/scss/_badge.scss +29 -0
- data/vendor/assets/bootstrap/scss/_breadcrumb.scss +28 -0
- data/vendor/assets/bootstrap/scss/_button-group.scss +139 -0
- data/vendor/assets/bootstrap/scss/_buttons.scss +111 -0
- data/vendor/assets/bootstrap/scss/_card.scss +216 -0
- data/vendor/assets/bootstrap/scss/_carousel.scss +229 -0
- data/vendor/assets/bootstrap/scss/_close.scss +40 -0
- data/vendor/assets/bootstrap/scss/_containers.scss +41 -0
- data/vendor/assets/bootstrap/scss/_dropdown.scss +240 -0
- data/vendor/assets/bootstrap/scss/_forms.scss +9 -0
- data/vendor/assets/bootstrap/scss/_functions.scss +302 -0
- data/vendor/assets/bootstrap/scss/_grid.scss +33 -0
- data/vendor/assets/bootstrap/scss/_helpers.scss +9 -0
- data/vendor/assets/bootstrap/scss/_images.scss +42 -0
- data/vendor/assets/bootstrap/scss/_list-group.scss +174 -0
- data/vendor/assets/bootstrap/scss/_mixins.scss +43 -0
- data/vendor/assets/bootstrap/scss/_modal.scss +209 -0
- data/vendor/assets/bootstrap/scss/_nav.scss +139 -0
- data/vendor/assets/bootstrap/scss/_navbar.scss +335 -0
- data/vendor/assets/bootstrap/scss/_offcanvas.scss +83 -0
- data/vendor/assets/bootstrap/scss/_pagination.scss +64 -0
- data/vendor/assets/bootstrap/scss/_placeholders.scss +51 -0
- data/vendor/assets/bootstrap/scss/_popover.scss +158 -0
- data/vendor/assets/bootstrap/scss/_progress.scss +48 -0
- data/vendor/assets/bootstrap/scss/_reboot.scss +625 -0
- data/vendor/assets/bootstrap/scss/_root.scss +54 -0
- data/vendor/assets/bootstrap/scss/_spinners.scss +69 -0
- data/vendor/assets/bootstrap/scss/_tables.scss +155 -0
- data/vendor/assets/bootstrap/scss/_toasts.scss +51 -0
- data/vendor/assets/bootstrap/scss/_tooltip.scss +115 -0
- data/vendor/assets/bootstrap/scss/_transitions.scss +27 -0
- data/vendor/assets/bootstrap/scss/_type.scss +104 -0
- data/vendor/assets/bootstrap/scss/_utilities.scss +630 -0
- data/vendor/assets/bootstrap/scss/_variables.scss +1641 -0
- data/vendor/assets/bootstrap/scss/bootstrap-grid.scss +67 -0
- data/vendor/assets/bootstrap/scss/bootstrap-reboot.scss +13 -0
- data/vendor/assets/bootstrap/scss/bootstrap-utilities.scss +18 -0
- data/vendor/assets/bootstrap/scss/bootstrap.scss +53 -0
- data/vendor/assets/bootstrap/scss/forms/_floating-labels.scss +63 -0
- data/vendor/assets/bootstrap/scss/forms/_form-check.scss +152 -0
- data/vendor/assets/bootstrap/scss/forms/_form-control.scss +219 -0
- data/vendor/assets/bootstrap/scss/forms/_form-range.scss +91 -0
- data/vendor/assets/bootstrap/scss/forms/_form-select.scss +72 -0
- data/vendor/assets/bootstrap/scss/forms/_form-text.scss +11 -0
- data/vendor/assets/bootstrap/scss/forms/_input-group.scss +121 -0
- data/vendor/assets/bootstrap/scss/forms/_labels.scss +36 -0
- data/vendor/assets/bootstrap/scss/forms/_validation.scss +12 -0
- data/vendor/assets/bootstrap/scss/helpers/_clearfix.scss +3 -0
- data/vendor/assets/bootstrap/scss/helpers/_colored-links.scss +12 -0
- data/vendor/assets/bootstrap/scss/helpers/_position.scss +30 -0
- data/vendor/assets/bootstrap/scss/helpers/_ratio.scss +26 -0
- data/vendor/assets/bootstrap/scss/helpers/_stacks.scss +15 -0
- data/vendor/assets/bootstrap/scss/helpers/_stretched-link.scss +15 -0
- data/vendor/assets/bootstrap/scss/helpers/_text-truncation.scss +7 -0
- data/vendor/assets/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
- data/vendor/assets/bootstrap/scss/helpers/_vr.scss +8 -0
- data/vendor/assets/bootstrap/scss/mixins/_alert.scss +11 -0
- data/vendor/assets/bootstrap/scss/mixins/_backdrop.scss +14 -0
- data/vendor/assets/bootstrap/scss/mixins/_border-radius.scss +78 -0
- data/vendor/assets/bootstrap/scss/mixins/_box-shadow.scss +18 -0
- data/vendor/assets/bootstrap/scss/mixins/_breakpoints.scss +127 -0
- data/vendor/assets/bootstrap/scss/mixins/_buttons.scss +133 -0
- data/vendor/assets/bootstrap/scss/mixins/_caret.scss +64 -0
- data/vendor/assets/bootstrap/scss/mixins/_clearfix.scss +9 -0
- data/vendor/assets/bootstrap/scss/mixins/_color-scheme.scss +7 -0
- data/vendor/assets/bootstrap/scss/mixins/_container.scss +9 -0
- data/vendor/assets/bootstrap/scss/mixins/_deprecate.scss +10 -0
- data/vendor/assets/bootstrap/scss/mixins/_forms.scss +144 -0
- data/vendor/assets/bootstrap/scss/mixins/_gradients.scss +47 -0
- data/vendor/assets/bootstrap/scss/mixins/_grid.scss +151 -0
- data/vendor/assets/bootstrap/scss/mixins/_image.scss +16 -0
- data/vendor/assets/bootstrap/scss/mixins/_list-group.scss +24 -0
- data/vendor/assets/bootstrap/scss/mixins/_lists.scss +7 -0
- data/vendor/assets/bootstrap/scss/mixins/_pagination.scss +31 -0
- data/vendor/assets/bootstrap/scss/mixins/_reset-text.scss +17 -0
- data/vendor/assets/bootstrap/scss/mixins/_resize.scss +6 -0
- data/vendor/assets/bootstrap/scss/mixins/_table-variants.scss +21 -0
- data/vendor/assets/bootstrap/scss/mixins/_text-truncate.scss +8 -0
- data/vendor/assets/bootstrap/scss/mixins/_transition.scss +26 -0
- data/vendor/assets/bootstrap/scss/mixins/_utilities.scss +89 -0
- data/vendor/assets/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
- data/vendor/assets/bootstrap/scss/utilities/_api.scss +47 -0
- data/vendor/assets/bootstrap/scss/vendor/_rfs.scss +354 -0
- metadata +105 -20
- data/.gitignore +0 -14
- data/.rspec +0 -3
- data/.travis.yml +0 -7
- data/Gemfile +0 -6
- data/Rakefile +0 -6
- data/bin/console +0 -14
- data/bin/setup +0 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 23498c32c8783c544877964f14dda60477d6ffd6cc6a52ff552fc86d18884dfb
|
|
4
|
+
data.tar.gz: 3b240effa11ddf4108f2e2f4f2d707a0bd5e6da444aead7dfd090cd9aea95b3b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 047a3b5df82c927912278f353e5393be77eb55e38edfae1dab30d62b0efedd53d2d777e6d96ac6f5a85cba2cece4021aac8d325032f1488fd94ab46ac684891c
|
|
7
|
+
data.tar.gz: 12e65091924df66d45f47fee56047730ce0a22a054e77ae604670f59357a03d95b704b3f12685bf0fd58ee20940920e4e969396e5568aa77eeae407504f4d643
|
data/bootstrap-scss.gemspec
CHANGED
|
@@ -1,42 +1,45 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
1
2
|
|
|
2
|
-
lib = File.expand_path(
|
|
3
|
+
lib = File.expand_path('lib', __dir__)
|
|
3
4
|
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
-
require
|
|
5
|
+
require 'bootstrap/scss/version'
|
|
5
6
|
|
|
6
7
|
Gem::Specification.new do |spec|
|
|
7
|
-
spec.name =
|
|
8
|
+
spec.name = 'bootstrap-scss'
|
|
8
9
|
spec.version = Bootstrap::Scss::VERSION
|
|
9
|
-
spec.authors = [
|
|
10
|
-
spec.email = [
|
|
10
|
+
spec.authors = ['Roberto Quintanilla']
|
|
11
|
+
spec.email = ['roberto.quintanilla@gmail.com']
|
|
11
12
|
|
|
12
|
-
spec.summary =
|
|
13
|
-
spec.description =
|
|
14
|
-
spec.homepage =
|
|
15
|
-
spec.license =
|
|
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[
|
|
21
|
+
spec.metadata['allowed_push_host'] = 'https://rubygems.org'
|
|
21
22
|
|
|
22
|
-
spec.metadata[
|
|
23
|
-
spec.metadata[
|
|
24
|
-
spec.metadata[
|
|
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
|
|
27
|
-
|
|
27
|
+
raise 'RubyGems 2.0 or newer is required to protect against ' \
|
|
28
|
+
'public gem pushes.'
|
|
28
29
|
end
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
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.
|
|
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
|
|
40
|
-
spec.add_development_dependency
|
|
41
|
-
spec.add_development_dependency
|
|
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
|
data/lib/bootstrap/scss.rb
CHANGED
|
@@ -1,8 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
require 'bootstrap/scss/version'
|
|
2
4
|
|
|
3
5
|
module Bootstrap
|
|
4
6
|
module Scss
|
|
5
|
-
|
|
6
|
-
|
|
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
|
+
}
|