Skip to content

Commit

Permalink
feat: removed white background on Stepper.Header component
Browse files Browse the repository at this point in the history
  • Loading branch information
PKulkoRaccoonGang committed Jun 6, 2023
1 parent 088eab4 commit abef2d5
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 16 deletions.
37 changes: 21 additions & 16 deletions src/Stepper/Stepper.scss
Original file line number Diff line number Diff line change
@@ -1,41 +1,43 @@
@import "variables";

.pgn__stepper-header {
display: flex;
justify-content: center;
align-items: center;
background: $white;
padding: .75rem 1rem;
min-height: 5.13rem;
background: $stepper-header-bg;
padding: $stepper-header-padding-y $stepper-header-padding-x;
min-height: $stepper-header-min-height;

.pgn__stepper-header-step-list {
list-style: none;
padding: .25rem 0;
padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
display: flex;
align-items: center;
margin: 0;
margin: $stepper-header-step-list-margin;
flex-grow: 1;
justify-content: center;

.pgn__stepper-header-line {
display: block;
height: 1px;
background: $light;
height: $stepper-header-line-height;
background: $stepper-header-line-bg;
flex-basis: 80px;
margin: 0 .5rem;
}

button.pgn__stepper-header-step {
border: none;
background-color: transparent;
border: $stepper-header-step-border;
background-color: $stepper-header-step-bg;
}
}

.pgn__stepper-header-step {
display: flex;
align-items: center;
color: $primary;
color: $stepper-header-step-color;
flex-shrink: 1;
min-width: 0;
padding: .25rem;
min-width: $stepper-header-step-min-width;
padding: $stepper-header-step-padding;

.pgn__bubble {
margin-inline-end: .5rem;
Expand All @@ -58,21 +60,24 @@
}

&.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
color: $gray-500;
color: $stepper-header-active-step-bg;
}

&.pgn__stepper-header-step-has-error {
.pgn__bubble {
background: transparent;
box-shadow: inset 0 0 0 3px $danger;
box-shadow:
inset 0 0 0
$stepper-header-step-error-bubble-box-shadow-width
$stepper-header-step-error-bubble-box-shadow-color;

* {
color: $danger;
color: $stepper-header-step-error-bubble-color;
}
}

.pgn__stepper-header-step-description {
color: $danger;
color: $stepper-header-step-error-description-color;
}
}
}
Expand Down
19 changes: 19 additions & 0 deletions src/Stepper/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
$stepper-header-bg: transparent !default;
$stepper-header-min-height: 5.13rem !default;
$stepper-header-padding-y: .75rem !default;
$stepper-header-padding-x: $spacer !default;
$stepper-header-line-bg: $light !default;
$stepper-header-line-height: 1px !default;
$stepper-header-step-color: $primary !default;
$stepper-header-step-bg: $stepper-header-bg !default;
$stepper-header-step-border: none !default;
$stepper-header-step-min-width: 0 !default;
$stepper-header-step-padding: .25rem !default;
$stepper-header-step-list-padding-y: .25rem !default;
$stepper-header-step-list-padding-x: 0 !default;
$stepper-header-step-list-margin: 0 !default;
$stepper-header-active-step-bg: $gray-500 !default;
$stepper-header-step-error-bubble-color: $danger !default;
$stepper-header-step-error-bubble-box-shadow-color: $stepper-header-step-error-bubble-color !default;
$stepper-header-step-error-bubble-box-shadow-width: 3px !default;
$stepper-header-step-error-description-color: $stepper-header-step-error-bubble-color !default;

0 comments on commit abef2d5

Please sign in to comment.