// Input groups
// --------------------------------------------------
+
+//
// Base styles
-// -------------------------
+//
+
.input-group {
position: relative; // For dropdowns
display: table;
}
}
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+ display: table-cell;
+
+ &:not(:first-child):not(:last-child) {
+ @include border-radius(0);
+ }
+}
+
+.input-group-addon,
+.input-group-btn {
+ 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
}
-// Display as table-cell
-// -------------------------
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
- display: table-cell;
-
- &:not(:first-child):not(:last-child) {
- @include border-radius(0);
- }
-}
-// Addon and addon wrapper for buttons
-.input-group-addon,
-.input-group-btn {
- width: 1%;
- white-space: nowrap;
- vertical-align: middle; // Match the inputs
-}
-
+//
// Text input groups
-// -------------------------
+//
+
.input-group-addon {
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
}
}
+
+//
// Reset rounded corners
+//
+
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
border-left: 0;
}
+
+//
// Button input groups
-// -------------------------
+//
+
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// Labels
// --------------------------------------------------
+
.label {
display: inline-block;
padding: .25em .4em;
}
}
+
// Colors
-// Contextual variations (linked labels get darker on :hover)
+//
+// Contextual variations (linked labels get darker on :hover).
.label-default {
@include label-variant($label-default-bg);
+//
+// Media
+// --------------------------------------------------
+
.media {
// Proper spacing between instances of .media
margin-top: 15px;
// Modals
// --------------------------------------------------
+
// .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 shit
+
// Kill the scroll on the body
.modal-open {
overflow: hidden;
// Navs
// --------------------------------------------------
+
+//
+// Base styles
+//
+
.nav {
margin-bottom: 0;
@extend .list-unstyled;
//
// Pagination (multiple pages)
// --------------------------------------------------
+
+
.pagination {
display: inline-block;
padding-left: 0;
}
}
+
+//
// Sizing
-// --------------------------------------------------
+//
-// Large
.pagination-lg {
@include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $border-radius-lg);
}
-// Small
.pagination-sm {
@include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $border-radius-sm);
}
padding: 9px 14px;
}
+
// Arrows
//
// .popover-arrow is outer, .popover-arrow:after is inner
-// Embeds responsive
//
+// Responsive embed
+// --------------------------------------------------
+
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
//
-// Reset tabular elements
-//
-
-// table {
-// background-color: $table-bg;
-// }
-
-// caption {
-// padding-top: $table-cell-padding;
-// padding-bottom: $table-cell-padding;
-// color: $text-muted;
-// text-align: left;
-// }
-
-// th {
-// text-align: left;
-// }
+// Custom tables
+// --------------------------------------------------
//
// Responsive: Utility classes
// --------------------------------------------------
+
+//
+// Mixins
+//
+
@each $bp in map-keys($grid-breakpoints) {
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
// --------------------------------------------------
+//
// Floats
+//
+
.clearfix {
@include clearfix();
}
+
.center-block {
@include center-block();
}
.pull-right {
@include pull-right();
}
+
.pull-left {
@include pull-left();
}
+
+//
+// Screenreaders
+//
+
.sr-only {
@include sr-only();
}
}
-// Inverse
-.inverse {
- color: $gray-lighter;
- background-color: $gray-dark;
-}
-
-
//
// Spacing
//
}
+//
+// Text
+//
+
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
-// Contextual colors
+// Contextual colors
.text-muted {
color: $text-muted;
}
@include text-emphasis-variant('.text-danger', $state-danger-text);
+
// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
+// Inverse
+// Todo: redo this as a proper class
+.inverse {
+ color: $gray-lighter;
+ background-color: $gray-dark;
+}
+
.bg-primary {
// Given the contrast here, this is the only class to have its color inverted
// automatically.