update gulp-sass and adding /src folder
This commit is contained in:
Holger Könemann
parent
94c0d50865
commit
5919fef6a4
|
|
@ -32,7 +32,7 @@
|
|||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-rimraf": "^0.2.1",
|
||||
"gulp-sass": "^2.3.2",
|
||||
"gulp-sass": "^3.0.0",
|
||||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-watch": "^4.3.10",
|
||||
"gulp-clone": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
/*
|
||||
* Owl Carousel - Core
|
||||
*/
|
||||
.owl-carousel {
|
||||
display: none;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* position relative and z-index fix webkit rendering fonts issue */
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.owl-carousel .owl-stage {
|
||||
position: relative;
|
||||
-ms-touch-action: pan-Y; }
|
||||
.owl-carousel .owl-stage:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0; }
|
||||
.owl-carousel .owl-stage-outer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* fix for flashing background */
|
||||
-webkit-transform: translate3d(0px, 0px, 0px); }
|
||||
.owl-carousel .owl-item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
.owl-carousel .owl-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
-webkit-transform-style: preserve-3d; }
|
||||
.owl-carousel .owl-nav.disabled,
|
||||
.owl-carousel .owl-dots.disabled {
|
||||
display: none; }
|
||||
.owl-carousel .owl-nav .owl-prev,
|
||||
.owl-carousel .owl-nav .owl-next,
|
||||
.owl-carousel .owl-dot {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-loaded {
|
||||
display: block; }
|
||||
.owl-carousel.owl-loading {
|
||||
opacity: 0;
|
||||
display: block; }
|
||||
.owl-carousel.owl-hidden {
|
||||
opacity: 0; }
|
||||
.owl-carousel.owl-refresh .owl-item {
|
||||
visibility: hidden; }
|
||||
.owl-carousel.owl-drag .owl-item {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-grab {
|
||||
cursor: move;
|
||||
cursor: grab; }
|
||||
.owl-carousel.owl-rtl {
|
||||
direction: rtl; }
|
||||
.owl-carousel.owl-rtl .owl-item {
|
||||
float: right; }
|
||||
|
||||
/* No Js */
|
||||
.no-js .owl-carousel {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Animate Plugin
|
||||
*/
|
||||
.owl-carousel .animated {
|
||||
-webkit-animation-duration: 1000ms;
|
||||
animation-duration: 1000ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.owl-carousel .owl-animated-in {
|
||||
z-index: 0; }
|
||||
|
||||
.owl-carousel .owl-animated-out {
|
||||
z-index: 1; }
|
||||
|
||||
.owl-carousel .fadeOut {
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut; }
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 0; } }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Auto Height Plugin
|
||||
*/
|
||||
.owl-height {
|
||||
transition: height 500ms ease-in-out; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Lazy Load Plugin
|
||||
*/
|
||||
.owl-carousel .owl-item .owl-lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-item img.owl-lazy {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Video Plugin
|
||||
*/
|
||||
.owl-carousel .owl-video-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #000; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
background: url("owl.video.play.png") no-repeat;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transition: -webkit-transform 100ms ease;
|
||||
transition: transform 100ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon:hover {
|
||||
-webkit-transform: scale(1.3, 1.3);
|
||||
-ms-transform: scale(1.3, 1.3);
|
||||
transform: scale(1.3, 1.3); }
|
||||
|
||||
.owl-carousel .owl-video-playing .owl-video-tn,
|
||||
.owl-carousel .owl-video-playing .owl-video-play-icon {
|
||||
display: none; }
|
||||
|
||||
.owl-carousel .owl-video-tn {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:-webkit-transform .1s ease;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
/*
|
||||
* Default theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #869791;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #869791; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
/*
|
||||
* Green theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #4DC7A0;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #4DC7A0; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.tether-element {
|
||||
position: absolute;
|
||||
display: none; }
|
||||
.tether-element.tether-open {
|
||||
display: block; }
|
||||
|
||||
.tether-element.tether-theme-arrows-dark {
|
||||
max-width: 100%;
|
||||
max-height: 100%; }
|
||||
.tether-element.tether-theme-arrows-dark .tether-content {
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em; }
|
||||
.tether-element.tether-theme-arrows-dark .tether-content:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-width: 16px;
|
||||
border-style: solid; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
border-top-color: #000;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
border-bottom-color: #000;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
border-left-color: #000;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
border-right-color: #000;
|
||||
border-left: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-target-attached-center .tether-content {
|
||||
left: -32px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-target-attached-center .tether-content {
|
||||
left: 32px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 16px;
|
||||
border-bottom-color: #000;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border-bottom-color: #000;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
||||
top: 100%;
|
||||
left: 16px;
|
||||
border-top-color: #000;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
||||
top: 100%;
|
||||
right: 16px;
|
||||
border-top-color: #000;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 16px;
|
||||
border-bottom-color: #000;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border-bottom-color: #000;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
|
||||
top: 100%;
|
||||
left: 16px;
|
||||
border-top-color: #000;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
|
||||
top: 100%;
|
||||
right: 16px;
|
||||
border-top-color: #000;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
||||
top: 16px;
|
||||
left: 100%;
|
||||
border-left-color: #000;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
||||
top: 16px;
|
||||
right: 100%;
|
||||
border-right-color: #000;
|
||||
border-left: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
||||
bottom: 16px;
|
||||
left: 100%;
|
||||
border-left-color: #000;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
||||
bottom: 16px;
|
||||
right: 100%;
|
||||
border-right-color: #000;
|
||||
border-left: 0; }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,154 @@
|
|||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.tether-element {
|
||||
position: absolute;
|
||||
display: none; }
|
||||
.tether-element.tether-open {
|
||||
display: block; }
|
||||
|
||||
.tether-element.tether-theme-arrows {
|
||||
max-width: 100%;
|
||||
max-height: 100%; }
|
||||
.tether-element.tether-theme-arrows .tether-content {
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
padding: 1em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
|
||||
.tether-element.tether-theme-arrows .tether-content:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-width: 16px;
|
||||
border-style: solid; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
border-top-color: #fff;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
border-bottom-color: #fff;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
border-left-color: #fff;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
border-right-color: #fff;
|
||||
border-left: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-target-attached-center .tether-content {
|
||||
left: -32px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-target-attached-center .tether-content {
|
||||
left: 32px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 16px;
|
||||
border-bottom-color: #fff;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border-bottom-color: #fff;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
||||
top: 100%;
|
||||
left: 16px;
|
||||
border-top-color: #fff;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
||||
top: 100%;
|
||||
right: 16px;
|
||||
border-top-color: #fff;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
|
||||
bottom: 100%;
|
||||
left: 16px;
|
||||
border-bottom-color: #fff;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
|
||||
margin-top: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border-bottom-color: #fff;
|
||||
border-top: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
|
||||
top: 100%;
|
||||
left: 16px;
|
||||
border-top-color: #fff;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
|
||||
margin-bottom: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
|
||||
top: 100%;
|
||||
right: 16px;
|
||||
border-top-color: #fff;
|
||||
border-bottom: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
||||
top: 16px;
|
||||
left: 100%;
|
||||
border-left-color: #fff;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
||||
top: 16px;
|
||||
right: 100%;
|
||||
border-right-color: #fff;
|
||||
border-left: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
|
||||
margin-right: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
||||
bottom: 16px;
|
||||
left: 100%;
|
||||
border-left-color: #fff;
|
||||
border-right: 0; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
|
||||
margin-left: 16px; }
|
||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
||||
bottom: 16px;
|
||||
right: 100%;
|
||||
border-right-color: #fff;
|
||||
border-left: 0; }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,21 @@
|
|||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.tether-element {
|
||||
position: absolute;
|
||||
display: none; }
|
||||
.tether-element.tether-open {
|
||||
display: block; }
|
||||
|
||||
.tether-element.tether-theme-basic {
|
||||
max-width: 100%;
|
||||
max-height: 100%; }
|
||||
.tether-element.tether-theme-basic .tether-content {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
padding: 1em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.tether-element {
|
||||
position: absolute;
|
||||
display: none; }
|
||||
.tether-element.tether-open {
|
||||
display: block; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,482 @@
|
|||
/* global Symbol */
|
||||
// Defining this global in .eslintrc.json would create a danger of using the global
|
||||
// unguarded in another place, it seems safer to define global only for this module
|
||||
|
||||
define( [
|
||||
"./var/arr",
|
||||
"./var/document",
|
||||
"./var/getProto",
|
||||
"./var/slice",
|
||||
"./var/concat",
|
||||
"./var/push",
|
||||
"./var/indexOf",
|
||||
"./var/class2type",
|
||||
"./var/toString",
|
||||
"./var/hasOwn",
|
||||
"./var/fnToString",
|
||||
"./var/ObjectFunctionString",
|
||||
"./var/support",
|
||||
"./core/DOMEval"
|
||||
], function( arr, document, getProto, slice, concat, push, indexOf,
|
||||
class2type, toString, hasOwn, fnToString, ObjectFunctionString,
|
||||
support, DOMEval ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var
|
||||
version = "3.1.1",
|
||||
|
||||
// Define a local copy of jQuery
|
||||
jQuery = function( selector, context ) {
|
||||
|
||||
// The jQuery object is actually just the init constructor 'enhanced'
|
||||
// Need init if jQuery is called (just allow error to be thrown if not included)
|
||||
return new jQuery.fn.init( selector, context );
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only
|
||||
// Make sure we trim BOM and NBSP
|
||||
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
|
||||
|
||||
// Matches dashed string for camelizing
|
||||
rmsPrefix = /^-ms-/,
|
||||
rdashAlpha = /-([a-z])/g,
|
||||
|
||||
// Used by jQuery.camelCase as callback to replace()
|
||||
fcamelCase = function( all, letter ) {
|
||||
return letter.toUpperCase();
|
||||
};
|
||||
|
||||
jQuery.fn = jQuery.prototype = {
|
||||
|
||||
// The current version of jQuery being used
|
||||
jquery: version,
|
||||
|
||||
constructor: jQuery,
|
||||
|
||||
// The default length of a jQuery object is 0
|
||||
length: 0,
|
||||
|
||||
toArray: function() {
|
||||
return slice.call( this );
|
||||
},
|
||||
|
||||
// Get the Nth element in the matched element set OR
|
||||
// Get the whole matched element set as a clean array
|
||||
get: function( num ) {
|
||||
|
||||
// Return all the elements in a clean array
|
||||
if ( num == null ) {
|
||||
return slice.call( this );
|
||||
}
|
||||
|
||||
// Return just the one element from the set
|
||||
return num < 0 ? this[ num + this.length ] : this[ num ];
|
||||
},
|
||||
|
||||
// Take an array of elements and push it onto the stack
|
||||
// (returning the new matched element set)
|
||||
pushStack: function( elems ) {
|
||||
|
||||
// Build a new jQuery matched element set
|
||||
var ret = jQuery.merge( this.constructor(), elems );
|
||||
|
||||
// Add the old object onto the stack (as a reference)
|
||||
ret.prevObject = this;
|
||||
|
||||
// Return the newly-formed element set
|
||||
return ret;
|
||||
},
|
||||
|
||||
// Execute a callback for every element in the matched set.
|
||||
each: function( callback ) {
|
||||
return jQuery.each( this, callback );
|
||||
},
|
||||
|
||||
map: function( callback ) {
|
||||
return this.pushStack( jQuery.map( this, function( elem, i ) {
|
||||
return callback.call( elem, i, elem );
|
||||
} ) );
|
||||
},
|
||||
|
||||
slice: function() {
|
||||
return this.pushStack( slice.apply( this, arguments ) );
|
||||
},
|
||||
|
||||
first: function() {
|
||||
return this.eq( 0 );
|
||||
},
|
||||
|
||||
last: function() {
|
||||
return this.eq( -1 );
|
||||
},
|
||||
|
||||
eq: function( i ) {
|
||||
var len = this.length,
|
||||
j = +i + ( i < 0 ? len : 0 );
|
||||
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
|
||||
},
|
||||
|
||||
end: function() {
|
||||
return this.prevObject || this.constructor();
|
||||
},
|
||||
|
||||
// For internal use only.
|
||||
// Behaves like an Array's method, not like a jQuery method.
|
||||
push: push,
|
||||
sort: arr.sort,
|
||||
splice: arr.splice
|
||||
};
|
||||
|
||||
jQuery.extend = jQuery.fn.extend = function() {
|
||||
var options, name, src, copy, copyIsArray, clone,
|
||||
target = arguments[ 0 ] || {},
|
||||
i = 1,
|
||||
length = arguments.length,
|
||||
deep = false;
|
||||
|
||||
// Handle a deep copy situation
|
||||
if ( typeof target === "boolean" ) {
|
||||
deep = target;
|
||||
|
||||
// Skip the boolean and the target
|
||||
target = arguments[ i ] || {};
|
||||
i++;
|
||||
}
|
||||
|
||||
// Handle case when target is a string or something (possible in deep copy)
|
||||
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
|
||||
target = {};
|
||||
}
|
||||
|
||||
// Extend jQuery itself if only one argument is passed
|
||||
if ( i === length ) {
|
||||
target = this;
|
||||
i--;
|
||||
}
|
||||
|
||||
for ( ; i < length; i++ ) {
|
||||
|
||||
// Only deal with non-null/undefined values
|
||||
if ( ( options = arguments[ i ] ) != null ) {
|
||||
|
||||
// Extend the base object
|
||||
for ( name in options ) {
|
||||
src = target[ name ];
|
||||
copy = options[ name ];
|
||||
|
||||
// Prevent never-ending loop
|
||||
if ( target === copy ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Recurse if we're merging plain objects or arrays
|
||||
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
|
||||
( copyIsArray = jQuery.isArray( copy ) ) ) ) {
|
||||
|
||||
if ( copyIsArray ) {
|
||||
copyIsArray = false;
|
||||
clone = src && jQuery.isArray( src ) ? src : [];
|
||||
|
||||
} else {
|
||||
clone = src && jQuery.isPlainObject( src ) ? src : {};
|
||||
}
|
||||
|
||||
// Never move original objects, clone them
|
||||
target[ name ] = jQuery.extend( deep, clone, copy );
|
||||
|
||||
// Don't bring in undefined values
|
||||
} else if ( copy !== undefined ) {
|
||||
target[ name ] = copy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Return the modified object
|
||||
return target;
|
||||
};
|
||||
|
||||
jQuery.extend( {
|
||||
|
||||
// Unique for each copy of jQuery on the page
|
||||
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
|
||||
|
||||
// Assume jQuery is ready without the ready module
|
||||
isReady: true,
|
||||
|
||||
error: function( msg ) {
|
||||
throw new Error( msg );
|
||||
},
|
||||
|
||||
noop: function() {},
|
||||
|
||||
isFunction: function( obj ) {
|
||||
return jQuery.type( obj ) === "function";
|
||||
},
|
||||
|
||||
isArray: Array.isArray,
|
||||
|
||||
isWindow: function( obj ) {
|
||||
return obj != null && obj === obj.window;
|
||||
},
|
||||
|
||||
isNumeric: function( obj ) {
|
||||
|
||||
// As of jQuery 3.0, isNumeric is limited to
|
||||
// strings and numbers (primitives or objects)
|
||||
// that can be coerced to finite numbers (gh-2662)
|
||||
var type = jQuery.type( obj );
|
||||
return ( type === "number" || type === "string" ) &&
|
||||
|
||||
// parseFloat NaNs numeric-cast false positives ("")
|
||||
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
|
||||
// subtraction forces infinities to NaN
|
||||
!isNaN( obj - parseFloat( obj ) );
|
||||
},
|
||||
|
||||
isPlainObject: function( obj ) {
|
||||
var proto, Ctor;
|
||||
|
||||
// Detect obvious negatives
|
||||
// Use toString instead of jQuery.type to catch host objects
|
||||
if ( !obj || toString.call( obj ) !== "[object Object]" ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
proto = getProto( obj );
|
||||
|
||||
// Objects with no prototype (e.g., `Object.create( null )`) are plain
|
||||
if ( !proto ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Objects with prototype are plain iff they were constructed by a global Object function
|
||||
Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
|
||||
return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
|
||||
},
|
||||
|
||||
isEmptyObject: function( obj ) {
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
// See https://github.com/eslint/eslint/issues/6125
|
||||
var name;
|
||||
|
||||
for ( name in obj ) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
type: function( obj ) {
|
||||
if ( obj == null ) {
|
||||
return obj + "";
|
||||
}
|
||||
|
||||
// Support: Android <=2.3 only (functionish RegExp)
|
||||
return typeof obj === "object" || typeof obj === "function" ?
|
||||
class2type[ toString.call( obj ) ] || "object" :
|
||||
typeof obj;
|
||||
},
|
||||
|
||||
// Evaluates a script in a global context
|
||||
globalEval: function( code ) {
|
||||
DOMEval( code );
|
||||
},
|
||||
|
||||
// Convert dashed to camelCase; used by the css and data modules
|
||||
// Support: IE <=9 - 11, Edge 12 - 13
|
||||
// Microsoft forgot to hump their vendor prefix (#9572)
|
||||
camelCase: function( string ) {
|
||||
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
|
||||
},
|
||||
|
||||
nodeName: function( elem, name ) {
|
||||
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
|
||||
},
|
||||
|
||||
each: function( obj, callback ) {
|
||||
var length, i = 0;
|
||||
|
||||
if ( isArrayLike( obj ) ) {
|
||||
length = obj.length;
|
||||
for ( ; i < length; i++ ) {
|
||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for ( i in obj ) {
|
||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only
|
||||
trim: function( text ) {
|
||||
return text == null ?
|
||||
"" :
|
||||
( text + "" ).replace( rtrim, "" );
|
||||
},
|
||||
|
||||
// results is for internal usage only
|
||||
makeArray: function( arr, results ) {
|
||||
var ret = results || [];
|
||||
|
||||
if ( arr != null ) {
|
||||
if ( isArrayLike( Object( arr ) ) ) {
|
||||
jQuery.merge( ret,
|
||||
typeof arr === "string" ?
|
||||
[ arr ] : arr
|
||||
);
|
||||
} else {
|
||||
push.call( ret, arr );
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
inArray: function( elem, arr, i ) {
|
||||
return arr == null ? -1 : indexOf.call( arr, elem, i );
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only, PhantomJS 1 only
|
||||
// push.apply(_, arraylike) throws on ancient WebKit
|
||||
merge: function( first, second ) {
|
||||
var len = +second.length,
|
||||
j = 0,
|
||||
i = first.length;
|
||||
|
||||
for ( ; j < len; j++ ) {
|
||||
first[ i++ ] = second[ j ];
|
||||
}
|
||||
|
||||
first.length = i;
|
||||
|
||||
return first;
|
||||
},
|
||||
|
||||
grep: function( elems, callback, invert ) {
|
||||
var callbackInverse,
|
||||
matches = [],
|
||||
i = 0,
|
||||
length = elems.length,
|
||||
callbackExpect = !invert;
|
||||
|
||||
// Go through the array, only saving the items
|
||||
// that pass the validator function
|
||||
for ( ; i < length; i++ ) {
|
||||
callbackInverse = !callback( elems[ i ], i );
|
||||
if ( callbackInverse !== callbackExpect ) {
|
||||
matches.push( elems[ i ] );
|
||||
}
|
||||
}
|
||||
|
||||
return matches;
|
||||
},
|
||||
|
||||
// arg is for internal usage only
|
||||
map: function( elems, callback, arg ) {
|
||||
var length, value,
|
||||
i = 0,
|
||||
ret = [];
|
||||
|
||||
// Go through the array, translating each of the items to their new values
|
||||
if ( isArrayLike( elems ) ) {
|
||||
length = elems.length;
|
||||
for ( ; i < length; i++ ) {
|
||||
value = callback( elems[ i ], i, arg );
|
||||
|
||||
if ( value != null ) {
|
||||
ret.push( value );
|
||||
}
|
||||
}
|
||||
|
||||
// Go through every key on the object,
|
||||
} else {
|
||||
for ( i in elems ) {
|
||||
value = callback( elems[ i ], i, arg );
|
||||
|
||||
if ( value != null ) {
|
||||
ret.push( value );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flatten any nested arrays
|
||||
return concat.apply( [], ret );
|
||||
},
|
||||
|
||||
// A global GUID counter for objects
|
||||
guid: 1,
|
||||
|
||||
// Bind a function to a context, optionally partially applying any
|
||||
// arguments.
|
||||
proxy: function( fn, context ) {
|
||||
var tmp, args, proxy;
|
||||
|
||||
if ( typeof context === "string" ) {
|
||||
tmp = fn[ context ];
|
||||
context = fn;
|
||||
fn = tmp;
|
||||
}
|
||||
|
||||
// Quick check to determine if target is callable, in the spec
|
||||
// this throws a TypeError, but we will just return undefined.
|
||||
if ( !jQuery.isFunction( fn ) ) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// Simulated bind
|
||||
args = slice.call( arguments, 2 );
|
||||
proxy = function() {
|
||||
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
|
||||
};
|
||||
|
||||
// Set the guid of unique handler to the same of original handler, so it can be removed
|
||||
proxy.guid = fn.guid = fn.guid || jQuery.guid++;
|
||||
|
||||
return proxy;
|
||||
},
|
||||
|
||||
now: Date.now,
|
||||
|
||||
// jQuery.support is not used in Core but other projects attach their
|
||||
// properties to it so it needs to exist.
|
||||
support: support
|
||||
} );
|
||||
|
||||
if ( typeof Symbol === "function" ) {
|
||||
jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
|
||||
}
|
||||
|
||||
// Populate the class2type map
|
||||
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
|
||||
function( i, name ) {
|
||||
class2type[ "[object " + name + "]" ] = name.toLowerCase();
|
||||
} );
|
||||
|
||||
function isArrayLike( obj ) {
|
||||
|
||||
// Support: real iOS 8.2 only (not reproducible in simulator)
|
||||
// `in` check used to prevent JIT error (gh-2145)
|
||||
// hasOwn isn't used here due to false negatives
|
||||
// regarding Nodelist length in IE
|
||||
var length = !!obj && "length" in obj && obj.length,
|
||||
type = jQuery.type( obj );
|
||||
|
||||
if ( type === "function" || jQuery.isWindow( obj ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return type === "array" || length === 0 ||
|
||||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
|
||||
}
|
||||
|
||||
return jQuery;
|
||||
} );
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* File customizer.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
// Site title and description.
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-title a' ).text( to );
|
||||
} );
|
||||
} );
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-description' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Header text color.
|
||||
wp.customize( 'header_textcolor', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'blank' === to ) {
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'clip': 'rect(1px, 1px, 1px, 1px)',
|
||||
'position': 'absolute'
|
||||
} );
|
||||
} else {
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'clip': 'auto',
|
||||
'position': 'relative'
|
||||
} );
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'color': to
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* File navigation.js.
|
||||
*
|
||||
* Handles toggling the navigation menu for small screens and enables TAB key
|
||||
* navigation support for dropdown menus.
|
||||
*/
|
||||
( function() {
|
||||
var container, button, menu, links, subMenus, i, len;
|
||||
|
||||
container = document.getElementById( 'site-navigation' );
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = container.getElementsByTagName( 'button' )[0];
|
||||
if ( 'undefined' === typeof button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu = container.getElementsByTagName( 'ul' )[0];
|
||||
|
||||
// Hide menu toggle button if menu is empty and return early.
|
||||
if ( 'undefined' === typeof menu ) {
|
||||
button.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className += ' nav-menu';
|
||||
}
|
||||
|
||||
button.onclick = function() {
|
||||
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
|
||||
container.className = container.className.replace( ' toggled', '' );
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
} else {
|
||||
container.className += ' toggled';
|
||||
button.setAttribute( 'aria-expanded', 'true' );
|
||||
menu.setAttribute( 'aria-expanded', 'true' );
|
||||
}
|
||||
};
|
||||
|
||||
// Get all the link elements within the menu.
|
||||
links = menu.getElementsByTagName( 'a' );
|
||||
subMenus = menu.getElementsByTagName( 'ul' );
|
||||
|
||||
// Set menu items with submenus to aria-haspopup="true".
|
||||
for ( i = 0, len = subMenus.length; i < len; i++ ) {
|
||||
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
|
||||
}
|
||||
|
||||
// Each time a menu link is focused or blurred, toggle focus.
|
||||
for ( i = 0, len = links.length; i < len; i++ ) {
|
||||
links[i].addEventListener( 'focus', toggleFocus, true );
|
||||
links[i].addEventListener( 'blur', toggleFocus, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes .focus class on an element.
|
||||
*/
|
||||
function toggleFocus() {
|
||||
var self = this;
|
||||
|
||||
// Move up through the ancestors of the current link until we hit .nav-menu.
|
||||
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
|
||||
|
||||
// On li elements toggle the class .focus.
|
||||
if ( 'li' === self.tagName.toLowerCase() ) {
|
||||
if ( -1 !== self.className.indexOf( 'focus' ) ) {
|
||||
self.className = self.className.replace( ' focus', '' );
|
||||
} else {
|
||||
self.className += ' focus';
|
||||
}
|
||||
}
|
||||
|
||||
self = self.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles `focus` class to allow submenu access on tablets.
|
||||
*/
|
||||
( function( container ) {
|
||||
var touchStartFn, i,
|
||||
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
|
||||
|
||||
if ( 'ontouchstart' in window ) {
|
||||
touchStartFn = function( e ) {
|
||||
var menuItem = this.parentNode, i;
|
||||
|
||||
if ( ! menuItem.classList.contains( 'focus' ) ) {
|
||||
e.preventDefault();
|
||||
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
|
||||
if ( menuItem === menuItem.parentNode.children[i] ) {
|
||||
continue;
|
||||
}
|
||||
menuItem.parentNode.children[i].classList.remove( 'focus' );
|
||||
}
|
||||
menuItem.classList.add( 'focus' );
|
||||
} else {
|
||||
menuItem.classList.remove( 'focus' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i = 0; i < parentLink.length; ++i ) {
|
||||
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
|
||||
}
|
||||
}
|
||||
}( container ) );
|
||||
} )();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* File skip-link-focus-fix.js.
|
||||
*
|
||||
* Helps with accessibility for keyboard only users.
|
||||
*
|
||||
* Learn more: https://git.io/vWdr2
|
||||
*/
|
||||
( function() {
|
||||
var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
|
||||
isOpera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
|
||||
isIe = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
|
||||
|
||||
if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) {
|
||||
window.addEventListener( 'hashchange', function() {
|
||||
var id = location.hash.substring( 1 ),
|
||||
element;
|
||||
|
||||
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
element = document.getElementById( id );
|
||||
|
||||
if ( element ) {
|
||||
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
||||
element.tabIndex = -1;
|
||||
}
|
||||
|
||||
element.focus();
|
||||
}
|
||||
}, false );
|
||||
}
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,56 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $spacer-y;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: ($alert-padding-x * 2);
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: relative;
|
||||
top: -.125rem;
|
||||
right: -$alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
//
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
.alert-success {
|
||||
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
|
||||
}
|
||||
.alert-info {
|
||||
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
|
||||
}
|
||||
.alert-warning {
|
||||
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
|
||||
}
|
||||
.alert-danger {
|
||||
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.fade {
|
||||
opacity: 0;
|
||||
transition: opacity .15s linear;
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
&.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.collapse.in {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
&.collapse.in {
|
||||
display: table-row-group;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .35s;
|
||||
transition-property: height;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.breadcrumb {
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $spacer-y;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
float: left;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: "#{$breadcrumb-divider}";
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" button to the front
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
@include hover {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn-group {
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: -$input-btn-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
margin-left: -$btn-toolbar-margin; // Offset the first child's margin
|
||||
@include clearfix();
|
||||
|
||||
.btn-group,
|
||||
.input-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
> .btn,
|
||||
> .btn-group,
|
||||
> .input-group {
|
||||
margin-left: $btn-toolbar-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
float: left;
|
||||
}
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// On active and open, don't show outline
|
||||
.btn-group .dropdown-toggle:active,
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.btn + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x * .75;
|
||||
padding-left: $btn-padding-x * .75;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-sm * .75;
|
||||
padding-left: $btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-lg * .75;
|
||||
padding-left: $btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.btn-group.open .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-left: 0;
|
||||
}
|
||||
// Carets in other button sizes
|
||||
.btn-lg .caret {
|
||||
border-width: $caret-width-lg $caret-width-lg 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
// Upside down carets for .dropup
|
||||
.dropup .btn-lg .caret {
|
||||
border-width: 0 $caret-width-lg $caret-width-lg;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
> .btn,
|
||||
> .btn-group,
|
||||
> .btn-group > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Clear floats so dropdown menus can be properly placed
|
||||
> .btn-group {
|
||||
@include clearfix();
|
||||
|
||||
> .btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -$input-btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0,0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: $input-btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
|
||||
@include transition(all .2s ease-in-out);
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: .65;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.btn.disabled,
|
||||
fieldset[disabled] a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||
}
|
||||
.btn-secondary {
|
||||
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
||||
}
|
||||
.btn-info {
|
||||
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
||||
}
|
||||
.btn-success {
|
||||
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
||||
}
|
||||
.btn-warning {
|
||||
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
||||
}
|
||||
.btn-danger {
|
||||
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
||||
}
|
||||
|
||||
// Remove all backgrounds
|
||||
.btn-outline-primary {
|
||||
@include button-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
@include button-outline-variant($btn-secondary-border);
|
||||
}
|
||||
.btn-outline-info {
|
||||
@include button-outline-variant($btn-info-bg);
|
||||
}
|
||||
.btn-outline-success {
|
||||
@include button-outline-variant($btn-success-bg);
|
||||
}
|
||||
.btn-outline-warning {
|
||||
@include button-outline-variant($btn-warning-bg);
|
||||
}
|
||||
.btn-outline-danger {
|
||||
@include button-outline-variant($btn-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: normal;
|
||||
color: $link-color;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:disabled {
|
||||
@include hover-focus {
|
||||
color: $btn-link-disabled-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
// line-height: ensure even-numbered height of button next to large input
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
|
||||
}
|
||||
.btn-sm {
|
||||
// line-height: ensure proper height of button next to small input
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $card-spacer-y;
|
||||
background-color: $card-bg;
|
||||
// border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
border: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@include clearfix;
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -($card-spacer-y / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// .card-actions {
|
||||
// padding: $card-spacer-y $card-spacer-x;
|
||||
|
||||
// .card-link + .card-link {
|
||||
// margin-left: $card-spacer-x;
|
||||
// }
|
||||
// }
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
@include clearfix;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@include clearfix;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Background variations
|
||||
//
|
||||
|
||||
.card-primary {
|
||||
@include card-variant($brand-primary, $brand-primary);
|
||||
}
|
||||
.card-success {
|
||||
@include card-variant($brand-success, $brand-success);
|
||||
}
|
||||
.card-info {
|
||||
@include card-variant($brand-info, $brand-info);
|
||||
}
|
||||
.card-warning {
|
||||
@include card-variant($brand-warning, $brand-warning);
|
||||
}
|
||||
.card-danger {
|
||||
@include card-variant($brand-danger, $brand-danger);
|
||||
}
|
||||
|
||||
// Remove all backgrounds
|
||||
.card-outline-primary {
|
||||
@include card-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.card-outline-secondary {
|
||||
@include card-outline-variant($btn-secondary-border);
|
||||
}
|
||||
.card-outline-info {
|
||||
@include card-outline-variant($btn-info-bg);
|
||||
}
|
||||
.card-outline-success {
|
||||
@include card-outline-variant($btn-success-bg);
|
||||
}
|
||||
.card-outline-warning {
|
||||
@include card-outline-variant($btn-warning-bg);
|
||||
}
|
||||
.card-outline-danger {
|
||||
@include card-outline-variant($btn-danger-bg);
|
||||
}
|
||||
|
||||
//
|
||||
// Inverse text within a card for use with dark backgrounds
|
||||
//
|
||||
|
||||
.card-inverse {
|
||||
@include card-inverse;
|
||||
}
|
||||
|
||||
//
|
||||
// Blockquote
|
||||
//
|
||||
|
||||
.card-blockquote {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img {
|
||||
// margin: -1.325rem;
|
||||
@include border-radius($card-border-radius-inner);
|
||||
}
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
@include border-top-radius($card-border-radius-inner);
|
||||
}
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius($card-border-radius-inner);
|
||||
}
|
||||
|
||||
|
||||
// Card set
|
||||
//
|
||||
// Heads up! We do some funky style resetting here for margins across our two
|
||||
// variations (one flex, one table). Individual cards have margin-bottom by
|
||||
// default, but they're ignored due to table styles. For a consistent design,
|
||||
// we've done the same to the flex variation.
|
||||
//
|
||||
// Those changes are noted by `// Margin balancing`.
|
||||
|
||||
@if $enable-flex {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-bottom: $card-spacer-y; // Margin balancing
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
flex: 1 0 0;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Margin balancing
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-up(sm) {
|
||||
$space-between-cards: (2 * $card-deck-margin);
|
||||
.card-deck {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: $card-spacer-y; // Margin balancing
|
||||
table-layout: fixed;
|
||||
border-spacing: $space-between-cards 0;
|
||||
|
||||
.card {
|
||||
display: table-cell;
|
||||
margin-bottom: 0; // Margin balancing
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.card-deck-wrapper {
|
||||
margin-right: (-$space-between-cards);
|
||||
margin-left: (-$space-between-cards);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
} @else {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.card {
|
||||
@if $enable-flex {
|
||||
flex: 1 0 0;
|
||||
} @else {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
column-gap: $card-columns-sm-up-column-gap;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let them exceed the column width
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
// Wrapper for the slide container and indicators
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> .carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
transition: .6s ease-in-out left;
|
||||
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
@extend .img-fluid;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// WebKit CSS3 transforms for supported devices
|
||||
@media all and (transform-3d), (-webkit-transform-3d) {
|
||||
transition: transform .6s ease-in-out;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
|
||||
&.next,
|
||||
&.active.right {
|
||||
left: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
&.prev,
|
||||
&.active.left {
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
&.next.left,
|
||||
&.prev.right,
|
||||
&.active {
|
||||
left: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .active,
|
||||
> .next,
|
||||
> .prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .next,
|
||||
> .prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .next {
|
||||
left: 100%;
|
||||
}
|
||||
> .prev {
|
||||
left: -100%;
|
||||
}
|
||||
> .next.left,
|
||||
> .prev.right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .active.left {
|
||||
left: -100%;
|
||||
}
|
||||
> .active.right {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: $carousel-control-width;
|
||||
font-size: $carousel-control-font-size;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
text-shadow: $carousel-text-shadow;
|
||||
opacity: $carousel-control-opacity;
|
||||
// We can't have this transition here because WebKit cancels the carousel
|
||||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Set gradients for backgrounds
|
||||
&.left {
|
||||
@include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
// Toggles
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
width: $carousel-icon-width;
|
||||
height: $carousel-icon-width;
|
||||
margin-top: -($carousel-icon-width / 2);
|
||||
font-family: serif;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-prev {
|
||||
left: 50%;
|
||||
margin-left: -($carousel-icon-width / 2);
|
||||
}
|
||||
.icon-next {
|
||||
right: 50%;
|
||||
margin-right: -($carousel-icon-width / 2);
|
||||
}
|
||||
|
||||
.icon-prev {
|
||||
&::before {
|
||||
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
}
|
||||
}
|
||||
.icon-next {
|
||||
&::before {
|
||||
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an unordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
z-index: 15;
|
||||
width: $carousel-indicators-width;
|
||||
padding-left: 0;
|
||||
margin-left: -($carousel-indicators-width / 2);
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: $carousel-indicator-size;
|
||||
height: $carousel-indicator-size;
|
||||
margin: 1px;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
// IE9 hack for event handling
|
||||
//
|
||||
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
|
||||
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
||||
background-color: rgba(0,0,0,0); // IE9
|
||||
border: 1px solid $carousel-indicator-border-color;
|
||||
border-radius: $carousel-indicator-size;
|
||||
}
|
||||
|
||||
.active {
|
||||
width: $carousel-indicator-active-size;
|
||||
height: $carousel-indicator-active-size;
|
||||
margin: 0;
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
// Hidden by default for smaller viewports.
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: ((100% - $carousel-caption-width) / 2);
|
||||
bottom: 20px;
|
||||
left: ((100% - $carousel-caption-width) / 2);
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
text-shadow: $carousel-text-shadow;
|
||||
|
||||
.btn {
|
||||
text-shadow: none; // No shadow for button elements in carousel-caption
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Responsive variations
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Scale up the controls a smidge
|
||||
.carousel-control {
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: $carousel-control-sm-up-size;
|
||||
height: $carousel-control-sm-up-size;
|
||||
margin-top: -($carousel-control-sm-up-size / 2);
|
||||
font-size: $carousel-control-sm-up-size;
|
||||
}
|
||||
.icon-prev {
|
||||
margin-left: -($carousel-control-sm-up-size / 2);
|
||||
}
|
||||
.icon-next {
|
||||
margin-right: -($carousel-control-sm-up-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Show and left align the captions
|
||||
.carousel-caption {
|
||||
right: ((100% - $carousel-caption-sm-up-width) / 2);
|
||||
left: ((100% - $carousel-caption-sm-up-width) / 2);
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
// Move up the indicators
|
||||
.carousel-indicators {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.close {
|
||||
float: right;
|
||||
font-size: ($font-size-base * 1.5);
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .2;
|
||||
|
||||
@include hover-focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
// Inline and block code styles
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: $code-font-size;
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
// scss-lint:disable PropertyCount
|
||||
|
||||
// Embedded icons from Open Iconic.
|
||||
// Released under MIT and copyright 2014 Waybury.
|
||||
// https://useiconic.com/open
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Base class takes care of all the key behavioral aspects.
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: $custom-control-gutter;
|
||||
cursor: pointer;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: $custom-control-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
position: absolute;
|
||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||
opacity: 0;
|
||||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
color: $custom-control-checked-indicator-color;
|
||||
background-color: $custom-control-checked-indicator-bg;
|
||||
@include box-shadow($custom-control-checked-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-indicator {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
box-shadow: $custom-control-focus-indicator-box-shadow;
|
||||
}
|
||||
|
||||
&:active ~ .custom-control-indicator {
|
||||
color: $custom-control-active-indicator-color;
|
||||
background-color: $custom-control-active-indicator-bg;
|
||||
@include box-shadow($custom-control-active-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-indicator {
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
background-color: $custom-control-disabled-indicator-bg;
|
||||
}
|
||||
|
||||
~ .custom-control-description {
|
||||
color: $custom-control-disabled-description-color;
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom indicator
|
||||
//
|
||||
// Generates a shadow element to create our makeshift checkbox/radio background.
|
||||
|
||||
.custom-control-indicator {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $custom-control-indicator-size;
|
||||
height: $custom-control-indicator-size;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-control-indicator-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
//
|
||||
// Tweak just a few things for checkboxes.
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
@include border-radius($custom-checkbox-radius);
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-checkbox-checked-icon;
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: $custom-checkbox-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indeterminate-icon;
|
||||
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
//
|
||||
// Tweak just a few things for radios.
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-indicator {
|
||||
border-radius: $custom-radio-radius;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-radio-checked-icon;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout options
|
||||
//
|
||||
// By default radios and checkboxes are `inline-block` with no additional spacing
|
||||
// set. Use these optional classes to tweak the layout.
|
||||
|
||||
.custom-controls-stacked {
|
||||
.custom-control {
|
||||
float: left;
|
||||
clear: left;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// http://primercss.io.
|
||||
//
|
||||
// Includes IE9-specific hacks (noted by ` \9`).
|
||||
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
$select-border-width: ($border-width * 2);
|
||||
height: calc(#{$input-height} - #{$select-border-width});
|
||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||
padding-right: $custom-select-padding-x \9;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||
background-image: none \9;
|
||||
background-size: $custom-select-bg-size;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@include border-radius($custom-select-border-radius);
|
||||
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// supress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
padding-top: $custom-select-padding-y;
|
||||
padding-bottom: $custom-select-padding-y;
|
||||
font-size: $custom-select-sm-font-size;
|
||||
|
||||
// &:not([multiple]) {
|
||||
// height: 26px;
|
||||
// min-height: 26px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// File
|
||||
//
|
||||
// Custom file input.
|
||||
|
||||
.custom-file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
min-width: $custom-file-width;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
@include box-shadow($custom-file-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
user-select: none;
|
||||
background-color: $custom-file-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius($custom-file-border-radius);
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||
&:lang(#{$lang})::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
background-color: $custom-file-button-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||
&:lang(#{$lang})::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
// Bootstrap overrides
|
||||
//
|
||||
// Copy variables from `_variables.scss` to this file to override default values
|
||||
// without modifying source files.
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
// Generate the caret automatically
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: $caret-width;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
border-top: $caret-width solid;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
border-top: 0;
|
||||
border-bottom: $caret-width solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: $dropdown-margin-top 0 0; // override default ul
|
||||
font-size: $font-size-base;
|
||||
color: $body-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: 3px $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
//
|
||||
// Gray out text and ensure the hover/focus state remains gray
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
color: $dropdown-link-disabled-color;
|
||||
}
|
||||
|
||||
// Nuke hover/focus effects
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
@include reset-filter();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
.open {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
font-size: $font-size-sm;
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown-backdrop;
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
//
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
||||
|
||||
.dropup,
|
||||
.navbar-fixed-bottom .dropdown {
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
content: "";
|
||||
border-top: 0;
|
||||
border-bottom: $caret-width solid;
|
||||
}
|
||||
|
||||
// Different positioning for bottom up menu
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: $dropdown-margin-top;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,374 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
// height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@if $enable-rounded {
|
||||
// Manually use the if/else instead of the mixin to account for iOS override
|
||||
border-radius: $input-border-radius;
|
||||
} @else {
|
||||
// Otherwise undo the iOS default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-color-placeholder;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-bg-disabled;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:not([size]):not([multiple]) {
|
||||
$select-border-width: ($border-width * 2);
|
||||
height: calc(#{$input-height} - #{$select-border-width});
|
||||
}
|
||||
|
||||
&:focus::-ms-value {
|
||||
// Suppress the nested default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
||||
// match the appearance of the native widget.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Make file inputs better match text inputs by forcing them to new lines.
|
||||
.form-control-file,
|
||||
.form-control-range {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: $input-padding-y-lg;
|
||||
padding-bottom: $input-padding-y-lg;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: $input-padding-y-sm;
|
||||
padding-bottom: $input-padding-y-sm;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Legends
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the legend text to
|
||||
// be the same size as regular labels, and to align with the form controls.
|
||||
.col-form-legend {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
|
||||
// Static form control text
|
||||
//
|
||||
// Apply class to an element to make any string of text align with labels in a
|
||||
// horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
line-height: $input-line-height;
|
||||
border: solid transparent;
|
||||
border-width: 1px 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
select.form-control-sm {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
select.form-control-lg {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Designed to help with the organization and spacing of vertical forms. For
|
||||
// horizontal forms, use the predefined grid classes.
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: ($spacer * .25);
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: ($spacer * .75);
|
||||
|
||||
// Move up sibling radios or checkboxes for tighter spacing
|
||||
+ .form-check {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.form-check-label {
|
||||
color: $text-muted;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
margin-left: -1.25rem;
|
||||
|
||||
&:only-child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.form-check-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
+ .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $text-muted;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.form-control-feedback {
|
||||
margin-top: ($spacer * .25);
|
||||
}
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height / 4);
|
||||
background-size: ($input-height / 2) ($input-height / 2);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.has-success {
|
||||
@include form-control-validation($brand-success);
|
||||
|
||||
.form-control-success {
|
||||
background-image: $form-icon-success;
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include form-control-validation($brand-warning);
|
||||
|
||||
.form-control-warning {
|
||||
background-image: $form-icon-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
@include form-control-validation($brand-danger);
|
||||
|
||||
.form-control-danger {
|
||||
background-image: $form-icon-danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
// forms begin stacked on extra small (mobile) devices and then go inline when
|
||||
// viewports reach <768px.
|
||||
//
|
||||
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||
|
||||
.form-inline {
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-static {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: inline-table;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.form-control {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Input groups need that 100% width though
|
||||
.input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-check-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Re-override the feedback icon.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
transition: all .2s ease-in-out;
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer-y / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: $figure-caption-font-size;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
} @else {
|
||||
display: table;
|
||||
// Prevent input groups from inheriting border styles from table cells when
|
||||
// placed within a table.
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
@if $enable-flex {
|
||||
flex: 1;
|
||||
} @else {
|
||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||
// select elements in input groups. To fix it, we float the input. Details:
|
||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
@if not $enable-flex {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
@if not $enable-flex {
|
||||
width: 1%;
|
||||
}
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
|
||||
// Sizing options
|
||||
//
|
||||
// Remix the default form control sizing classes into new ones for easier
|
||||
// manipulation.
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
@extend .form-control-lg;
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
@extend .form-control-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text input groups
|
||||
//
|
||||
|
||||
.input-group-addon {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Sizing
|
||||
&.form-control-sm {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
&.form-control-lg {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset rounded corners
|
||||
//
|
||||
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-addon:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.form-control + .input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Button input groups
|
||||
//
|
||||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:not(:last-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: (-$input-btn-border-width);
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.jumbotron {
|
||||
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
||||
margin-bottom: $jumbotron-padding;
|
||||
background-color: $jumbotron-bg;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-hr {
|
||||
border-top-color: darken($jumbotron-bg, 10%);
|
||||
}
|
||||
|
||||
.jumbotron-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$list-group-border-width;
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
color: $list-group-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $list-group-disabled-bg;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: $list-group-disabled-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
text-decoration: none; // Repeat here because it inherits global a:hover otherwise
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-group-item-heading,
|
||||
.list-group-item-heading > small,
|
||||
.list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: $list-group-active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: $list-group-link-color;
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
.list-group-item-heading {
|
||||
color: $list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $list-group-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
|
||||
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
|
||||
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
|
||||
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
|
||||
|
||||
|
||||
// Custom content options
|
||||
//
|
||||
// Extra classes for creating well-formatted content within `.list-group-item`s.
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: $list-group-item-heading-margin-bottom;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
@if $enable-flex {
|
||||
.media {
|
||||
display: flex;
|
||||
}
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
.media-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.media-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
} @else {
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.media-body {
|
||||
width: 10000px;
|
||||
}
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.media-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.media-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images/elements as the media anchor
|
||||
//
|
||||
|
||||
.media-object {
|
||||
display: block;
|
||||
|
||||
// Fix collapse in webkit from max-width: 100% and display: table-cell.
|
||||
&.img-thumbnail {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alignment
|
||||
//
|
||||
|
||||
.media-right {
|
||||
padding-left: $media-alignment-padding-x;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
padding-right: $media-alignment-padding-x;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
.media-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: $media-heading-margin-bottom;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Media list variation
|
||||
//
|
||||
|
||||
.media-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// Toggles
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/hover";
|
||||
@import "mixins/image";
|
||||
@import "mixins/tag";
|
||||
@import "mixins/reset-filter";
|
||||
@import "mixins/resize";
|
||||
@import "mixins/screen-reader";
|
||||
@import "mixins/size";
|
||||
@import "mixins/tab-focus";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-emphasis";
|
||||
@import "mixins/text-hide";
|
||||
@import "mixins/text-truncate";
|
||||
|
||||
// // Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
@import "mixins/nav-divider";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/progress";
|
||||
@import "mixins/table-row";
|
||||
|
||||
// // Skins
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/gradients";
|
||||
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/float";
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
// .modal-open - body class for killing the scroll
|
||||
// .modal - container to scroll within
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
// Kill the scroll on the body
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
transition: transform .3s ease-out;
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
&.in .modal-dialog { transform: translate(0, 0); }
|
||||
}
|
||||
.modal-open .modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($modal-content-xs-box-shadow);
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-bg;
|
||||
background-color: $modal-backdrop-bg;
|
||||
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
&.in { opacity: $modal-backdrop-opacity; }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
padding: $modal-title-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
@include clearfix;
|
||||
}
|
||||
// Close icon
|
||||
.modal-header .close {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
padding: $modal-inner-padding;
|
||||
text-align: right; // right align buttons
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-sm-up-margin-y auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-sm-up-box-shadow);
|
||||
}
|
||||
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg { max-width: $modal-lg; }
|
||||
}
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
// Base class
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
// `<nav>`s or `<ul>`s.
|
||||
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disabled state lightens text and removes hover/tab effects
|
||||
&.disabled {
|
||||
color: $nav-disabled-link-color;
|
||||
|
||||
@include plain-hover-focus {
|
||||
color: $nav-disabled-link-hover-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $nav-disabled-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Nav inline
|
||||
|
||||
.nav-inline {
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-item + .nav-item,
|
||||
.nav-link + .nav-link {
|
||||
margin-left: $nav-item-inline-spacer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
@include clearfix();
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
// Make the list-items overlay the bottom border
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
|
||||
+ .nav-item {
|
||||
margin-left: $nav-item-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding;
|
||||
border: $nav-tabs-border-width solid transparent;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
color: $nav-disabled-link-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.open .nav-link {
|
||||
@include plain-hover-focus {
|
||||
color: $nav-tabs-active-link-hover-color;
|
||||
background-color: $nav-tabs-active-link-hover-bg;
|
||||
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: -$nav-tabs-border-width;
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
@include clearfix();
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
|
||||
+ .nav-item {
|
||||
margin-left: $nav-item-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding;
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.open .nav-link {
|
||||
@include plain-hover-focus {
|
||||
color: $nav-pills-active-link-color;
|
||||
cursor: default;
|
||||
background-color: $nav-pills-active-link-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-stacked {
|
||||
.nav-item {
|
||||
display: block;
|
||||
float: none;
|
||||
|
||||
+ .nav-item {
|
||||
margin-top: $nav-item-margin;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tabbable tabs
|
||||
//
|
||||
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
// Wrapper and base class
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
@include clearfix;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius($navbar-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar alignment options
|
||||
//
|
||||
// Display the navbar across the entirety of the page or fixed it to the top or
|
||||
// bottom of the page.
|
||||
|
||||
// A static, full width modifier with no rounded corners.
|
||||
.navbar-full {
|
||||
z-index: $zindex-navbar;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Fix the top/bottom navbars when screen real estate supports it
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-navbar-fixed;
|
||||
|
||||
// Undo the rounded corners
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $zindex-navbar-sticky;
|
||||
width: 100%;
|
||||
|
||||
// Undo the rounded corners
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Brand/project name
|
||||
//
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: $navbar-brand-padding-y;
|
||||
padding-bottom: $navbar-brand-padding-y;
|
||||
margin-right: 1rem;
|
||||
font-size: $font-size-lg;
|
||||
line-height: inherit;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-divider {
|
||||
float: left;
|
||||
width: $border-width;
|
||||
padding-top: $navbar-divider-padding-y;
|
||||
padding-bottom: $navbar-divider-padding-y;
|
||||
margin-right: $navbar-padding-x;
|
||||
margin-left: $navbar-padding-x;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
}
|
||||
|
||||
|
||||
// Navbar toggle
|
||||
//
|
||||
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
||||
// Bootstrap JavaScript plugin.
|
||||
|
||||
.navbar-toggler {
|
||||
width: 2.5em;
|
||||
height: 2em;
|
||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
line-height: 1;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: 24px 24px;
|
||||
border: $border-width solid transparent;
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-toggleable {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
|
||||
&-#{$breakpoint} {
|
||||
@include clearfix;
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: .5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
|
||||
// Navigation
|
||||
//
|
||||
// Custom navbar navigation built on the base `.nav` styles.
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
|
||||
+ .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
.navbar-brand,
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-image: $navbar-light-toggler-bg;
|
||||
border-color: $navbar-light-toggler-border;
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(0,0,0,.075);
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
.navbar-brand,
|
||||
.navbar-toggler {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-image: $navbar-dark-toggler-bg;
|
||||
border-color: $navbar-dark-toggler-border;
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(255,255,255,.075);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar toggleable
|
||||
//
|
||||
// Custom override for collapse plugin in navbar.
|
||||
|
||||
.navbar-toggleable {
|
||||
&-xs {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(xs) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(md) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Change the default font family in all browsers (opinionated).
|
||||
// 2. Correct the line height in all browsers.
|
||||
// 3. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
line-height: 1.15; // 2
|
||||
-ms-text-size-adjust: 100%; // 3
|
||||
-webkit-text-size-adjust: 100%; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the margin in all browsers (opinionated).
|
||||
//
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Add the correct display in IE 9-.
|
||||
// 1. Add the correct display in Edge, IE, and Firefox.
|
||||
// 2. Add the correct display in IE.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details, // 1
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main, // 2
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary { // 1
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in IE 9-.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in iOS 4-7.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in IE 10-.
|
||||
// 1. Add the correct display in IE.
|
||||
//
|
||||
|
||||
template, // 1
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Remove the gray background on active links in IE 10.
|
||||
// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
//
|
||||
|
||||
a {
|
||||
background-color: transparent; // 1
|
||||
-webkit-text-decoration-skip: objects; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the outline on focused links when they are also active or hovered
|
||||
// in all browsers (opinionated).
|
||||
//
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Remove the bottom border in Firefox 39-.
|
||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; // 1
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font style in Android 4.3-.
|
||||
//
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the font size and margin on `h1` elements within `section` and
|
||||
// `article` contexts in Chrome, Firefox, and Safari.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct background and color in IE 9-.
|
||||
//
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
// all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the border on images inside links in IE 10-.
|
||||
//
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Hide the overflow in IE.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
// 2. Correct the odd `em` font sizing in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace; // 1
|
||||
font-size: 1em; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct margin in IE 8.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Add the correct box sizing in Firefox.
|
||||
// 2. Show the overflow in Edge and IE.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Change font properties to `inherit` in all browsers (opinionated).
|
||||
// 2. Remove the margin in Firefox and Safari.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit; // 1
|
||||
margin: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Restore the font weight unset by the previous rule.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Show the overflow in IE.
|
||||
// 1. Show the overflow in Edge.
|
||||
//
|
||||
|
||||
button,
|
||||
input { // 1
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
// 1. Remove the inheritance of text transform in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select { // 1
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
//
|
||||
|
||||
button,
|
||||
html [type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner border and padding in Firefox.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Restore the focus styles unset by the previous rule.
|
||||
//
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
//
|
||||
// Change the border, margin, and padding in all browsers (opinionated).
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers.
|
||||
//
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; // 1
|
||||
color: inherit; // 2
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Add the correct box sizing in IE 10-.
|
||||
// 2. Remove the padding in IE 10-.
|
||||
//
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
//
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the odd appearance in Chrome and Safari.
|
||||
// 2. Correct the outline style in Safari.
|
||||
//
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
//
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
|
||||
&:first-child {
|
||||
.page-link {
|
||||
margin-left: 0;
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
@include plain-hover-focus {
|
||||
z-index: 2;
|
||||
color: $pagination-active-color;
|
||||
cursor: default;
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
@include plain-hover-focus {
|
||||
color: $pagination-disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
margin-left: -1px;
|
||||
color: $pagination-color;
|
||||
text-decoration: none;
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $pagination-hover-color;
|
||||
background-color: $pagination-hover-bg;
|
||||
border-color: $pagination-hover-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
.pagination-lg {
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-popover;
|
||||
display: block;
|
||||
max-width: $popover-max-width;
|
||||
padding: $popover-inner-padding;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
background-color: $popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: $popover-border-width solid $popover-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($popover-box-shadow);
|
||||
|
||||
|
||||
// Popover directions
|
||||
|
||||
&.popover-top,
|
||||
&.bs-tether-element-attached-bottom {
|
||||
margin-top: -$popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -$popover-arrow-outer-width;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -($popover-arrow-outer-width - 1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-right,
|
||||
&.bs-tether-element-attached-left {
|
||||
margin-left: $popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -($popover-arrow-outer-width - 1);
|
||||
margin-top: -($popover-arrow-outer-width - 1);
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-bottom,
|
||||
&.bs-tether-element-attached-top {
|
||||
margin-top: $popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -$popover-arrow-outer-width;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -($popover-arrow-outer-width - 1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-bottom-color: $popover-title-bg;
|
||||
}
|
||||
|
||||
// This will remove the popover-title's border just below the arrow
|
||||
.popover-title::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border-bottom: 1px solid $popover-title-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-left,
|
||||
&.bs-tether-element-attached-right {
|
||||
margin-left: -$popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -($popover-arrow-outer-width - 1);
|
||||
margin-top: -($popover-arrow-outer-width - 1);
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-title {
|
||||
padding: $popover-title-padding-y $popover-title-padding-x;
|
||||
margin: 0; // reset heading margin
|
||||
font-size: $font-size-base;
|
||||
background-color: $popover-title-bg;
|
||||
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
|
||||
$offset-border-width: ($border-width / $font-size-root);
|
||||
@include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: $popover-content-padding-y $popover-content-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Arrows
|
||||
//
|
||||
// .popover-arrow is outer, .popover-arrow::after is inner
|
||||
|
||||
.popover::before,
|
||||
.popover::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.popover::before {
|
||||
content: "";
|
||||
border-width: $popover-arrow-outer-width;
|
||||
}
|
||||
.popover::after {
|
||||
content: "";
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||
|
||||
// ==========================================================================
|
||||
// Print styles.
|
||||
// Inlined to avoid the additional HTTP request:
|
||||
// http://www.phpied.com/delay-loading-your-print-css/
|
||||
// ==========================================================================
|
||||
|
||||
@if $enable-print-styles {
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after,
|
||||
*::first-letter,
|
||||
p::first-line,
|
||||
div::first-line,
|
||||
blockquote::first-line,
|
||||
li::first-line {
|
||||
// Bootstrap specific; comment out `color` and `background`
|
||||
//color: #000 !important; // Black prints faster:
|
||||
// http://www.sanbeiji.com/archives/953
|
||||
text-shadow: none !important;
|
||||
//background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//a[href]::after {
|
||||
// content: " (" attr(href) ")";
|
||||
//}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//
|
||||
// Don't show links that are fragment identifiers,
|
||||
// or use the `javascript:` pseudo protocol
|
||||
//
|
||||
|
||||
//a[href^="#"]::after,
|
||||
//a[href^="javascript:"]::after {
|
||||
// content: "";
|
||||
//}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
//
|
||||
// Printing Tables:
|
||||
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
//
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// Bootstrap specific changes start
|
||||
|
||||
// Bootstrap components
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.btn,
|
||||
.dropup > .btn {
|
||||
> .caret {
|
||||
border-top-color: #000 !important;
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
border: $border-width solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.table-bordered {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap specific changes end
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
//
|
||||
// Progress animations
|
||||
//
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: $spacer-y 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Basic progress bar
|
||||
//
|
||||
|
||||
.progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $spacer-y; // todo: make a new var for this
|
||||
margin-bottom: $spacer-y;
|
||||
}
|
||||
.progress[value] {
|
||||
// Set overall background
|
||||
background-color: $progress-bg;
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
// Reset the default appearance
|
||||
appearance: none;
|
||||
// Set overall border radius
|
||||
@include border-radius($progress-border-radius);
|
||||
}
|
||||
|
||||
// Filled-in portion of the bar
|
||||
.progress[value]::-ms-fill {
|
||||
background-color: $progress-bar-color;
|
||||
// Remove right-hand border of value bar from IE10+/Edge
|
||||
border: 0;
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: $progress-bar-color;
|
||||
@include border-left-radius($progress-border-radius);
|
||||
}
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: $progress-bar-color;
|
||||
@include border-left-radius($progress-border-radius);
|
||||
}
|
||||
// Tweaks for full progress bar
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
@include border-right-radius($progress-border-radius);
|
||||
}
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
@include border-right-radius($progress-border-radius);
|
||||
}
|
||||
|
||||
// Unfilled portion of the bar
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
|
||||
.progress[value] {
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
|
||||
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress {
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: $spacer-y;
|
||||
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
|
||||
background-color: $progress-bar-color;
|
||||
@include border-left-radius($progress-border-radius);
|
||||
}
|
||||
.progress[width="100%"] {
|
||||
@include border-right-radius($progress-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Striped
|
||||
//
|
||||
|
||||
.progress-striped[value]::-webkit-progress-value {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
.progress-striped[value]::-moz-progress-bar {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
.progress-striped[value]::-ms-fill {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animated
|
||||
//
|
||||
|
||||
.progress-animated[value]::-webkit-progress-value {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-animated .progress-bar-striped {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Variations
|
||||
//
|
||||
|
||||
.progress-success {
|
||||
@include progress-variant($progress-bar-success-bg);
|
||||
}
|
||||
.progress-info {
|
||||
@include progress-variant($progress-bar-info-bg);
|
||||
}
|
||||
.progress-warning {
|
||||
@include progress-variant($progress-bar-warning-bg);
|
||||
}
|
||||
.progress-danger {
|
||||
@include progress-variant($progress-bar-danger-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
// scss-lint:disable QualifyingElement, DuplicateProperty
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
||||
// Adds additional rules on top of Normalize.css, including several overrides.
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
//
|
||||
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||
// `border: 10px solid red;` and `padding: 20px;`.
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
||||
// recommendations on resolving such conflicts, see
|
||||
// https://getbootstrap.com/getting-started/#third-box-sizing.
|
||||
//
|
||||
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Make viewport responsive
|
||||
//
|
||||
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
|
||||
// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
|
||||
// Eventually @viewport will replace <meta name="viewport">.
|
||||
//
|
||||
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
||||
// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
|
||||
// and the fix for that involves a snippet of JavaScript to sniff the user agent
|
||||
// and apply some conditional CSS.
|
||||
//
|
||||
// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
||||
//
|
||||
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
|
||||
// `.class-name { @import "bootstrap"; }`).
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
|
||||
html {
|
||||
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||
font-size: $font-size-root;
|
||||
// As a side-effect of setting the @viewport above,
|
||||
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
|
||||
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
|
||||
// thus making it hard to click on stuff near the right edge of the page.
|
||||
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
|
||||
// See https://github.com/twbs/bootstrap/issues/18543
|
||||
-ms-overflow-style: scrollbar;
|
||||
// Changes the default tap highlight to be completely transparent in iOS.
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
body {
|
||||
// Make the `body` use the `font-size-root`
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
// Go easy on the eyes and use something other than `#000` for text
|
||||
color: $body-color;
|
||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Remove top margins from headings
|
||||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $abbr-border-color;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href)
|
||||
// which have not been made explicitly keyboard-focusable (without tabindex).
|
||||
// It would be more straightforward to just use a[href] in previous block, but that
|
||||
// causes specificity issues in many other styles that are too complex to fix.
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
pre {
|
||||
// Remove browser default top margin
|
||||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `rem`s
|
||||
margin-bottom: 1rem;
|
||||
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
figure {
|
||||
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||
// We reset that to create a better flow in-page.
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images
|
||||
//
|
||||
|
||||
img {
|
||||
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||
// centers them. This won't apply should you reset them to `block` level.
|
||||
vertical-align: middle;
|
||||
// Note: `<img>`s are deliberately not made responsive by default.
|
||||
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
// No longer part of Normalize since v4
|
||||
border-collapse: collapse;
|
||||
// Reset for nesting within parents with `background-color`.
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding;
|
||||
padding-bottom: $table-cell-padding;
|
||||
color: $text-muted;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Centered by default, but left-align-ed to match the `td`s below.
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
label {
|
||||
// Allow labels to use `margin` for spacing.
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Work around a Firefox/IE bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base/
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
||||
// properly inherited. However, `line-height` isn't inherited there.
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
// Apply a disabled cursor for radios and checkboxes.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
//
|
||||
// Bug report: https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
||||
// so we reset that to ensure it behaves more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||
min-width: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
// Reset the entire legend element to match the `fieldset`
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// todo: needed?
|
||||
output {
|
||||
display: inline-block;
|
||||
// font-size: $font-size-base;
|
||||
// line-height: $line-height;
|
||||
// color: $input-color;
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
padding-bottom: percentage(9 / 21);
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
padding-bottom: percentage(9 / 16);
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
padding-bottom: percentage(3 / 4);
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
padding-bottom: percentage(1 / 1);
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
//
|
||||
// Basic Bootstrap table
|
||||
//
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding;
|
||||
vertical-align: top;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Condensed table w/ half padding
|
||||
//
|
||||
|
||||
.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding: $table-sm-cell-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bordered version
|
||||
//
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: (2 * $table-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zebra-striping
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hover effect
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table backgrounds
|
||||
//
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
|
||||
// Generate the contextual variants
|
||||
@include table-row-variant(active, $table-bg-active);
|
||||
@include table-row-variant(success, $state-success-bg);
|
||||
@include table-row-variant(info, $state-info-bg);
|
||||
@include table-row-variant(warning, $state-warning-bg);
|
||||
@include table-row-variant(danger, $state-danger-bg);
|
||||
|
||||
|
||||
// Inverse styles
|
||||
//
|
||||
// Same table markup, but inverted color scheme: dark background and light text.
|
||||
|
||||
.thead-inverse {
|
||||
th {
|
||||
color: #fff;
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-default {
|
||||
th {
|
||||
color: $gray;
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.table-inverse {
|
||||
color: $gray-lighter;
|
||||
background-color: $gray-dark;
|
||||
|
||||
th,
|
||||
td,
|
||||
thead th {
|
||||
border-color: $gray;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
|
||||
// by enabling horizontal scrolling. Only applies <768px. Everything above that
|
||||
// will display normally.
|
||||
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
||||
overflow-x: auto;
|
||||
|
||||
// TODO: find out if we need this still.
|
||||
//
|
||||
// border: $table-border-width solid $table-border-color;
|
||||
// -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
||||
}
|
||||
|
||||
|
||||
.table-reflow {
|
||||
thead {
|
||||
float: left;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-right: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
&:last-child {
|
||||
tr:last-child th,
|
||||
tr:last-child td {
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
float: left;
|
||||
|
||||
th,
|
||||
td {
|
||||
display: block !important;
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: $tag-padding-y $tag-padding-x;
|
||||
font-size: $tag-font-size;
|
||||
font-weight: $tag-font-weight;
|
||||
line-height: 1;
|
||||
color: $tag-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius();
|
||||
|
||||
// Empty tags collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for tags in buttons
|
||||
.btn .tag {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Add hover effects, but only for links
|
||||
a.tag {
|
||||
@include hover-focus {
|
||||
color: $tag-link-hover-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
||||
// Pill tags
|
||||
//
|
||||
// Make them extra rounded with a modifier to replace v3's badges.
|
||||
|
||||
.tag-pill {
|
||||
padding-right: $tag-pill-padding-x;
|
||||
padding-left: $tag-pill-padding-x;
|
||||
@include border-radius($tag-pill-border-radius);
|
||||
}
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked tags get darker on :hover).
|
||||
|
||||
.tag-default {
|
||||
@include tag-variant($tag-default-bg);
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
@include tag-variant($tag-primary-bg);
|
||||
}
|
||||
|
||||
.tag-success {
|
||||
@include tag-variant($tag-success-bg);
|
||||
}
|
||||
|
||||
.tag-info {
|
||||
@include tag-variant($tag-info-bg);
|
||||
}
|
||||
|
||||
.tag-warning {
|
||||
@include tag-variant($tag-warning-bg);
|
||||
}
|
||||
|
||||
.tag-danger {
|
||||
@include tag-variant($tag-danger-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
display: block;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.in { opacity: $tooltip-opacity; }
|
||||
|
||||
&.tooltip-top,
|
||||
&.bs-tether-element-attached-bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-right,
|
||||
&.bs-tether-element-attached-left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-bottom,
|
||||
&.bs-tether-element-attached-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-left,
|
||||
&.bs-tether-element-attached-right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
background-color: $tooltip-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h5, .h5 { font-size: $font-size-h5; }
|
||||
h6, .h6 { font-size: $font-size-h6; }
|
||||
|
||||
.lead {
|
||||
font-size: $lead-font-size;
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
||||
// Type display classes
|
||||
.display-1 {
|
||||
font-size: $display1-size;
|
||||
font-weight: $display1-weight;
|
||||
}
|
||||
.display-2 {
|
||||
font-size: $display2-size;
|
||||
font-weight: $display2-weight;
|
||||
}
|
||||
.display-3 {
|
||||
font-size: $display3-size;
|
||||
font-weight: $display3-weight;
|
||||
}
|
||||
.display-4 {
|
||||
font-size: $display4-size;
|
||||
font-weight: $display4-weight;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
border: 0;
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $small-font-size;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@include list-unstyled;
|
||||
}
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Builds on `abbr`
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
padding: ($spacer / 2) $spacer;
|
||||
margin-bottom: $spacer;
|
||||
font-size: $blockquote-font-size;
|
||||
border-left: $blockquote-border-width solid $blockquote-border-color;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
color: $blockquote-small-color;
|
||||
|
||||
&::before {
|
||||
content: "\2014 \00A0"; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
|
||||
// Opposite alignment of blockquote
|
||||
.blockquote-reverse {
|
||||
padding-right: $spacer;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
border-right: $blockquote-border-width solid $blockquote-border-color;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.blockquote-reverse .blockquote-footer {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
content: "\00A0 \2014"; // nbsp, em dash
|
||||
}
|
||||
}
|
||||
|
||||
@if not $enable-flex {
|
||||
// Clean up some horizontal `<dl>`s built with grids
|
||||
// scss-lint:disable QualifyingElement
|
||||
dl.row {
|
||||
> dd + dt {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "utilities/align";
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/clearfix";
|
||||
@import "utilities/display";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/float";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/text";
|
||||
@import "utilities/visibility";
|
||||
|
|
@ -0,0 +1,857 @@
|
|||
// Variables
|
||||
//
|
||||
// Copy settings from this file into the provided `_custom.scss` to override
|
||||
// the Bootstrap defaults without modifying key, versioned files.
|
||||
|
||||
|
||||
// Table of Contents
|
||||
//
|
||||
// Colors
|
||||
// Options
|
||||
// Spacing
|
||||
// Body
|
||||
// Links
|
||||
// Grid breakpoints
|
||||
// Grid containers
|
||||
// Grid columns
|
||||
// Fonts
|
||||
// Components
|
||||
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// General variable structure
|
||||
//
|
||||
// Variable format should follow the `$component-modifier-state-property` order.
|
||||
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Grayscale and brand colors for use across Bootstrap.
|
||||
|
||||
$gray-dark: #373a3c !default;
|
||||
$gray: #55595c !default;
|
||||
$gray-light: #818a91 !default;
|
||||
$gray-lighter: #eceeef !default;
|
||||
$gray-lightest: #f7f7f9 !default;
|
||||
|
||||
$brand-primary: #0275d8 !default;
|
||||
$brand-success: #5cb85c !default;
|
||||
$brand-info: #5bc0de !default;
|
||||
$brand-warning: #f0ad4e !default;
|
||||
$brand-danger: #d9534f !default;
|
||||
$brand-inverse: $gray-dark !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-flex: false !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: false !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
$spacers: (
|
||||
0: (
|
||||
x: 0,
|
||||
y: 0
|
||||
),
|
||||
1: (
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
),
|
||||
2: (
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
),
|
||||
3: (
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
)
|
||||
) !default;
|
||||
$border-width: 1px !default;
|
||||
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #fff !default;
|
||||
$body-color: $gray-dark !default;
|
||||
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: $brand-primary !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width-base: 30px !default;
|
||||
$grid-gutter-widths: (
|
||||
xs: $grid-gutter-width-base,
|
||||
sm: $grid-gutter-width-base,
|
||||
md: $grid-gutter-width-base,
|
||||
lg: $grid-gutter-width-base,
|
||||
xl: $grid-gutter-width-base
|
||||
) !default;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
|
||||
$font-size-root: 16px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
$font-size-xs: .75rem !default;
|
||||
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.75rem !default;
|
||||
$font-size-h4: 1.5rem !default;
|
||||
$font-size-h5: 1.25rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
$display2-size: 5.5rem !default;
|
||||
$display3-size: 4.5rem !default;
|
||||
$display4-size: 3.5rem !default;
|
||||
|
||||
$display1-weight: 300 !default;
|
||||
$display2-weight: 300 !default;
|
||||
$display3-weight: 300 !default;
|
||||
$display4-weight: 300 !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
$lead-font-size: 1.25rem !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
||||
$text-muted: $gray-light !default;
|
||||
|
||||
$abbr-border-color: $gray-light !default;
|
||||
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
$blockquote-border-width: .25rem !default;
|
||||
|
||||
$hr-border-color: rgba(0,0,0,.1) !default;
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
|
||||
$dt-font-weight: bold !default;
|
||||
|
||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
|
||||
$nested-kbd-font-weight: bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: (4 / 3) !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: #fff !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
$caret-width-lg: $caret-width !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-bg-accent: rgba(0,0,0,.05) !default;
|
||||
$table-bg-hover: rgba(0,0,0,.075) !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
$table-border-color: $gray-lighter !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-padding-y: .5rem !default;
|
||||
$btn-line-height: 1.25 !default;
|
||||
$btn-font-weight: normal !default;
|
||||
$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: $btn-primary-bg !default;
|
||||
|
||||
$btn-secondary-color: $gray-dark !default;
|
||||
$btn-secondary-bg: #fff !default;
|
||||
$btn-secondary-border: #ccc !default;
|
||||
|
||||
$btn-info-color: #fff !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: $btn-info-bg !default;
|
||||
|
||||
$btn-success-color: #fff !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: $btn-success-bg !default;
|
||||
|
||||
$btn-warning-color: #fff !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: $btn-warning-bg !default;
|
||||
|
||||
$btn-danger-color: #fff !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: $btn-danger-bg !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
$btn-padding-x-sm: .5rem !default;
|
||||
$btn-padding-y-sm: .25rem !default;
|
||||
|
||||
$btn-padding-x-lg: 1.5rem !default;
|
||||
$btn-padding-y-lg: .75rem !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
$btn-toolbar-margin: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-lg: $border-radius-lg !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-x: .75rem !default;
|
||||
$input-padding-y: .5rem !default;
|
||||
$input-line-height: 1.25 !default;
|
||||
|
||||
$input-bg: #fff !default;
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
$input-color: $gray !default;
|
||||
$input-border-color: rgba(0,0,0,.15) !default;
|
||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
|
||||
|
||||
$input-border-radius: $border-radius !default;
|
||||
$input-border-radius-lg: $border-radius-lg !default;
|
||||
$input-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$input-bg-focus: $input-bg !default;
|
||||
$input-border-focus: #66afe9 !default;
|
||||
$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default;
|
||||
$input-color-focus: $input-color !default;
|
||||
|
||||
$input-color-placeholder: #999 !default;
|
||||
|
||||
$input-padding-x-sm: .5rem !default;
|
||||
$input-padding-y-sm: .25rem !default;
|
||||
|
||||
$input-padding-x-lg: 1.5rem !default;
|
||||
$input-padding-y-lg: .75rem !default;
|
||||
|
||||
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
|
||||
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
|
||||
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
|
||||
|
||||
$form-group-margin-bottom: $spacer-y !default;
|
||||
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$cursor-disabled: not-allowed !default;
|
||||
|
||||
$custom-control-gutter: 1.5rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
$custom-control-spacer-y: .25rem !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-bg: #ddd !default;
|
||||
$custom-control-indicator-bg-size: 50% 50% !default;
|
||||
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;
|
||||
|
||||
$custom-control-disabled-cursor: $cursor-disabled !default;
|
||||
$custom-control-disabled-indicator-bg: #eee !default;
|
||||
$custom-control-disabled-description-color: #767676 !default;
|
||||
|
||||
$custom-control-checked-indicator-color: #fff !default;
|
||||
$custom-control-checked-indicator-bg: #0074d9 !default;
|
||||
$custom-control-checked-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
|
||||
|
||||
$custom-control-active-indicator-color: #fff !default;
|
||||
$custom-control-active-indicator-bg: #84c6ff !default;
|
||||
$custom-control-active-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-radius: $border-radius !default;
|
||||
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$custom-checkbox-indeterminate-bg: #0074d9 !default;
|
||||
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
|
||||
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
|
||||
$custom-checkbox-indeterminate-box-shadow: none !default;
|
||||
|
||||
$custom-radio-radius: 50% !default;
|
||||
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-disabled-color: $gray-light !default;
|
||||
$custom-select-bg: #fff !default;
|
||||
$custom-select-disabled-bg: $gray-lighter !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator-color: #333 !default;
|
||||
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: #51a7e8 !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
|
||||
|
||||
$custom-select-sm-padding-y: .2rem !default;
|
||||
$custom-select-sm-font-size: 75% !default;
|
||||
|
||||
$custom-file-height: 2.5rem !default;
|
||||
$custom-file-width: 14rem !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
|
||||
|
||||
$custom-file-padding-x: .5rem !default;
|
||||
$custom-file-padding-y: 1rem !default;
|
||||
$custom-file-line-height: 1.5 !default;
|
||||
$custom-file-color: #555 !default;
|
||||
$custom-file-bg: #fff !default;
|
||||
$custom-file-border-width: $border-width !default;
|
||||
$custom-file-border-color: #ddd !default;
|
||||
$custom-file-border-radius: $border-radius !default;
|
||||
$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: #eee !default;
|
||||
$custom-file-text: (
|
||||
placeholder: (
|
||||
en: "Choose file..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse"
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// Form validation icons
|
||||
$form-icon-success-color: $brand-success !default;
|
||||
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$form-icon-warning-color: $brand-warning !default;
|
||||
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$form-icon-danger-color: $brand-danger !default;
|
||||
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-margin-top: .125rem !default;
|
||||
$dropdown-bg: #fff !default;
|
||||
$dropdown-border-color: rgba(0,0,0,.15) !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default;
|
||||
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
$dropdown-link-hover-bg: #f5f5f5 !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
|
||||
// Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
|
||||
$zindex-dropdown-backdrop: 990 !default;
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
$zindex-navbar-fixed: 1030 !default;
|
||||
$zindex-navbar-sticky: 1030 !default;
|
||||
$zindex-modal-bg: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-border-radius: $border-radius !default;
|
||||
$navbar-padding-x: $spacer !default;
|
||||
$navbar-padding-y: ($spacer / 2) !default;
|
||||
|
||||
$navbar-brand-padding-y: .25rem !default;
|
||||
|
||||
$navbar-divider-padding-y: .425rem !default;
|
||||
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-padding-y: .5rem !default;
|
||||
$navbar-toggler-font-size: $font-size-lg !default;
|
||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-padding-y: .5rem !default;
|
||||
|
||||
$navbar-dark-color: rgba(255,255,255,.5) !default;
|
||||
$navbar-dark-hover-color: rgba(255,255,255,.75) !default;
|
||||
$navbar-dark-active-color: rgba(255,255,255,1) !default;
|
||||
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
|
||||
$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
|
||||
$navbar-dark-toggler-border: rgba(255,255,255,.1) !default;
|
||||
|
||||
$navbar-light-color: rgba(0,0,0,.5) !default;
|
||||
$navbar-light-hover-color: rgba(0,0,0,.7) !default;
|
||||
$navbar-light-active-color: rgba(0,0,0,.9) !default;
|
||||
$navbar-light-disabled-color: rgba(0,0,0,.3) !default;
|
||||
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
|
||||
$navbar-light-toggler-border: rgba(0,0,0,.1) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-item-margin: .2rem !default;
|
||||
$nav-item-inline-spacer: 1rem !default;
|
||||
$nav-link-padding: .5em 1em !default;
|
||||
$nav-link-hover-bg: $gray-lighter !default;
|
||||
$nav-disabled-link-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-bg: transparent !default;
|
||||
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
$nav-tabs-justified-link-border-color: #ddd !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-active-link-color: $component-active-color !default;
|
||||
$nav-pills-active-link-bg: $component-active-bg !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y: .5rem !default;
|
||||
$pagination-padding-x-sm: .75rem !default;
|
||||
$pagination-padding-y-sm: .275rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: #fff !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-lighter !default;
|
||||
$pagination-hover-border: #ddd !default;
|
||||
|
||||
$pagination-active-color: #fff !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border: $brand-primary !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: #fff !default;
|
||||
$pagination-disabled-border: #ddd !default;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-padding: 2rem !default;
|
||||
$jumbotron-bg: $gray-lighter !default;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
//
|
||||
// Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #3c763d !default;
|
||||
$state-success-bg: #dff0d8 !default;
|
||||
$state-success-border: darken($state-success-bg, 5%) !default;
|
||||
|
||||
$state-info-text: #31708f !default;
|
||||
$state-info-bg: #d9edf7 !default;
|
||||
$state-info-border: darken($state-info-bg, 7%) !default;
|
||||
|
||||
$state-warning-text: #8a6d3b !default;
|
||||
$state-warning-bg: #fcf8e3 !default;
|
||||
$mark-bg: $state-warning-bg !default;
|
||||
$state-warning-border: darken($state-warning-bg, 5%) !default;
|
||||
|
||||
$state-danger-text: #a94442 !default;
|
||||
$state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||
|
||||
|
||||
// Cards
|
||||
$card-spacer-x: 1.25rem !default;
|
||||
$card-spacer-y: .75rem !default;
|
||||
$card-border-width: 1px !default;
|
||||
$card-border-radius: $border-radius !default;
|
||||
$card-border-color: rgba(0,0,0,.125) !default;
|
||||
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||
$card-cap-bg: #f5f5f5 !default;
|
||||
$card-bg: #fff !default;
|
||||
|
||||
$card-link-hover-color: #fff !default;
|
||||
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
$card-deck-margin: .625rem !default;
|
||||
|
||||
$card-columns-sm-up-column-gap: 1.25rem !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: #fff !default;
|
||||
$tooltip-bg: #000 !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: 3px !default;
|
||||
$tooltip-padding-x: 8px !default;
|
||||
$tooltip-margin: 3px !default;
|
||||
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-inner-padding: 1px !default;
|
||||
$popover-bg: #fff !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba(0,0,0,.2) !default;
|
||||
$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default;
|
||||
|
||||
$popover-title-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-title-padding-x: 14px !default;
|
||||
$popover-title-padding-y: 8px !default;
|
||||
|
||||
$popover-content-padding-x: 14px !default;
|
||||
$popover-content-padding-y: 9px !default;
|
||||
|
||||
$popover-arrow-width: 10px !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Tags
|
||||
|
||||
$tag-default-bg: $gray-light !default;
|
||||
$tag-primary-bg: $brand-primary !default;
|
||||
$tag-success-bg: $brand-success !default;
|
||||
$tag-info-bg: $brand-info !default;
|
||||
$tag-warning-bg: $brand-warning !default;
|
||||
$tag-danger-bg: $brand-danger !default;
|
||||
|
||||
$tag-color: #fff !default;
|
||||
$tag-link-hover-color: #fff !default;
|
||||
$tag-font-size: 75% !default;
|
||||
$tag-font-weight: bold !default;
|
||||
$tag-padding-x: .4em !default;
|
||||
$tag-padding-y: .25em !default;
|
||||
|
||||
$tag-pill-padding-x: .6em !default;
|
||||
// Use a higher than normal value to ensure completely rounded edges when
|
||||
// customizing padding or font-size on labels.
|
||||
$tag-pill-border-radius: 10rem !default;
|
||||
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
|
||||
$modal-dialog-margin: 10px !default;
|
||||
$modal-dialog-sm-up-margin-y: 30px !default;
|
||||
|
||||
$modal-title-padding: 15px !default;
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: #fff !default;
|
||||
$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
$modal-content-border-width: $border-width !default;
|
||||
$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default;
|
||||
$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
|
||||
|
||||
$modal-backdrop-bg: #000 !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
$modal-header-border-color: #e5e5e5 !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
|
||||
$modal-lg: 900px !default;
|
||||
$modal-md: 600px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-border-radius: $border-radius !default;
|
||||
$alert-link-font-weight: bold !default;
|
||||
$alert-border-width: $border-width !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: #eee !default;
|
||||
$progress-bar-color: #0074d9 !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
|
||||
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: #fff !default;
|
||||
$list-group-border-color: #ddd !default;
|
||||
$list-group-border-width: $border-width !default;
|
||||
$list-group-border-radius: $border-radius !default;
|
||||
|
||||
$list-group-hover-bg: #f5f5f5 !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
|
||||
|
||||
$list-group-disabled-color: $gray-light !default;
|
||||
$list-group-disabled-bg: $gray-lighter !default;
|
||||
$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||
|
||||
$list-group-link-color: #555 !default;
|
||||
$list-group-link-hover-color: $list-group-link-color !default;
|
||||
$list-group-link-heading-color: #333 !default;
|
||||
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
$list-group-item-heading-margin-bottom: 5px !default;
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
$thumbnail-border-width: $border-width !default;
|
||||
$thumbnail-border-color: #ddd !default;
|
||||
$thumbnail-border-radius: $border-radius !default;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
$figure-caption-font-size: 90% !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .75rem !default;
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
$breadcrumb-item-padding: .5rem !default;
|
||||
|
||||
$breadcrumb-bg: $gray-lighter !default;
|
||||
$breadcrumb-divider-color: $gray-light !default;
|
||||
$breadcrumb-active-color: $gray-light !default;
|
||||
$breadcrumb-divider: "/" !default;
|
||||
|
||||
|
||||
// Media objects
|
||||
|
||||
$media-margin-top: 15px !default;
|
||||
$media-heading-margin-bottom: 5px !default;
|
||||
$media-alignment-padding-x: 10px !default;
|
||||
|
||||
|
||||
// Carousel
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-sm-up-size: 30px !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicators-width: 60% !default;
|
||||
|
||||
$carousel-indicator-size: 10px !default;
|
||||
$carousel-indicator-active-size: 12px !default;
|
||||
$carousel-indicator-active-bg: #fff !default;
|
||||
$carousel-indicator-border-color: #fff !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-sm-up-width: 60% !default;
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
$carousel-icon-width: 20px !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-weight: bold !default;
|
||||
$close-color: #000 !default;
|
||||
$close-text-shadow: 0 1px 0 #fff !default;
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
$code-font-size: 90% !default;
|
||||
$code-padding-x: .4rem !default;
|
||||
$code-padding-y: .2rem !default;
|
||||
$code-color: #bd4147 !default;
|
||||
$code-bg: #f7f7f9 !default;
|
||||
|
||||
$kbd-color: #fff !default;
|
||||
$kbd-bg: #333 !default;
|
||||
|
||||
$pre-bg: #f7f7f9 !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Bootstrap with Flexbox enabled
|
||||
//
|
||||
// Includes all the imports from the standard Bootstrap project, but enables
|
||||
// the flexbox variable.
|
||||
|
||||
$enable-flex: true;
|
||||
|
||||
@import "bootstrap";
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// Bootstrap Grid only
|
||||
//
|
||||
// Includes relevant variables and mixins for the regular (non-flexbox) grid
|
||||
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).
|
||||
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
@import "custom";
|
||||
@import "variables";
|
||||
|
||||
//
|
||||
// Grid mixins
|
||||
//
|
||||
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
|
||||
@import "grid";
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Bootstrap Reboot only
|
||||
//
|
||||
// Includes only Normalize and our custom Reboot reset.
|
||||
|
||||
@import "custom";
|
||||
@import "variables";
|
||||
@import "mixins/hover";
|
||||
@import "mixins/tab-focus";
|
||||
|
||||
@import "normalize";
|
||||
@import "reboot";
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/*!
|
||||
* Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
|
||||
* Copyright 2011-2016 The Bootstrap Authors
|
||||
* Copyright 2011-2016 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
@import "custom";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Reset and dependencies
|
||||
@import "normalize";
|
||||
@import "print";
|
||||
|
||||
// Core CSS
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "code";
|
||||
@import "grid";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
|
||||
// Components
|
||||
@import "animation";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@import "input-group";
|
||||
@import "custom-forms";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "tags";
|
||||
@import "jumbotron";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
@import "media";
|
||||
@import "list-group";
|
||||
@import "responsive-embed";
|
||||
@import "close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "modal";
|
||||
@import "tooltip";
|
||||
@import "popover";
|
||||
@import "carousel";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Alerts
|
||||
|
||||
@mixin alert-variant($background, $border, $body-color) {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
color: $body-color;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
.alert-link {
|
||||
color: darken($body-color, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// Contextual backgrounds
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
// Single side border-radius
|
||||
|
||||
@mixin border-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 544px, md: 768px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// 544px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
@include media-breakpoint-up($name, $breakpoints) {
|
||||
@include media-breakpoint-down($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
@include media-breakpoint-up($lower, $breakpoints) {
|
||||
@include media-breakpoint-down($upper, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
$active-background: darken($background, 10%);
|
||||
$active-border: darken($border, 12%);
|
||||
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
// Remove the gradient for the pressed/active state
|
||||
background-image: none;
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 17%);
|
||||
border-color: darken($border, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
@include hover {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color) {
|
||||
color: $color;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: #fff;
|
||||
background-color: darken($color, 17%);
|
||||
border-color: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: lighten($color, 20%);
|
||||
}
|
||||
@include hover {
|
||||
border-color: lighten($color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// Card variants
|
||||
|
||||
@mixin card-variant($background, $border) {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-outline-variant($color) {
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
//
|
||||
// Inverse text within a card for use with dark backgrounds
|
||||
//
|
||||
|
||||
@mixin card-inverse {
|
||||
.card-header,
|
||||
.card-footer {
|
||||
border-color: rgba(255,255,255,.2);
|
||||
}
|
||||
.card-header,
|
||||
.card-footer,
|
||||
.card-title,
|
||||
.card-blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
.card-link,
|
||||
.card-text,
|
||||
.card-subtitle,
|
||||
.card-blockquote .blockquote-footer {
|
||||
color: rgba(255,255,255,.65);
|
||||
}
|
||||
.card-link {
|
||||
@include hover-focus {
|
||||
color: $card-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@mixin clearfix() {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@mixin float-left {
|
||||
float: left !important;
|
||||
}
|
||||
@mixin float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
// Form validation states
|
||||
//
|
||||
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.form-control-feedback,
|
||||
.form-control-label,
|
||||
.form-check-label,
|
||||
.form-check-inline,
|
||||
.custom-control {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
|
||||
@if $enable-rounded {
|
||||
&:focus {
|
||||
box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: lighten($color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
// which defaults to the `@input-border-focus` variable.
|
||||
//
|
||||
// We highly encourage you to not customize the default value, but instead use
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
||||
// usability and accessibility should be taken into account with any change.
|
||||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
color: $input-color-focus;
|
||||
background-color: $input-bg-focus;
|
||||
border-color: $input-border-focus;
|
||||
outline: none;
|
||||
@include box-shadow($input-box-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
|
||||
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
#{$parent} {
|
||||
height: $input-height;
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
select[multiple]#{$parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Gradients
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9.
|
||||
@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9.
|
||||
@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
|
||||
}
|
||||
|
||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient($deg, $start-color, $end-color);
|
||||
}
|
||||
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
|
||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
|
||||
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include make-gutters($gutters);
|
||||
}
|
||||
|
||||
$breakpoint-counter: 0;
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$breakpoint-counter: ($breakpoint-counter + 1);
|
||||
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
.col-#{$breakpoint} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||
@if $enable-flex {
|
||||
.col-#{$breakpoint} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
@each $modifier in (pull, push) {
|
||||
@for $i from 0 through $columns {
|
||||
.#{$modifier}-#{$breakpoint}-#{$i} {
|
||||
@include make-col-modifier($modifier, $i, $columns)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
||||
@for $i from 0 through ($columns - 1) {
|
||||
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
|
||||
.offset-#{$breakpoint}-#{$i} {
|
||||
@include make-col-modifier(offset, $i, $columns)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container($gutter: $grid-gutter-width-base) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
@if not $enable-flex {
|
||||
@include clearfix();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For each breakpoint, define the maximum width of the container in a media query
|
||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $container-max-width in $max-widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
width: $container-max-width;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-gutters($gutters: $grid-gutter-widths) {
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-row($gutters: $grid-gutter-widths) {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
} @else {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
margin-right: ($gutter / -2);
|
||||
margin-left: ($gutter / -2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col-ready($gutters: $grid-gutter-widths) {
|
||||
position: relative;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// later on to override this initial width.
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
@if $enable-flex {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
} @else {
|
||||
float: left;
|
||||
width: percentage($size / $columns);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
margin-left: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-push($size, $columns: $grid-columns) {
|
||||
left: if($size > 0, percentage($size / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin make-col-pull($size, $columns: $grid-columns) {
|
||||
right: if($size > 0, percentage($size / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin make-col-modifier($type, $size, $columns) {
|
||||
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
|
||||
@if $type == push {
|
||||
@include make-col-push($size, $columns);
|
||||
} @else if $type == pull {
|
||||
@include make-col-pull($size, $columns);
|
||||
} @else if $type == offset {
|
||||
@include make-col-offset($size, $columns);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
@mixin hover {
|
||||
// TODO: re-enable along with mq4-hover-shim
|
||||
// @if $enable-hover-media-query {
|
||||
// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
|
||||
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
|
||||
// @media (hover: hover) {
|
||||
// &:hover { @content }
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
&:hover { @content }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus { @content }
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin plain-hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&,
|
||||
&:focus {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus-active {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus,
|
||||
&:active {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// Image Mixins
|
||||
// - Responsive image
|
||||
// - Retina image
|
||||
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
@mixin img-fluid {
|
||||
// Part 1: Set a maximum relative to the parent
|
||||
max-width: 100%;
|
||||
// Part 2: Override the height to auto, otherwise images will be stretched
|
||||
// when setting a width and height attribute on the img element.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// Retina image
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size.
|
||||
|
||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||
background-image: url($file-1x);
|
||||
|
||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||
// but doesn't convert dppx=>dpi.
|
||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
|
||||
@media
|
||||
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||
only screen and (min-resolution: 2dppx) { // Standardized
|
||||
background-image: url($file-2x);
|
||||
background-size: $width-1x $height-1x;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// List Groups
|
||||
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
a.list-group-item-#{$state},
|
||||
button.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// Lists
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
@mixin list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// Horizontal dividers
|
||||
//
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
|
||||
@mixin nav-divider($color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: ($spacer-y / 2) 0;
|
||||
overflow: hidden;
|
||||
background-color: $color;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// Navbar vertical align
|
||||
//
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
|
||||
// @mixin navbar-vertical-align($element-height) {
|
||||
// margin-top: (($navbar-height - $element-height) / 2);
|
||||
// margin-bottom: (($navbar-height - $element-height) / 2);
|
||||
// }
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
.page-link {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// Progress bars
|
||||
|
||||
@mixin progress-variant($color) {
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&[value]::-moz-progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// IE10+, Microsoft Edge
|
||||
&[value]::-ms-fill {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Reset filters for IE
|
||||
//
|
||||
// When you need to remove a gradient background, do not forget to use this to reset
|
||||
// the IE filter for IE9.
|
||||
|
||||
@mixin reset-filter() {
|
||||
filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@mixin reset-text {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-break: auto;
|
||||
line-height: $line-height-base;
|
||||
text-align: left; // Fallback for where `start` is not supported
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// Resize anything
|
||||
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
//
|
||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
@mixin sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// Sizing shortcuts
|
||||
|
||||
@mixin size($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// WebKit-style focus
|
||||
|
||||
@mixin tab-focus() {
|
||||
// WebKit-specific. Other browsers will keep their default outline style.
|
||||
// (Initially tried to also force default via `outline: initial`,
|
||||
// but that seems to erroneously remove the outline in Firefox altogether.)
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Tables
|
||||
|
||||
@mixin table-row-variant($state, $background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table-#{$state} {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover {
|
||||
$hover-background: darken($background, 5%);
|
||||
|
||||
.table-#{$state} {
|
||||
@include hover {
|
||||
background-color: $hover-background;
|
||||
|
||||
> td,
|
||||
> th {
|
||||
background-color: $hover-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Tags
|
||||
|
||||
@mixin tag-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// Typography
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// CSS image replacement
|
||||
@mixin text-hide() {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Text truncate
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
@mixin text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue