Working on cleaning Boostrap

This commit is contained in:
Claudio Maradonna 2021-08-20 16:48:07 +02:00
parent d9bd025f0d
commit dd093fe8aa
Signed by: claudiomaradonna
GPG Key ID: 0CBA58694C5680D9
261 changed files with 7191 additions and 18985 deletions

1
.ignore Normal file
View File

@ -0,0 +1 @@
_site

View File

@ -4,8 +4,8 @@ layout: default
<style type="text/css" media="screen">
.container {
margin: 10px auto;
max-width: 600px;
/* margin: 10px auto; */
/* max-width: 600px; */
text-align: center;
}
h1 {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -27,13 +27,6 @@ figure {
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
-o-font-feature-settings: 'kern' 1;
font-feature-settings: 'kern' 1;
font-kerning: normal;
}
/**
@ -234,32 +227,6 @@ blockquote {
}
}
/**
* Code formatting
*/
pre,
code {
font-size: 15px;
border: 1px solid $grey-color-light;
border-radius: 3px;
background-color: #eef;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px;
overflow-x: auto;
> code {
border: 0;
padding-right: 0;
padding-left: 0;
}
}
/**
* Clearfix
*/

View File

@ -5,26 +5,26 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@import 'bootstrap/functions';
@import 'bootstrap/variables';
@import 'bootstrap-custom/functions';
@import 'bootstrap-custom/variables';
@import 'bootstrap/mixins';
@import 'bootstrap/root';
@import 'bootstrap/reboot';
@import 'bootstrap-custom/reboot';
@import 'bootstrap/type';
// @import 'bootstrap/images';
@import 'bootstrap/code';
@import 'bootstrap/grid';
@import 'bootstrap-custom/code';
@import 'bootstrap-custom/grid';
// @import 'bootstrap/tables';
@import 'bootstrap/forms';
@import 'bootstrap/buttons';
@import 'bootstrap-custom/forms';
@import 'bootstrap-custom/buttons';
// @import 'bootstrap/transitions';
@import 'bootstrap/dropdown';
@import 'bootstrap-custom/dropdown';
// @import 'bootstrap/button-group';
@import 'bootstrap/input-group';
@import 'bootstrap-custom/input-group';
// @import 'bootstrap/custom-forms';
// @import 'bootstrap/nav';
@import 'bootstrap/navbar';
@import 'bootstrap/card';
@import 'bootstrap-custom/navbar';
@import 'bootstrap-custom/card';
// @import 'bootstrap/breadcrumb';
// @import 'bootstrap/pagination';
// @import 'bootstrap/badge';
@ -32,7 +32,7 @@
// @import 'bootstrap/alert';
// @import 'bootstrap/progress';
// @import 'bootstrap/media';
// @import 'bootstrap/list-group';
@import 'bootstrap-custom/list-group';
// @import 'bootstrap/close';
// @import 'bootstrap/toasts';
// @import 'bootstrap/modal';
@ -40,5 +40,5 @@
// @import 'bootstrap/popover';
// @import 'bootstrap/carousel';
// @import 'bootstrap/spinners';
@import 'bootstrap/utilities';
@import 'bootstrap-custom/utilities';
// @import 'bootstrap/print';

File diff suppressed because one or more lines are too long

View File

@ -36,14 +36,14 @@
line-height: 1.3;
background-color: #222;
border-top: 3px dashed $background-color;
border-top: 3px dashed $body-bg;
box-shadow: 0px 180px #222;
}
.footer-heading {
font-size: 18px;
margin-bottom: $spacing-unit / 2;
}
// .footer-heading {
// font-size: 18px;
// margin-bottom: $spacing-unit / 2;
// }
ul.social-buttons {
margin-bottom: 0;
@ -65,7 +65,7 @@ ul.social-buttons li a {
ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
background-color: #4087c7;
background-color: $brand-color-secondary-hover;
}
/**
@ -249,22 +249,18 @@ aside.aside {
}
}
.card {
line-height: 1.5;
}
// .card td.img {
// width: 220px;
.card td.img {
width: 220px;
// background-size: cover;
// background-repeat: no-repeat;
// }
background-size: cover;
background-repeat: no-repeat;
}
// .btn {
// transition: box-shadow 0.3s ease-out, border-color 0.2s ease-out, color 0.3s ease-out;
.btn {
transition: box-shadow 0.3s ease-out, border-color 0.2s ease-out, color 0.3s ease-out;
text-decoration: none;
}
// text-decoration: none;
// }
.btn-secondary {
background-color: transparent;
@ -314,7 +310,7 @@ aside.aside {
.btn-primary {
background-color: transparent;
border-color: $brand-color;
box-shadow: inset 0px -0.3rem 0 $brand-color, $shadow;
box-shadow: inset 0px -0.3rem 0 $brand-color, $box-shadow;
color: $text-color;
@ -342,7 +338,7 @@ aside.aside {
.btn-success {
background-color: transparent;
border-color: $success-color;
box-shadow: inset 0px -0.3rem 0 $success-color, $shadow;
box-shadow: inset 0px -0.3rem 0 $success-color, $box-shadow;
color: $text-color;
@ -367,42 +363,38 @@ aside.aside {
}
}
.bg-primary {
background-color: $brand-color !important;
}
// .bg-primary {
// background-color: $brand-color !important;
// }
.border-primary {
border-color: $brand-color !important;
}
// .border-primary {
// border-color: $brand-color !important;
// }
.border-secondary {
border-color: $brand-color-secondary !important;
}
// .border-secondary {
// border-color: $brand-color-secondary !important;
// }
.text-primary {
color: $brand-color !important;
}
// .text-primary {
// color: $brand-color !important;
// }
.card-columns {
@media (max-width: 1199.98px) {
column-count: 2;
}
@media (max-width: 991.98px) {
column-count: 1;
}
}
// .card-columns {
// @media (max-width: 1199.98px) {
// column-count: 2;
// }
// @media (max-width: 991.98px) {
// column-count: 1;
// }
// }
.dropdown-toggle:after {
content: none;
}
// .dropdown-toggle:after {
// content: none;
// }
.list-inline-item:not(:last-child) {
margin-right: 0.25rem;
}
.min-height-100 {
min-height: 100vh;
}
// .list-inline-item:not(:last-child) {
// margin-right: 0.25rem;
// }
.content-bottom {
background-color: rgba(0, 0, 0, 0.65);
@ -411,9 +403,9 @@ aside.aside {
padding: 100px 15px 100px;
}
.shadow {
box-shadow: $shadow !important;
}
// .shadow {
// box-shadow: $box-shadow !important;
// }
.header-index {
min-height: 55vh;

View File

@ -10,7 +10,7 @@
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
text-decoration: none;
white-space: $btn-white-space;
vertical-align: middle;
user-select: none;
@ -80,29 +80,29 @@ fieldset:disabled a.btn {
//
// Make a button look and behave like a link
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
text-decoration: $link-decoration;
// .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;
}
// @include hover() {
// color: $link-hover-color;
// text-decoration: $link-hover-decoration;
// }
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
}
// &:focus,
// &.focus {
// text-decoration: $link-hover-decoration;
// }
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// &:disabled,
// &.disabled {
// color: $btn-link-disabled-color;
// pointer-events: none;
// }
// No need for an active state here
}
// // No need for an active state here
// }
//
@ -122,15 +122,15 @@ fieldset:disabled a.btn {
// Block button
//
.btn-block {
display: block;
width: 100%;
// .btn-block {
// display: block;
// width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
margin-top: $btn-block-spacing-y;
}
}
// // Vertically space out multiple block buttons
// + .btn-block {
// margin-top: $btn-block-spacing-y;
// }
// }
// Specificity overrides
input[type="submit"],

View File

@ -1,7 +1,3 @@
//
// Base styles
//
.card {
position: relative;
display: flex;
@ -12,6 +8,7 @@
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
line-height: 1.5;
@include border-radius($card-border-radius);
> hr {
@ -40,6 +37,16 @@
> .list-group + .card-footer {
border-top: 0;
}
> td {
> img {
width: 220px;
background-size: cover;
background-repeat: no-repeat;
}
}
}
.card-body {
@ -256,6 +263,10 @@
width: 100%; // Don't let their width change
}
}
@include media-breakpoint-up(xs) {
column-count: 1;
}
}
@ -263,24 +274,24 @@
// Accordion
//
.accordion {
overflow-anchor: none;
// .accordion {
// overflow-anchor: none;
> .card {
overflow: hidden;
// > .card {
// overflow: hidden;
&:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}
// &:not(:last-of-type) {
// border-bottom: 0;
// @include border-bottom-radius(0);
// }
&:not(:first-of-type) {
@include border-top-radius(0);
}
// &:not(:first-of-type) {
// @include border-top-radius(0);
// }
> .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
}
}
}
// > .card-header {
// @include border-radius(0);
// margin-bottom: -$card-border-width;
// }
// }
// }

View File

@ -11,21 +11,21 @@ code {
}
// 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: $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);
}
}
// kbd {
// padding: 0;
// @include font-size(100%);
// font-weight: $nested-kbd-font-weight;
// @include box-shadow(none);
// }
// }
// Blocks of code
pre {
@ -33,16 +33,20 @@ pre {
@include font-size($code-font-size);
color: $pre-color;
background-color: $gray-300;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
background-color: $gray-300;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}
// .pre-scrollable {
// max-height: $pre-scrollable-max-height;
// overflow-y: scroll;
// }

View File

@ -1,17 +1,17 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
// .dropup,
// .dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
// .dropdown-toggle {
// white-space: nowrap;
// Generate the caret automatically
@include caret();
}
// // Generate the caret automatically
// @include caret();
// }
// The dropdown menu
.dropdown-menu {
@ -35,70 +35,70 @@
@include box-shadow($dropdown-box-shadow);
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// @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}-left {
// right: auto;
// left: 0;
// }
.dropdown-menu#{$infix}-right {
right: 0;
left: auto;
}
}
}
// .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;
}
// .dropup {
// .dropdown-menu {
// top: auto;
// bottom: 100%;
// margin-top: 0;
// margin-bottom: $dropdown-spacer;
// }
.dropdown-toggle {
@include caret(up);
}
}
// .dropdown-toggle {
// @include caret(up);
// }
// }
.dropright {
.dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: $dropdown-spacer;
}
// .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;
}
}
}
// .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;
}
// .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;
}
}
}
// .dropdown-toggle {
// @include caret(left);
// &::before {
// vertical-align: 0;
// }
// }
// }
// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors

View File

@ -0,0 +1,341 @@
.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;
// }
// }
// }

View File

@ -52,16 +52,16 @@
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
// .no-gutters {
// margin-right: 0;
// margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
// > .col,
// > [class*="col-"] {
// padding-right: 0;
// padding-left: 0;
// }
// }
}
// Columns

View File

@ -36,9 +36,9 @@
}
// Bring the custom file input above the label
> .custom-file .custom-file-input:focus {
z-index: 4;
}
// > .custom-file .custom-file-input:focus {
// z-index: 4;
// }
> .form-control,
> .custom-select {
@ -47,29 +47,29 @@
// Custom file inputs have more complex markup, thus requiring different
// border-radius overrides.
> .custom-file {
display: flex;
align-items: center;
// > .custom-file {
// display: flex;
// align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
// &:not(:last-child) .custom-file-label,
// &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
// }
&:not(.has-validation) {
> .form-control:not(:last-child),
> .custom-select:not(:last-child),
> .custom-file:not(:last-child) .custom-file-label::after {
@include border-right-radius(0);
}
}
// &:not(.has-validation) {
// > .form-control:not(:last-child),
// > .custom-select:not(:last-child),
// > .custom-file:not(:last-child) .custom-file-label::after {
// @include border-right-radius(0);
// }
// }
&.has-validation {
> .form-control:nth-last-child(n + 3),
> .custom-select:nth-last-child(n + 3),
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
@include border-right-radius(0);
}
}
// &.has-validation {
// > .form-control:nth-last-child(n + 3),
// > .custom-select:nth-last-child(n + 3),
// > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
// @include border-right-radius(0);
// }
// }
}
@ -103,7 +103,7 @@
}
}
.input-group-prepend { margin-right: -$input-border-width; }
// .input-group-prepend { margin-right: -$input-border-width; }
.input-group-append { margin-left: -$input-border-width; }
@ -112,27 +112,27 @@
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
// .input-group-text {
// display: flex;
// align-items: center;
// padding: $input-padding-y $input-padding-x;
// margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
// @include font-size($input-font-size); // Match inputs
// font-weight: $font-weight-normal;
// line-height: $input-line-height;
// color: $input-group-addon-color;
// text-align: center;
// white-space: nowrap;
// background-color: $input-group-addon-bg;
// border: $input-border-width solid $input-group-addon-border-color;
// @include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// // Nuke default margins from checkboxes and radios to vertically center within.
// input[type="radio"],
// input[type="checkbox"] {
// margin-top: 0;
// }
// }
// Sizing
@ -140,44 +140,44 @@
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
height: $input-height-lg;
}
// .input-group-lg > .form-control:not(textarea),
// .input-group-lg > .custom-select {
// height: $input-height-lg;
// }
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
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);
}
// .input-group-lg > .form-control,
// .input-group-lg > .custom-select,
// .input-group-lg > .input-group-prepend > .input-group-text,
// .input-group-lg > .input-group-append > .input-group-text,
// .input-group-lg > .input-group-prepend > .btn,
// .input-group-lg > .input-group-append > .btn {
// 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);
// }
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: $input-height-sm;
}
// .input-group-sm > .form-control:not(textarea),
// .input-group-sm > .custom-select {
// height: $input-height-sm;
// }
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
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);
}
// .input-group-sm > .form-control,
// .input-group-sm > .custom-select,
// .input-group-sm > .input-group-prepend > .input-group-text,
// .input-group-sm > .input-group-append > .input-group-text,
// .input-group-sm > .input-group-prepend > .btn,
// .input-group-sm > .input-group-append > .btn {
// 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);
// }
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}
// .input-group-lg > .custom-select,
// .input-group-sm > .custom-select {
// padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
// }
// Prepend and append rounded corners

View File

@ -0,0 +1,154 @@
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
display: flex;
flex-direction: column;
// 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;
@include border-radius($list-group-border-radius);
}
// 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-action-color;
// text-align: inherit; // For `<button>`s (anchors inherit)
// // Hover state
// @include hover-focus() {
// z-index: 1; // Place hover/focus items above their siblings for proper border styling
// color: $list-group-action-hover-color;
// text-decoration: none;
// background-color: $list-group-hover-bg;
// }
// &:active {
// color: $list-group-action-active-color;
// background-color: $list-group-action-active-bg;
// }
// }
// 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;
color: $list-group-color;
text-decoration: if($link-decoration == none, null, none);
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
@include border-top-radius(inherit);
}
&:last-child {
@include border-bottom-radius(inherit);
}
&.disabled,
&:disabled {
color: $list-group-disabled-color;
pointer-events: none;
background-color: $list-group-disabled-bg;
}
// Include both here for `<a>`s and `<button>`s
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border-color;
}
& + & {
border-top-width: 0;
&.active {
margin-top: -$list-group-border-width;
border-top-width: $list-group-border-width;
}
}
}
// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.list-group-horizontal#{$infix} {
flex-direction: row;
> .list-group-item {
&:first-child {
@include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
}
&:last-child {
@include border-top-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0);
}
&.active {
margin-top: 0;
}
+ .list-group-item {
border-top-width: $list-group-border-width;
border-left-width: 0;
&.active {
margin-left: -$list-group-border-width;
border-left-width: $list-group-border-width;
}
}
}
}
}
}
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most