Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • oss/utilities/documentation-manager
1 result
Select Git revision
Show changes
Showing
with 0 additions and 3681 deletions
/* =================================== */
/* 6. Footer
/* =================================== */
#footer {
background: #fff;
color: #252b33;
margin-left:260px;
padding: 66px 0px;
padding: 4.125rem 0;
.nav {
.nav-item {
display: inline-block;
line-height: 12px;
margin: 0;
.nav-link {
color: #252b33;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
&:focus {
color: $primary-color;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
&:first-child .nav-link {
padding-left: 0px;
}
&:last-child .nav-link{
padding-right: 0px;
}
}
.nav-link:hover {
color: $primary-color;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
.footer-copyright {
border-top: 1px solid #e2e8ea;
padding: 0px 0px;
color: #67727c;
.nav {
.nav-item .nav-link {
color: #67727c;
}
.nav-link:hover {
color: $primary-color;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
}
.nav.flex-column .nav-item {
padding: 0px;
.nav-link {
margin: 0.7rem 0px;
}
}
&.footer-text-light {
color: rgba(250, 250, 250, 0.8);
.nav .nav-item .nav-link {
color: rgba(250, 250, 250, 0.8);
&:hover {
color: rgba(250, 250, 250, 1);
}
}
.footer-copyright {
border-color: rgba(250, 250, 250, 0.15);
color: rgba(250, 250, 250, 0.5);
}
&:not(.bg-primary) .social-icons-light.social-icons li a {
color: rgba(250, 250, 250, 0.8);
&:hover {
color: rgba(250, 250, 250, 1);
}
}
&.bg-primary {
color: #fff;
.nav .nav-item .nav-link {
color: #fff;
&:hover {
color: rgba(250, 250, 250, 0.7);
}
}
.footer-copyright {
border-color: rgba(250, 250, 250, 0.15);
color: rgba(250, 250, 250, 0.9);
}
:not(.social-icons) a {
color: #fff;
&:hover {
color: rgba(250, 250, 250, 0.7);
}
}
}
}
}
@include media-breakpoint-down(sm) {
#footer {
margin-left:0px;
}
}
/*=== 6.1 Social Icons ===*/
.social-icons {
margin: 0;
padding: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
li {
margin: 0px 6px;
padding: 0;
overflow: visible;
a {
display: block;
height: 26px;
line-height: 26px;
width: 26px;
font-size: 18px;
text-align: center;
color: #4d555a;
text-decoration: none;
@include transition(all 0.2s ease);
}
i {
line-height: inherit;
}
}
&.social-icons-sm li{
margin: 0px 4px;
}
&.social-icons-sm li a {
font-size: 15px;
width:22px;
}
&.social-icons-lg li a {
width: 34px;
height: 34px;
line-height:34px;
font-size: 22px;
}
&.social-icons-light li a {
color: #eee;
}
&.social-icons-muted li a {
color: #aab1b8;
}
li:hover {
a {
color: #999;
}
}
}
/*=== 6.2 Back to Top ===*/
#back-to-top {
display: none;
position: fixed;
z-index: 1030;
bottom: 8px;
right: 10px;
background-color: rgba(0, 0, 0, 0.22);
text-align: center;
color: #fff;
font-size: 14px;
width: 36px;
height: 36px;
line-height: 34px;
border-radius:3px;
@include transition(all 0.3s ease-in-out);
@include box-shadow(0px 5px 15px rgba(0, 0, 0, 0.15));
&:hover {
background-color: $primary-color;
@include box-shadow(0px 5px 15px rgba(0, 0, 0, 0.25));
@include transition(all 0.3s ease-in-out);
}
}
@include media-breakpoint-down(xs) {
#back-to-top {z-index: 1029;}
}
\ No newline at end of file
/* =================================== */
/* 4. Header
/* =================================== */
#header {
@include transition(all .5s ease);
.navbar {
padding: 0px;
min-height:70px;
}
.logo {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: stretch;
align-self: stretch;
}
}
/*=== 4.1 Main Navigation ===*/
.navbar-light .navbar-nav {
.active > .nav-link {
color: #0c2f55;
}
.nav-link {
&.active, &.show {
color: #0c2f55;
}
}
.show > .nav-link {
color: #0c2f55;
}
}
.primary-menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
height: auto !important;
-webkit-box-ordinal-group: 0;
-ms-flex-item-align: stretch;
align-self: stretch;
background: #fff;
border-bottom:1px solid #efefef;
&.bg-transparent {
position: absolute;
z-index: 999;
top: 0;
left: 0;
width: 100%;
box-shadow: none;
border-bottom: 1px solid rgba(250, 250, 250, 0.3);
}
&.sticky-on{
position: fixed;
top: 0;
width: 100%;
z-index: 1020;
left: 0;
@include box-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));
-webkit-animation: slide-down 0.7s;
-moz-animation: slide-down 0.7s;
animation: slide-down 0.7s;
@-webkit-keyframes slide-down { 0% { opacity:0; transform:translateY(-100%);}100% { opacity:1; transform:translateY(0);}}
@-moz-keyframes slide-down { 0% { opacity:0; transform:translateY(-100%);}100% { opacity:1; transform:translateY(0);}}
@keyframes slide-down { 0% { opacity:0; transform:translateY(-100%);}100% { opacity:1; transform:translateY(0);}}
.none-on-sticky{
display:none!important;
}
}
ul.navbar-nav > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
+ li {
margin-left: 2px;
}
a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
> a:not(.btn) {
height: 70px;
padding:0px 0.85em;
color: #252b33;
@include transition(all .2s ease);
position: relative;
position:relative;
}
&:hover > a:not(.btn), & > a.active:not(.btn) {
color: $primary-color;
text-decoration:none;
@include transition(all .2s ease);
}
a.btn{padding: 0.4rem 1.4rem;}
&.dropdown {
.dropdown-menu li {
> a:not(.btn) {
padding: 8px 0px;
background-color: transparent;
text-transform: none;
color: #777;
@include transition(all .2s ease);
}
&:hover > a:not(.btn) {
color: $primary-color;
@include transition(all .2s ease);
}
}
&:hover > a:after {
clear: both;
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
position: absolute;
border-width: 0px 7px 6px 7px;
bottom: 0px;
left: 50%;
margin: 0 0 0 -5px;
z-index: 1022;
}
.dropdown-menu {
@include box-shadow(0px 0px 12px rgba(0, 0, 0, 0.176));
border: 0px none;
padding: 10px 15px;
min-width: 220px;
margin: 0;
font-size: 14px;
font-size: 0.875rem;
z-index:1021;
}
> .dropdown-toggle .arrow {
display: none;
}
}
}
.dropdown-menu-right {
left: auto !important;
right: 100% !important;
}
ul.navbar-nav > li {
&.dropdown-mega {
position: static;
> .dropdown-menu {
width: 100%;
padding: 20px 20px;
margin-left: 0px !important;
}
.dropdown-mega-content > .row > div {
padding: 5px 5px 5px 20px;
border-right: 1px solid #eee;
&:last-child {
border-right: 0;
}
}
.sub-title {
display: block;
font-size: 16px;
margin-top: 1rem;
padding-bottom: 5px;
}
.dropdown-mega-submenu {
list-style-type: none;
padding-left: 0px;
}
}
a.btn{font-size:14px; padding: 0.65rem 2rem; text-transform:uppercase;}
&.dropdown {
.dropdown-menu {
.dropdown-menu {
left: 100%;
margin-top: -40px;
}
.dropdown-toggle:after {
border-top: .4em solid transparent;
border-right: 0;
border-bottom: 0.4em solid transparent;
border-left: 0.4em solid;
}
}
.dropdown-toggle .arrow {
position: absolute;
min-width: 30px;
height: 100%;
right: 0px;
top: 0;
@include transition(all .2s ease);
&:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
border-color: #000;
border-top: 1px solid;
border-right: 1px solid;
width: 6px;
height: 6px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
}
}
}
.dropdown-toggle:after {
content: none;
}
&.navbar-line-under-text ul.navbar-nav > li {
> a:not(.btn):after {
position: absolute;
content: "";
height: 2px;
width: 0;
left: 50%;
right: 0;
bottom: 14px;
background-color: transparent;
color:#fff;
border-bottom: 2px solid $primary-color;
@include transition(all .3s ease-in-out);
transform: translate(-50%,0) translateZ(0);
-webkit-transform: translate(-50%,0) translateZ(0);
}
& > a:hover:not(.logo):after, & > a.active:after{
width:calc(100% - 0.99em);
}
}
}
/*== Color Options ==*/
.primary-menu.navbar-text-light .navbar-toggler span {background:#fff;}
.primary-menu.navbar-text-light .navbar-nav > li{
> a:not(.btn) {
color: #fff;
}
&:hover > a:not(.btn), & > a.active:not(.btn) {
color: rgba(250, 250, 250, 0.75);
}
}
.primary-menu.navbar-text-light.navbar-line-under-text .navbar-nav > li{
& > a:not(.logo):after, & > a.active:after{
border-color:rgba(250, 250, 250, 0.60);
}
}
.primary-menu {
&.navbar-dropdown-dark ul.navbar-nav > li {
&.dropdown {
.dropdown-menu {
background-color: #252A2C;
color: #fff;
.dropdown-menu {
background-color: #272c2e;
}
}
&:hover > a:after {
border-color: transparent transparent #252A2C transparent;
}
.dropdown-menu li {
> a:not(.btn) {
color: rgba(250, 250, 250, 0.8);
}
&:hover > a:not(.btn) {
color: rgba(250, 250, 250, 1);
font-weight:600;
}
}
}
&.dropdown-mega .dropdown-mega-content > .row > div {
border-color: #3a3a3a;
}
}
&.navbar-dropdown-primary ul.navbar-nav > li {
&.dropdown {
.dropdown-menu {
background-color: $primary-color;
color: #fff;
.dropdown-menu {
background-color: $primary-color;
}
}
&:hover > a:after {
border-color: transparent transparent $primary-color transparent;
}
.dropdown-menu li {
> a:not(.btn) {
color: rgba(250, 250, 250, 0.95);
}
&:hover > a:not(.btn) {
color: rgba(250, 250, 250, 1);
font-weight:600;
}
}
}
&.dropdown-mega .dropdown-mega-content > .row > div {
border-color: rgba(250, 250, 250, 0.2);
}
}
}
/* Hamburger Menu Button */
.navbar-toggler {
width: 25px;
height: 30px;
padding: 10px;
margin: 18px 15px;
position: relative;
border:none;
@include rotate(0deg);
@include transition(.5s ease-in-out);
cursor: pointer;
display: block;
span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #3c3636;
border-radius: 2px;
opacity: 1;
left: 0;
@include rotate(0deg);
@include transition(.25s ease-in-out);
&:nth-child(1) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
&:nth-child(2) {
top: 14px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
&:nth-child(3) {
top: 21px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
}
&.show span {
&:nth-child(1) {
top: 4px;
left: 3px;
@include rotate(45deg);
}
&:nth-child(2) {
width: 0%;
opacity: 0;
}
&:nth-child(3) {
top: 22px;
left: 3px;
@include rotate(-45deg);
}
}
}
.navbar-accordion{position:initial;}
// For Responsive Navbar
@mixin navbar-responsive {
.navbar-collapse {
position: absolute;
top: 99%;
right: 0;
left: 0;
background: #fff;
margin-top: 0px;
z-index: 1000;
@include box-shadow(0px 0px 15px rgba(0, 0, 0, 0.1));
.navbar-nav {
overflow: hidden;
overflow-y: auto;
max-height: 65vh;
padding: 15px;
}
}
ul.navbar-nav {
li {
display: block;
border-bottom: 1px solid #eee;
margin: 0;
padding: 0;
&:last-child {
border: none;
}
+ li {
margin-left: 0px;
}
&.dropdown > .dropdown-toggle > .arrow.show:after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
@include transition(all .2s ease);
}
> a:hover:after, > a.active:after {
content: none!important;
width:0px!important;
}
&.dropdown{
> .dropdown-toggle .arrow {
display: block;
}
}
}
> li {
> a:not(.btn) {
height: auto;
padding: 8px 0;
position: relative;
}
&.dropdown {
.dropdown-menu li > a:not(.btn) {
padding: 8px 0;
position: relative;
}
&:hover > a:after {
content: none;
}
.dropdown-toggle .arrow:after {
-webkit-transform: translate(-50%, -50%) rotate(134deg);
transform: translate(-50%, -50%) rotate(134deg);
@include transition(all .2s ease);
}
}
}
> li {
&.dropdown .dropdown-menu {
margin: 0;
@include box-shadow(none);
border: none;
padding: 0px 0px 0px 15px;
.dropdown-menu {
margin: 0;
}
}
&.dropdown-mega {
.dropdown-mega-content > .row > div {
padding: 0px 15px;
}
}
}
}
&.navbar-text-light .navbar-collapse{background:rgba(0,0,0,0.95);}
&.navbar-text-light .navbar-collapse ul.navbar-nav li{
border-color:rgba(250,250,250,0.15);
}
&.navbar-dropdown-dark .navbar-collapse {
background-color: #252A2C;
}
&.navbar-dropdown-primary .navbar-collapse {
background-color: $primary-color;
}
&.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
background-color: $primary-color;
}
&.navbar-dropdown-dark ul.navbar-nav {
li {
border-color: #444;
}
> li {
> a {
color: #a3a2a2;
}
&:hover > a {
color: #fff;
}
}
}
&.navbar-dropdown-primary ul.navbar-nav {
li {
border-color: rgba(250, 250, 250, 0.2);
}
> li {
> a {
color: rgba(250, 250, 250, 0.8);
}
&:hover > a {
color: #fff;
}
}
}
}
.navbar-expand-none{
@include navbar-responsive;
}
@include media-breakpoint-down(xs) {
.navbar-expand-sm{
@include navbar-responsive;
}
}
@include media-breakpoint-down(sm) {
.navbar-expand-md{
@include navbar-responsive;
}
}
@include media-breakpoint-down(md) {
.navbar-expand-lg{
@include navbar-responsive;
}
}
@include media-breakpoint-down(lg) {
.navbar-expand-xl{
@include navbar-responsive;
}
}
\ No newline at end of file
/* =================================== */
/* 2. Helpers Classes
/* =================================== */
/* Box Shadow */
.shadow-md {
@include box-shadow(0px 0px 50px -35px rgba(0, 0, 0, 0.4)!important);
}
/* Border Radius */
.rounded-lg{
border-radius: 0.6rem !important;
}
.rounded-top-0{
border-top-left-radius:0px!important;
border-top-right-radius:0px!important;
}
.rounded-bottom-0{
border-bottom-left-radius:0px!important;
border-bottom-right-radius:0px!important;
}
.rounded-left-0{
border-top-left-radius:0px!important;
border-bottom-left-radius:0px!important;
}
.rounded-right-0{border-top-right-radius:0px!important;
border-bottom-right-radius:0px!important;
}
/* Border Size */
.border-1{
border-width:1px!important;
}
.border-2{
border-width:2px!important;
}
.border-3{
border-width:3px!important;
}
.border-4{
border-width:4px!important;
}
.border-5{
border-width:5px!important;
}
/* Text Size */
.text-0 {
font-size: 11px !important;
font-size: 0.6875rem !important;
}
.text-1 {
font-size: 12px !important;
font-size: 0.75rem !important;
}
.text-2 {
font-size: 14px !important;
font-size: 0.875rem !important;
}
.text-3 {
font-size: 16px !important;
font-size: 1rem !important;
}
.text-4 {
font-size: 18px !important;
font-size: 1.125rem !important;
}
.text-5 {
font-size: 21px !important;
font-size: 1.3125rem !important;
}
.text-6 {
font-size: 24px !important;
font-size: 1.50rem !important;
}
.text-7 {
font-size: 28px !important;
font-size: 1.75rem !important;
}
.text-8 {
font-size: 32px !important;
font-size: 2rem !important;
}
.text-9 {
font-size: 36px !important;
font-size: 2.25rem !important;
}
.text-10 {
font-size: 40px !important;
font-size: 2.50rem !important;
}
.text-11 {
@include rfs(44, true);
}
.text-12 {
@include rfs(48, true);
}
.text-13 {
@include rfs(52, true);
}
.text-14 {
@include rfs(56, true);
}
.text-15 {
@include rfs(60, true);
}
.text-16 {
@include rfs(64, true);
}
.text-17 {
@include rfs(72, true);
}
.text-18 {
@include rfs(80, true);
}
.text-19 {
@include rfs(84, true);
}
.text-20 {
@include rfs(92, true);
}
.text-21 {
@include rfs(104, true);
}
.text-22 {
@include rfs(112, true);
}
.text-23 {
@include rfs(124, true);
}
.text-24 {
@include rfs(132, true);
}
.text-25 {
@include rfs(144, true);
}
.text-11, .text-12, .text-13, .text-14, .text-15, .text-16, .text-17, .text-18, .text-19, .text-20, .text-21, .text-22, .text-23, .text-24, .text-25{
line-height: 1.3;
}
/* Line height */
.line-height-07 {
line-height: 0.7 !important;
}
.line-height-1 {
line-height: 1 !important;
}
.line-height-2 {
line-height: 1.2 !important;
}
.line-height-3 {
line-height: 1.4 !important;
}
.line-height-4 {
line-height: 1.6 !important;
}
.line-height-5 {
line-height: 1.8 !important;
}
/* Font Weight */
.font-weight-100 {
font-weight: 100 !important;
}
.font-weight-200 {
font-weight: 200 !important;
}
.font-weight-300 {
font-weight: 300 !important;
}
.font-weight-400 {
font-weight: 400 !important;
}
.font-weight-500 {
font-weight: 500 !important;
}
.font-weight-600 {
font-weight: 600 !important;
}
.font-weight-700 {
font-weight: 700 !important;
}
.font-weight-800 {
font-weight: 800 !important;
}
.font-weight-900 {
font-weight: 900 !important;
}
/* Opacity */
.opacity-0 {
opacity: 0;
}
.opacity-1 {
opacity: 0.1;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-3 {
opacity: 0.3;
}
.opacity-4 {
opacity: 0.4;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-6 {
opacity: 0.6;
}
.opacity-7 {
opacity: 0.7;
}
.opacity-8 {
opacity: 0.8;
}
.opacity-9 {
opacity: 0.9;
}
.opacity-10 {
opacity: 1;
}
/* Background light */
.bg-light-1 {
background-color: $gray-200 !important;
}
.bg-light-2 {
background-color: $gray-300 !important;
}
.bg-light-3 {
background-color: $gray-400 !important;
}
.bg-light-4 {
background-color: $gray-500 !important;
}
/* Background Dark */
.bg-dark {
background-color: #111418 !important;
}
.bg-dark-1 {
background-color: $gray-900 !important;
}
.bg-dark-2 {
background-color: $gray-800 !important;
}
.bg-dark-3 {
background-color: $gray-700 !important;
}
.bg-dark-4 {
background-color: $gray-600 !important;
}
/* Progress Bar */
.progress-sm {
height: 0.5rem !important;
}
.progress-lg {
height: 1.5rem !important;
}
hr{
border-top:1px solid rgba(16,85,96,.1);
}
\ No newline at end of file
/* =================================== */
/* 3. Layouts
/* =================================== */
#main-wrapper {
background:#fff;
}
.box {
#main-wrapper {
max-width: 1200px;
margin: 0 auto;
@include box-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
}
.idocs-navigation {
left: auto;
}
}
@include media-breakpoint-up(xl) {
.container {
max-width: 1170px !important;
}
}
/*=== 3.1 Side Navigation ===*/
.idocs-navigation {
position: fixed;
top: 70px;
left: 0;
overflow: hidden;
overflow-y: auto;
width: 260px;
height: calc(100% - 70px);
z-index: 1;
border-right: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s;
> .nav {
padding: 30px 0;
}
.nav {
.nav-item {
position: relative;
}
.nav {
margin: 0 0 5px;
}
.nav-link {
position: relative;
padding: 6px 30px;
line-height: 25px;
font-weight: 600;
}
.nav-item {
&:hover > .nav-link, .nav-link.active {
font-weight: 700;
}
}
.nav {
.nav-item .nav-link {
&:after {
content: "";
position: absolute;
left: 30px;
height: 100%;
border-left: 1px solid rgba(0, 0, 0, 0.12);
width: 1px;
top: 0;
}
&.active:after {
border-color: $primary-color;
border-width: 2px;
}
}
display: none;
border-left: 1px solid regba(0, 0, 0, 0.3);
}
.nav-item .nav-link.active + .nav {
display: block;
}
.nav {
.nav-link {
color: #6a6a6a;
padding: 4px 30px 4px 45px;
font-size: 15px;
text-transform: none;
}
.nav {
.nav-link {
padding: 4px 30px 4px 60px;
font-size: 15px;
}
.nav-item .nav-link:after {
left: 45px;
}
}
}
}
> .nav > .nav-item > .nav-link.active:after {
position: absolute;
content: " ";
top: 50%;
right: 18px;
border-color: #000;
border-top: 2px solid;
border-right: 2px solid;
width: 7px;
height: 7px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
@include transition(all .2s ease);
}
&.docs-navigation-dark .nav {
.nav-link {
color: rgba(250, 250, 250, 0.85);
}
.nav {
.nav-link {
color: rgba(250, 250, 250, 0.7);
}
.nav-item .nav-link {
&:after {
border-color: rgba(250, 250, 250, 0.2);
}
&.active:after {
border-color: $primary-color;
}
}
}
}
}
/*=== 3.2 Docs Content ===*/
.idocs-content {
position: relative;
margin-left: 260px;
padding: 0px 50px 50px;
min-height: 750px;
transition: all 0.3s;
section:first-child {
padding-top: 3rem;
}
ol li, ul li {
margin-top: 10px;
}
}
@include media-breakpoint-down(sm) {
.idocs-navigation {
margin-left: -260px;
&.active {
margin-left: 0;
}
}
.idocs-content {
margin-left:0px;
padding:0px;
}
}
/*=== 3.3 Section Divider ===*/
.divider{margin: 4rem 0;}
//---------- @mixins ----------//
@mixin box-shadow($val...) {
-webkit-box-shadow: ($val);
box-shadow: ($val);
}
@mixin transition($val...) {
-webkit-transition: ($val);
transition: ($val);
}
@mixin translateY($val...) {
-webkit-transform: translateY($val);
transform: translateY($val);
}
@mixin translateX($val...) {
-webkit-transform: translateX($val);
transform: translateX($val);
}
@mixin rotate($val){
-webkit-transform: rotate($val);
transform: rotate($val);
}
@mixin scale($val){
-webkit-transform: scale($val);
transform: scale($val);
}
\ No newline at end of file
/* =================================== */
/* 1. Basic Style
/* =================================== */
body, html {
height:100%;
}
body {
background: $body-bg;
color: $text-color;
}
/*-------- Preloader --------*/
.preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 999999999 !important;
background-color: #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
.lds-ellipsis {
display: inline-block;
position: absolute;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
top: 50%;
left: 50%;
div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #000;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
&:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
&:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
&:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
&:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
}
}
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
/*--- Preloader Magnific Popup ----*/
.mfp-container .preloader{
background: transparent;
.lds-ellipsis div{
background: #fff;
}
}
::selection {
background: $primary-color;
color: #fff;
text-shadow: none;
}
code{padding: 2px 5px; background-color: #f9f2f4; border-radius: 4px;}
form {
padding: 0;
margin: 0;
display: inline;
}
img {
vertical-align: inherit;
}
a, a:focus {
color: $primary-color;
@include transition(all .2s ease);
}
a:hover, a:active {
color: $primary-color-hover;
@include transition(all .2s ease);
}
a:focus, a:active,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus,
button:focus,
button:active{
outline: none;
}
p {
line-height: 1.8;
}
blockquote {
border-left: 5px solid #eee;
padding: 10px 20px;
}
iframe {
border: 0 !important;
}
h1, h2, h3, h4, h5, h6 {
color: $title-color;
line-height: 1.5;
margin: 0 0 1.5rem 0;
font-family:Roboto, sans-serif;
}
h1{font-size:3rem;}
h2{font-size:2.2rem;}
dl, ol, ul, pre, blockquote, .table{margin-bottom:1.8rem;}
/*=== Highlight Js ===*/
.hljs {padding: 1.5rem;}
\ No newline at end of file
/*===========================================================
Template Name: iDocs - One Page Documentation HTML Template
Author: Harnish Design
Template URL: http://demo.harnishdesign.net/html/idocs
Author URL: https://themeforest.net/user/harnishdesign
File Description : Main css file of the template
=================================================
Table of Contents
=================================================
1. Basic
2. Helpers Classes
3. Layouts
3.1 Side Navigation
3.2 Docs Content
3.3 Section Divider
4. Header
4.1 Main Navigation
5 Elements
5.1 List Style
5.2 Changelog
5.3 Accordion & Toggle
5.4 Nav
5.5 Tabs
5.6 Popup Img
5.7 Featured Box
6 Footer
6.1 Social Icons
6.2 Back to Top
7 Extra
=======================================================*/
//-------------------- Base Colors --------------------//
$primary-color: #0366d6;
$primary-color-hover: darken($primary-color, 7%);
$secondary-color: $secondary;
$body-bg: #dddddd;
$text-color: #4c4d4d;
$title-color: #252b33;
\ No newline at end of file
//
// Base styles
//
.alert {
position: relative;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
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: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
}
}
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
@include transition($badge-transition);
@at-root a#{&} {
@include hover-focus() {
text-decoration: none;
}
}
// Empty badges collapse automatically
&:empty {
display: none;
}
}
// Quick fix for badges in buttons
.btn .badge {
position: relative;
top: -1px;
}
// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
@include border-radius($badge-pill-border-radius);
}
// Colors
//
// Contextual variations (linked badges get darker on :hover).
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
@include font-size($breadcrumb-font-size);
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius);
}
.breadcrumb-item {
display: flex;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
&::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: escape-svg($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;
}
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}
// stylelint-disable selector-no-qualifying-type
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
flex: 1 1 auto;
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
@include hover() {
z-index: 1;
}
&:focus,
&:active,
&.active {
z-index: 1;
}
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.input-group {
width: auto;
}
}
.btn-group {
// Prevent double borders when buttons are next to each other
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(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
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after,
.dropup &::after,
.dropright &::after {
margin-left: 0;
}
.dropleft &::before {
margin-right: 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
// Set the same inset shadow as the :active state
.btn-group.show .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);
}
}
//
// Vertical button groups
//
.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center;
> .btn,
> .btn-group {
width: 100%;
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@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.
.btn-group-toggle {
> .btn,
> .btn-group > .btn {
margin-bottom: 0; // Override default `<label>` value
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
@include hover() {
color: $body-color;
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
opacity: $btn-disabled-opacity;
@include box-shadow(none);
}
&:not(:disabled):not(.disabled) {
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
//
// Alternate buttons
//
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
text-decoration: $link-decoration;
@include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// No need for an active state here
}
//
// Button Sizes
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
margin-top: $btn-block-spacing-y;
}
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
//
// Base styles
//
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group {
border-top: inherit;
border-bottom: inherit;
&:first-child {
border-top-width: 0;
@include border-top-radius($card-inner-border-radius);
}
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius($card-inner-border-radius);
}
}
// Due to specificity of the above selector (`.card > .list-group`), we must
// use a child selector here to prevent double borders.
> .card-header + .list-group,
> .list-group + .card-footer {
border-top: 0;
}
}
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
// Workaround for the image size bug in IE
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
padding: $card-spacer-x;
color: $card-color;
}
.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-link {
@include hover() {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
}
.card-footer {
padding: $card-spacer-y $card-spacer-x;
color: $card-cap-color;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
}
//
// 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;
}
// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
@include border-radius($card-inner-border-radius);
}
.card-img,
.card-img-top,
.card-img-bottom {
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
}
.card-img,
.card-img-top {
@include border-top-radius($card-inner-border-radius);
}
.card-img,
.card-img-bottom {
@include border-bottom-radius($card-inner-border-radius);
}
// Card deck
.card-deck {
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}
//
// Card groups
//
.card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: $card-group-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
@include border-left-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-left-radius: 0;
}
}
}
}
}
}
//
// Columns
//
.card-columns {
.card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}
//
// Accordion
//
.accordion {
overflow-anchor: none;
> .card {
overflow: hidden;
&:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}
&:not(:first-of-type) {
@include border-top-radius(0);
}
> .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
}
}
}
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
// the active slide is heading.
// 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// is the upcoming slide in transition.
.carousel {
position: relative;
}
.carousel.pointer-event {
touch-action: pan-y;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
@include transition($carousel-transition);
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%);
}
//
// Alternate transitions
//
.carousel-fade {
.carousel-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
}
}
//
// Left/right controls for nav
//
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
color: $carousel-control-color;
text-align: center;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus() {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
left: 0;
@if $enable-gradients {
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
}
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);
}
.carousel-control-next-icon {
background-image: escape-svg($carousel-control-next-icon-bg);
}
// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0; // override <ol> default
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
margin-left: $carousel-control-width;
list-style: none;
li {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;
@include transition($carousel-indicator-transition);
}
.active {
opacity: 1;
}
}
// Optional captions
//
//
.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;
}
.close {
float: right;
@include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
// Override <a>'s hover style
@include hover() {
color: $close-color;
text-decoration: none;
}
&:not(:disabled):not(.disabled) {
@include hover-focus() {
opacity: .75;
}
}
}
// 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
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
}
// Future-proof disabling of clicks on `<a>` elements
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
pointer-events: none;
}
// Inline code
code {
@include font-size($code-font-size);
color: $code-color;
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);
kbd {
padding: 0;
@include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
}
// Blocks of code
pre {
display: block;
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}
// 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;
z-index: 1;
display: block;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
}
.custom-control-inline {
display: inline-flex;
margin-right: $custom-control-spacer-x;
}
.custom-control-input {
position: absolute;
left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
width: $custom-control-indicator-size;
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
opacity: 0;
&:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color;
border-color: $custom-control-indicator-checked-border-color;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow);
}
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: $custom-control-indicator-focus-border-color;
}
&:not(:disabled):active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg;
border-color: $custom-control-indicator-active-border-color;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .custom-control-label {
color: $custom-control-label-disabled-color;
&::before {
background-color: $custom-control-indicator-disabled-bg;
}
}
}
}
// Custom control indicators
//
// Build the custom controls out of pseudo-elements.
.custom-control-label {
position: relative;
margin-bottom: 0;
color: $custom-control-label-color;
vertical-align: top;
cursor: $custom-control-cursor;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
background-color: $custom-control-indicator-bg;
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
background: no-repeat 50% / #{$custom-control-indicator-bg-size};
}
}
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox {
.custom-control-label::before {
@include border-radius($custom-checkbox-indicator-border-radius);
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: escape-svg($custom-checkbox-indicator-icon-checked);
}
}
.custom-control-input:indeterminate ~ .custom-control-label {
&::before {
border-color: $custom-checkbox-indicator-indeterminate-border-color;
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
&:indeterminate ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// Radios
//
// Tweak just a few things for radios.
.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-blacklist
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: escape-svg($custom-radio-indicator-icon-checked);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// switches
//
// Tweak a few things for switches
.custom-switch {
padding-left: $custom-switch-width + $custom-control-gutter;
.custom-control-label {
&::before {
left: -($custom-switch-width + $custom-control-gutter);
width: $custom-switch-width;
pointer-events: all;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
}
&::after {
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-color: $custom-control-indicator-bg;
transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
//
.custom-select {
display: inline-block;
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
font-family: $custom-select-font-family;
@include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-background;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow);
appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $custom-select-focus-box-shadow;
}
&::-ms-value {
// For visual consistency with other platforms/browsers,
// suppress 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;
}
}
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $custom-select-padding-x;
background-image: none;
}
&:disabled {
color: $custom-select-disabled-color;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
display: none;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $custom-select-color;
}
}
.custom-select-sm {
height: $custom-select-height-sm;
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
@include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
height: $custom-select-height-lg;
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
@include font-size($custom-select-font-size-lg);
}
// File
//
// Custom file input.
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: $custom-file-height;
margin-bottom: 0;
}
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: $custom-file-height;
margin: 0;
opacity: 0;
&:focus ~ .custom-file-label {
border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
}
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .custom-file-label,
&:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}
~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
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);
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
}
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.custom-range {
width: 100%;
height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&:focus {
outline: none;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
border: 0;
}
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent; // Why?
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent;
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent; // Firefox specific?
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: 0; // Edge specific
margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-ms-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-fill-lower {
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&::-ms-fill-upper {
margin-right: 15px; // arbitrary?
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&:disabled {
&::-webkit-slider-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-webkit-slider-runnable-track {
cursor: default;
}
&::-moz-range-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-moz-range-track {
cursor: default;
}
&::-ms-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
}
}
.custom-control-label::before,
.custom-file-label,
.custom-select {
@include transition($custom-forms-transition);
}
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
// Generate the caret automatically
@include caret();
}
// 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-spacer 0 0; // override default ul
@include font-size($dropdown-font-size);
color: $dropdown-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($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left {
right: auto;
left: 0;
}
.dropdown-menu#{$infix}-right {
right: 0;
left: auto;
}
}
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
.dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(up);
}
}
.dropright {
.dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(right);
&::after {
vertical-align: 0;
}
}
}
.dropleft {
.dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(left);
&::before {
vertical-align: 0;
}
}
}
// When enabled Popper.js, reset basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
&[x-placement^="right"],
&[x-placement^="bottom"],
&[x-placement^="left"] {
right: auto;
bottom: auto;
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
}
// 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: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
// Prevent dropdown overflow if there's no padding
// See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 {
&:first-child {
@include border-top-radius($dropdown-inner-border-radius);
}
&:last-child {
@include border-bottom-radius($dropdown-inner-border-radius);
}
}
@include hover-focus() {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-link-active-color;
text-decoration: none;
@include gradient-bg($dropdown-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
}
}
.dropdown-menu.show {
display: block;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: $dropdown-header-padding;
margin-bottom: 0; // for use with heading elements
@include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}
// stylelint-disable selector-no-qualifying-type
//
// Textual form controls
//
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-clip: padding-box;
border: $input-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.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Remove select outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus($ignore-warning: true);
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// 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-disabled-bg;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
appearance: none; // Fix appearance for date inputs in Safari
}
}
select.form-control {
&: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;
width: 100%;
}
//
// Labels
//
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
}
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext {
display: block;
width: 100%;
padding: $input-padding-y 0;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
@include font-size($input-font-size);
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 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.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
// stylelint-disable-next-line no-duplicate-selectors
select.form-control {
&[size],
&[multiple] {
height: auto;
}
}
textarea.form-control {
height: auto;
}
// 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: $form-text-margin-top;
}
// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -$form-grid-gutter-width / 2;
margin-left: -$form-grid-gutter-width / 2;
> .col,
> [class*="col-"] {
padding-right: $form-grid-gutter-width / 2;
padding-left: $form-grid-gutter-width / 2;
}
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check {
position: relative;
display: block;
padding-left: $form-check-input-gutter;
}
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .form-check-label,
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
.form-check-label {
margin-bottom: 0; // Override default `<label>` bottom margin
}
.form-check-inline {
display: inline-flex;
align-items: center;
padding-left: 0; // Override base .form-check
margin-right: $form-check-inline-margin-x;
// Undo .form-check-input defaults and add some `margin-right`.
.form-check-input {
position: static;
margin-top: 0;
margin-right: $form-check-inline-input-margin-x;
margin-left: 0;
}
}
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
// 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 {
display: flex;
flex-flow: row wrap;
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check {
width: 100%;
}
// Kick in the inline
@include media-breakpoint-up(sm) {
label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
// Inline-block all the things for "inline"
.form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0;
}
// 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-plaintext {
display: inline-block;
}
.input-group,
.custom-select {
width: auto;
}
// 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: flex;
align-items: center;
justify-content: center;
width: auto;
padding-left: 0;
}
.form-check-input {
position: relative;
flex-shrink: 0;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;
}
.custom-control {
align-items: center;
justify-content: center;
}
.custom-control-label {
margin-bottom: 0;
}
}
}
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// 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;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if length($map) > 0 {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
@if str-index($string, "url(") == 1 {
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
}
}
@return $string;
}
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
// Retrieve color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}