.list-underlined { @extend .list-unstyled; margin-bottom: 0; > li { border-bottom: 1px solid $dark; padding: 2px 0; } } .flex-space-left { margin-left: auto; } .flex-space-right { margin-right: auto; } .alert { border-width: 0; background: transparent; @each $color, $value in $theme-colors { &.alert-#{$color} { border-bottom: 2px solid theme-color-level($color, $alert-color-level); transition: background-color ease 200ms; &:hover { background-color: rgba(theme-color-level($color, $alert-bg-level), .5); } } } } .fold { overflow-y: hidden; overflow-x: hidden; transition: height 250ms ease; will-change: height; } .flex { display: flex; align-items: center; > .text { margin-left: .2rem; margin-right: .2rem; display: inline-block; margin-bottom: 0; &:last-child, & + .text { margin-right: 0; } &:first-child { margin-left: 0; } } } $section-safe-margin: 0.5rem; .section { padding: $section-safe-margin; margin: -$section-safe-margin; background: rgba(white, 0.85); margin-bottom: 1rem; .section__title { @extend .alert; @extend .alert-dark; > * { font-size: medium; } @include direct-headings { @extend .flex; margin-bottom: 0; } font-size: medium; background: transparent; padding: .5rem .75rem; line-height: $btn-line-height; &:hover { background: none; } > .btn { margin-top: -.5rem; margin-bottom: -.5rem; } } } .btn-unstyled { padding: 0; margin: 0; background: none; border: none; display: block; } .icon { padding: .5rem 0.75rem; } .invalid-feedback p { margin-bottom: 0; }