Skip to content

Commit

Permalink
Merge pull request #93 from sebgroup/hotfix/89-text-alignment-issue-w…
Browse files Browse the repository at this point in the history 
…hen-left-menu-t

Hotfix/89 text alignment issue when left menu t
  • Loading branch information
@hjalmers
hjalmers authored Dec 14, 2021
2 parents 1d12adc + 563923b commit 3420b59
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 79 deletions.
10 changes: 5 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions ...izard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,13 @@ <h3>Set state for step based on route path</h3>
</button>
</div>
</div>

<h3 class="mt-3">Clear all states</h3>
<p>Clear all states with <code>clearState</code> method.</p>
<div class="form-row">
<div class="col-12 col-sm-auto mb-3">
<button class="btn btn-outline-primary w-100" (click)="clearAllStates()">
Clear all states
</button>
</div>
</div>
8 changes: 8 additions & 0 deletions .../wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ export class StepStatesComponent {
setStateForPath(state: StepState, path: string) {
this.wizardSteps.setState(state, path);
}
clearAllStates() {
this.wizardSteps.clearState();
}
}
`;
constructor(private wizardSteps: WizardSteps, private fb: FormBuilder) {
Expand All @@ -43,4 +47,8 @@ export class StepStatesComponent {
setStateForPath(state: StepState) {
this.wizardSteps.setState(state, '/wizard/' + this.stepForm.value.stepRoute);
}

clearAllStates() {
this.wizardSteps.clearState();
}
}
4 changes: 2 additions & 2 deletions projects/seb-ng-wizard-simple-usage/src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const routes: WizardStep[] = [
path: 'step-two',
component: StepTwoComponent,
data: {
heading: 'Step two',
heading: 'Step two with a very long heading spanning two lines',
subSteps: ['step-a', 'step-b'],
},
children: [
Expand All @@ -36,7 +36,7 @@ const routes: WizardStep[] = [
path: 'step-a',
component: StepAComponent,
data: {
heading: 'Sub step A',
heading: 'Sub step A with a very long heading',
},
},
{
Expand Down
12 changes: 8 additions & 4 deletions projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ <h2 class="mb-1" [innerText]="t[heading] || heading"></h2>
[class.list-group-item-wrapper]="step.data?.subSteps?.length > 0"
[routerLinkActive]="'active'"
>
<a [routerLink]="step.path" queryParamsHandling="merge">{{ t[step.data.heading] || step.data.heading }}</a>
<a [routerLink]="step.path" queryParamsHandling="merge"
><span>{{ t[step.data.heading] || step.data.heading }}</span></a
>
<ol
class="list-group list-group-wizard list-group-wizard-sub mx-n3 mt-3 mb-n3"
*ngIf="step.data?.subSteps?.length > 0"
Expand All @@ -44,10 +46,12 @@ <h2 class="mb-1" [innerText]="t[heading] || heading"></h2>
[class.list-group-item-warning]="child?.data?.state === 'warning'"
[routerLinkActive]="'active'"
*ngIf="step.children[subStep] as child"
[routerLink]="step.path + '/' + subStep"
queryParamsHandling="merge"
>
<a [routerLink]="step.path + '/' + subStep" queryParamsHandling="merge">{{
t[child.data?.heading] || child.data?.heading
}}</a>
<a [routerLink]="step.path + '/' + subStep" queryParamsHandling="merge">
<span>{{ t[child.data?.heading] || child.data?.heading }}</span>
</a>
</li>
</ng-container>
</ol>
Expand Down
112 changes: 45 additions & 67 deletions projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,15 @@ $grid-breakpoints: (
xl: 1248px
);

/**/
@import '~@sebgroup/bootstrap/scss/core';
// @import '../wizard/variables.scss';
$navbar-brand-height: 3.5rem;
.step-wrapper {
overflow: hidden;
overflow: visible;
}
$wiz-navigation-bg-color: $gray-300;
$box-shadow-wizard: 0 0 0.5rem rgba($black, 0.15) !default;

/* stylelint-disable */
nav {
.list-group-ordered .list-group-item-action:hover,
.list-group-ordered .active {
Expand Down Expand Up @@ -99,16 +97,32 @@ nav {
@include media-breakpoint-up(md) {
width: $left-nav-width;
height: calc(100vh - #{$navbar-brand-height});
//border-right: $border-color $border-width solid;
}
.list-group-wizard {
counter-reset: number;
list-style-type: none;
&:not(.list-group-wizard-sub) > .list-group-item:hover,
&:not(.list-group-wizard-sub) > .list-group-item.active {
> a::after {
content: '';
display: block;
position: absolute;
left: -2rem;
@include box-shadow($box-shadow-wizard);
background: #fff;
width: calc(100% + 3rem);
height: calc(100% + 2rem);
top: -1rem;
z-index: 0;
}
}

.list-group-item {
border-top: solid 1px transparent;
padding: 1rem;
cursor: pointer;
display: flex;
flex-wrap: wrap;

& + .list-group-item {
&:hover {
Expand All @@ -126,33 +140,32 @@ nav {

&:hover > a,
&.active > a {
@include box-shadow($box-shadow-wizard);
background: #fff;
&::before {
z-index: 3;
position: relative;
}
}

> a {
//height: 100%;
height: 3.5rem;
position: absolute;
flex: 1 0;
top: 0;
left: 0;
padding: 1rem 2.5rem;
position: relative;
width: 100%;
text-decoration: none;
font-weight: normal;
color: inherit;
span {
position: relative;
padding: 0 0.75rem;
display: block;
z-index: 1;
}

&:focus {
//@include box-shadow($box-shadow-wizard);
outline: none;
//@include box-shadow(0px 0px 4px 1px $input-focus-border-color inset);
@include box-shadow(0px 0px 4px 1px $input-focus-border-color);
z-index: 2;
//background: red;
}
}

Expand All @@ -168,27 +181,22 @@ nav {
color: inherit;
border-top: solid 1px #fff;

//background: #fff;

&.list-group-item-passed > a {
&.list-group-item-passed > a::after {
content: '';
display: block;
position: absolute;
left: -2rem;
width: calc(100% + 3rem);
height: calc(100% + 2rem);
top: -1rem;
z-index: 0;
box-shadow: none;
background: #f8f8f8;
}

> a {
font-weight: inherit;
color: inherit;

/*&::before {
content: '';
display: block;
background: black;
width: 6px;
height: 100%;
left: 0;
position: absolute;
top: 0;
}*/
}
}
&.list-group-item-passed {
Expand All @@ -205,20 +213,12 @@ nav {
}

&.list-group-item-success {
// font-weight: 500;
// background: $gray-100;
&.active {
//background: #fff;
}

//&:not(.active)::after {
&::after {
content: '';
display: inline-block;
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
//margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
Expand All @@ -232,16 +232,11 @@ nav {
);
}

> a {
// font-weight: inherit;
}
&:not(:hover) + .list-group-item-success {
border-top: solid 1px $gray-200;
}
}
&.list-group-item-danger {
// font-weight: 500;
// background: $gray-100;
&.active {
background: #fff;
}
Expand All @@ -252,7 +247,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
//margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
Expand All @@ -274,8 +268,6 @@ nav {
}
}
&.list-group-item-warning {
// font-weight: 500;
// background: $gray-100;
&.active {
background: #fff;
}
Expand All @@ -286,7 +278,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
//margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
Expand All @@ -301,12 +292,6 @@ nav {
no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10'%3E%3Crect width='10' height='10' style='fill:%23000;' /%3E%3C/svg%3E")
4px 4px;
//background-image: map-get($theme-icons, 'warning');
/*background-image: str-replace(
map-get($theme-icons, 'warning'),
str-replace(#{"fill='" + $icon-fill-color + "'"}, '#', '%23'),
str-replace(#{"fill='" + map-get($theme-colors, 'warning') + "'"}, '#', '%23')
);*/
}

> a {
Expand All @@ -317,8 +302,6 @@ nav {
}
}
&.list-group-item-info {
// font-weight: 500;
// background: $gray-100;
&.active {
background: #fff;
}
Expand All @@ -329,7 +312,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
//margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
Expand All @@ -343,21 +325,10 @@ nav {
);
}

> a {
// font-weight: inherit;
}
&:not(:hover) + .list-group-item-success {
border-top: solid 1px $gray-200;
}
}
// nested
.list-group-wizard .list-group-item {
// border-top: solid 1px $gray-200;
// border-top: solid 1px transparent;
> a {
padding-left: 3.25rem;
}
}
}
&.indent {
.list-group-wizard .list-group-item {
Expand All @@ -368,9 +339,6 @@ nav {
border-top-color: transparent;
}
}
> a {
padding-left: 5rem !important;
}
}
}
&.no-sub {
Expand All @@ -382,4 +350,14 @@ nav {
.list-group-wizard-sub > .list-group-item-passed {
border-top: solid 1px $gray-200;
}
.list-group-wizard-sub {
width: 100%;
flex: 1 1 auto;
.list-group-item:hover,
.list-group-item.active {
@include box-shadow($box-shadow-wizard);
background: #fff;
}
}
}
/* stylelint-enable */
Loading

0 comments on commit 3420b59

Please sign in to comment.