diff options
author | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
---|---|---|
committer | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
commit | 4a904fa3a8af1c101ede76657249fb7eb47faf60 (patch) | |
tree | 544509813fb68579ef2b556ce879a971d183269a /vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss | |
parent | f5f6ec3d71acb3e0488386819d5060e59331ec23 (diff) | |
parent | c13d7e29ef9676b0f0e4ae23aa52e203f4ad8895 (diff) | |
download | volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.gz volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.bz2 volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.zip |
Merge branch 'patch-29' into 'dev'
Patch 29
See merge request Kostikov/core!3
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss')
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss | 411 |
1 files changed, 411 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss new file mode 100644 index 000000000..5bafcc423 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/assets/scss/_component-examples.scss @@ -0,0 +1,411 @@ +// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type + +// +// Grid examples +// + +.bd-example-row { + .row { + > .col, + > [class^="col-"] { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); + } + } + + .row + .row { + margin-top: 1rem; + } + + .flex-items-top, + .flex-items-middle, + .flex-items-bottom { + min-height: 6rem; + background-color: rgba(255, 0, 0, .1); + } +} + +.bd-example-row-flex-cols .row { + min-height: 10rem; + background-color: rgba(255, 0, 0, .1); +} + +.bd-highlight { + background-color: rgba($bd-purple, .15); + border: 1px solid rgba($bd-purple, .15); +} + +// Grid mixins +.example-container { + width: 800px; + @include make-container(); +} + +.example-row { + @include make-row(); +} + +.example-content-main { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(8); + } +} + +.example-content-secondary { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(4); + } +} + + +// +// Container illustrations +// + +.bd-example-container { + min-width: 16rem; + max-width: 25rem; + margin-right: auto; + margin-left: auto; +} + +.bd-example-container-header { + height: 3rem; + margin-bottom: .5rem; + background-color: lighten($blue, 50%); + border-radius: .25rem; +} + +.bd-example-container-sidebar { + float: right; + width: 4rem; + height: 8rem; + background-color: lighten($blue, 25%); + border-radius: .25rem; +} + +.bd-example-container-body { + height: 8rem; + margin-right: 4.5rem; + background-color: lighten($bd-purple, 25%); + border-radius: .25rem; +} + +.bd-example-container-fluid { + max-width: none; +} + + +// +// Docs examples +// + +.bd-example { + position: relative; + padding: 1rem; + margin: 1rem (-$grid-gutter-width / 2) 0; + border: solid $gray-100; + border-width: .2rem 0 0; + @include clearfix(); + + @include media-breakpoint-up(sm) { + padding: 1.5rem; + margin-right: 0; + margin-left: 0; + border-width: .2rem; + } + + + .highlight, + + .clipboard + .highlight { + margin-top: 0; + } + + + p { + margin-top: 2rem; + } + + .pos-f-t { + position: relative; + margin: -1rem; + + @include media-breakpoint-up(sm) { + margin: -1.5rem; + } + } + + .custom-file-input:lang(es) ~ .custom-file-label::after { + content: "Elegir"; + } + + > .form-control { + + .form-control { + margin-top: .5rem; + } + } + + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress, + > .progress + .btn { + margin-top: 1rem; + } + + > .dropdown-menu:first-child { + position: static; + display: block; + } + + > .form-group:last-child { + margin-bottom: 0; + } + + > .close { + float: none; + } +} + +// Typography +.bd-example-type { + .table { + .type-info { + color: #999; + vertical-align: middle; + } + td { + padding: 1rem 0; + border-color: #eee; + } + tr:first-child td { + border-top: 0; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 0; + margin-bottom: 0; + } +} + +// Contextual background colors +.bd-example-bg-classes p { + padding: 1rem; +} + +// Images +.bd-example > img { + + img { + margin-left: .5rem; + } +} + +// Buttons +.bd-example { + > .btn-group { + margin-top: .25rem; + margin-bottom: .25rem; + } + > .btn-toolbar + .btn-toolbar { + margin-top: .5rem; + } +} + +// Forms +.bd-example-control-sizing select, +.bd-example-control-sizing input[type="text"] + input[type="text"] { + margin-top: .5rem; +} +.bd-example-form .input-group { + margin-bottom: .5rem; +} +.bd-example > textarea.form-control { + resize: vertical; +} + +// List groups +.bd-example > .list-group { + max-width: 400px; +} + +// Navbars +.bd-example { + .fixed-top, + .sticky-top { + position: static; + margin: -1rem -1rem 1rem; + } + .fixed-bottom { + position: static; + margin: 1rem -1rem -1rem; + } + + @include media-breakpoint-up(sm) { + .fixed-top, + .sticky-top { + margin: -1.5rem -1.5rem 1rem; + } + .fixed-bottom { + margin: 1rem -1.5rem -1.5rem; + } + } +} + +// Pagination +.bd-example .pagination { + margin-top: .5rem; + margin-bottom: .5rem; +} + +// Example modals +.modal { + z-index: 1072; + + .tooltip, + .popover { + z-index: 1073; + } +} + +.modal-backdrop { + z-index: 1071; +} + +.bd-example-modal { + background-color: #fafafa; + + .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + z-index: 1; + display: block; + } + + .modal-dialog { + left: auto; + margin-right: auto; + margin-left: auto; + } +} + +// Example tabbable tabs +.bd-example-tabs .nav-tabs { + margin-bottom: 1rem; +} + +// Popovers +.bd-example-popover-static { + padding-bottom: 1.5rem; + background-color: #f9f9f9; + + .popover { + position: relative; + display: block; + float: left; + width: 260px; + margin: 1.25rem; + } +} + +// Tooltips +.tooltip-demo a { + white-space: nowrap; +} + +.bd-example-tooltip-static .tooltip { + position: relative; + display: inline-block; + margin: 10px 20px; + opacity: 1; +} + +// Scrollspy demo on fixed height div +.scrollspy-example { + position: relative; + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +.scrollspy-example-2 { + position: relative; + height: 350px; + overflow: auto; +} + +.bd-example-border-utils { + [class^="border"] { + display: inline-block; + width: 5rem; + height: 5rem; + margin: .25rem; + background-color: #f5f5f5; + } +} + +.bd-example-border-utils-0 { + [class^="border"] { + border: 1px solid $border-color; + } +} + +// +// Code snippets +// + +.highlight { + padding: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; + background-color: $gray-100; + -ms-overflow-style: -ms-autohiding-scrollbar; + + @include media-breakpoint-up(sm) { + padding: 1.5rem; + } +} + +.bd-content .highlight { + margin-right: (-$grid-gutter-width / 2); + margin-left: (-$grid-gutter-width / 2); + + @include media-breakpoint-up(sm) { + margin-right: 0; + margin-left: 0; + } +} + +.highlight { + pre { + padding: 0; + margin-top: 0; + margin-bottom: 0; + background-color: transparent; + border: 0; + } + pre code { + font-size: inherit; + color: $gray-900; // Effectively the base text color + } +} |