PHP Classes

File: assets/vendor/bootstrap-md/scss/free/_steppers.scss

Recommend this page to a friend!
  Classes of akeel   F3A   assets/vendor/bootstrap-md/scss/free/_steppers.scss   Download  
File: assets/vendor/bootstrap-md/scss/free/_steppers.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: F3A
PHP Web development framework like Laravel lite
Author: By
Last change:
Date: 2 years ago
Size: 3,950 bytes
 

Contents

Class file image Download
// Steppers ul.stepper { padding: 0 1.5rem; padding: 1.5rem; margin: 1em -1.5rem; overflow-x: hidden; overflow-y: auto; counter-reset: section; li { a { padding: $stepper-li-a-padding; text-align: center; .circle { display: inline-block; width: 1.75rem; height: 1.75rem; margin-right: $stepper-li-a-circle-mr; line-height: 1.7rem; color: $stepper-li-a-circle-color; text-align: center; background: $stepper-li-a-circle-bg; border-radius: $stepper-li-a-circle-border-radius; } .label { display: inline-block; color: $stepper-li-a-circle-bg; } } &.active, &.completed { a { .circle { @extend .primary-color; } .label { font-weight: 600; color: $stepper-li-a-label-color; } } } &.warning { a { .circle { // background-color: #ff3547 !important; @extend .danger-color !optional; } } } } } // Horizontal .stepper-horizontal { position: relative; display: flex; justify-content: space-between; li { position: relative; display: flex; flex: 1; align-items: center; transition: $stepper-horizontal-li-transition; a { .label { margin-top: $stepper-horizontal-li-a-label-mt; } } &:not(:last-child):after { position: relative; flex: 1; height: $stepper-horizontal-li-after-height; margin: $stepper-horizontal-li-after-margin 0 0 0; content: ""; background-color: $stepper-horizontal-li-after-bgc; } &:not(:first-child):before { position: relative; flex: 1; height: $stepper-horizontal-li-after-height; margin: $stepper-horizontal-li-after-margin 0 0 0; content: ""; background-color: $stepper-horizontal-li-after-bgc; } &:hover { background-color: rgba(0, 0, 0, .06); } } @media (max-width: $stepper-horizontal-breakpoint) { flex-direction: column; li { flex-direction: column; align-items: flex-start; a { .label { flex-flow: column nowrap; order: 2; margin-top: $stepper-horizontal-small-li-a-label-mt; } } &:not(:last-child):after { position: absolute; top: $stepper-horizontal-small-li-after-top; left: $stepper-horizontal-small-li-after-left; width: $stepper-horizontal-small-li-after-width; height: $stepper-horizontal-small-li-after-height; content: ""; } } } > li:not(:last-of-type) { margin-bottom: 0 !important; } } // Vertical .stepper-vertical { position: relative; display: flex; flex-direction: column; justify-content: space-between; li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: flex-start; a { position: relative; display: flex; align-self: flex-start; .circle { order: 1; } .label { flex-flow: column nowrap; order: 2; margin-top: $stepper-vertical-li-a-label-mt; } } &.completed { a { .label { font-weight: 500; } } } .step-content { display: block; padding: $stepper-vertical-li-step-content-padding; margin-top: 0; margin-left: $stepper-vertical-li-step-content-ml; p { font-size: $stepper-vertical-li-step-content-p-font-size; } } &:not(:last-child):after { position: absolute; top: $stepper-vertical-li-after-top; left: $stepper-vertical-li-after-left; width: $stepper-vertical-li-after-width; height: $stepper-vertical-li-after-height; content: ""; background-color: $stepper-vertical-li-after-bgc; } } }