Nebular stepper Issue after completed
I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).
I am not able to override the scss for this. Please advise how can I override.
Please find the screenshots of expected and current behavior:
<nb-card class="card">
<nb-card-body>
<nb-stepper orientation="horizontal">
<nb-step [label]="labelOne">
<ng-template #labelOne></ng-template>
<h3>Working on Step 1</h3>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo></ng-template>
<h3>Step 1 completed... Working on Step 2</h3>
</nb-step>
<nb-step [label]="labelThree">
<ng-template #labelThree></ng-template>
<h3>Step 2 completed... Working on Step 3</h3>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour></ng-template>
<h3>Step 3 completed... Working on Step 4</h3>
</nb-step>
</nb-stepper>
</nb-card-body>
angular sass angular6 nebular
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
add a comment |
I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).
I am not able to override the scss for this. Please advise how can I override.
Please find the screenshots of expected and current behavior:
<nb-card class="card">
<nb-card-body>
<nb-stepper orientation="horizontal">
<nb-step [label]="labelOne">
<ng-template #labelOne></ng-template>
<h3>Working on Step 1</h3>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo></ng-template>
<h3>Step 1 completed... Working on Step 2</h3>
</nb-step>
<nb-step [label]="labelThree">
<ng-template #labelThree></ng-template>
<h3>Step 2 completed... Working on Step 3</h3>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour></ng-template>
<h3>Step 3 completed... Working on Step 4</h3>
</nb-step>
</nb-stepper>
</nb-card-body>
angular sass angular6 nebular
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45
add a comment |
I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).
I am not able to override the scss for this. Please advise how can I override.
Please find the screenshots of expected and current behavior:
<nb-card class="card">
<nb-card-body>
<nb-stepper orientation="horizontal">
<nb-step [label]="labelOne">
<ng-template #labelOne></ng-template>
<h3>Working on Step 1</h3>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo></ng-template>
<h3>Step 1 completed... Working on Step 2</h3>
</nb-step>
<nb-step [label]="labelThree">
<ng-template #labelThree></ng-template>
<h3>Step 2 completed... Working on Step 3</h3>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour></ng-template>
<h3>Step 3 completed... Working on Step 4</h3>
</nb-step>
</nb-stepper>
</nb-card-body>
angular sass angular6 nebular
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).
I am not able to override the scss for this. Please advise how can I override.
Please find the screenshots of expected and current behavior:
<nb-card class="card">
<nb-card-body>
<nb-stepper orientation="horizontal">
<nb-step [label]="labelOne">
<ng-template #labelOne></ng-template>
<h3>Working on Step 1</h3>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo></ng-template>
<h3>Step 1 completed... Working on Step 2</h3>
</nb-step>
<nb-step [label]="labelThree">
<ng-template #labelThree></ng-template>
<h3>Step 2 completed... Working on Step 3</h3>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour></ng-template>
<h3>Step 3 completed... Working on Step 4</h3>
</nb-step>
</nb-stepper>
</nb-card-body>
angular sass angular6 nebular
angular sass angular6 nebular
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
edited Nov 22 '18 at 10:42
Rakesh Singh
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
asked Nov 22 '18 at 6:49
Rakesh SinghRakesh Singh
185
185
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45
add a comment |
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45
add a comment |
1 Answer
1
active
oldest
votes
I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.
Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:
nb-stepper {
counter-reset: stepper;
}
nb-stepper .step {
counter-increment: stepper;
}
nb-stepper .nb-checkmark::before {
content: counter(stepper) !important;
}
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425310%2fnebular-stepper-issue-after-completed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.
Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:
nb-stepper {
counter-reset: stepper;
}
nb-stepper .step {
counter-increment: stepper;
}
nb-stepper .nb-checkmark::before {
content: counter(stepper) !important;
}
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
add a comment |
I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.
Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:
nb-stepper {
counter-reset: stepper;
}
nb-stepper .step {
counter-increment: stepper;
}
nb-stepper .nb-checkmark::before {
content: counter(stepper) !important;
}
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
add a comment |
I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.
Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:
nb-stepper {
counter-reset: stepper;
}
nb-stepper .step {
counter-increment: stepper;
}
nb-stepper .nb-checkmark::before {
content: counter(stepper) !important;
}
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.
Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:
nb-stepper {
counter-reset: stepper;
}
nb-stepper .step {
counter-increment: stepper;
}
nb-stepper .nb-checkmark::before {
content: counter(stepper) !important;
}
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
answered Nov 26 '18 at 12:19
3rdthemagical3rdthemagical
3,4711022
3,4711022
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425310%2fnebular-stepper-issue-after-completed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your code will help us so much.
– 3rdthemagical
Nov 22 '18 at 8:01
HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached.
– Rakesh Singh
Nov 22 '18 at 10:40
@3rdthemagical, could you help me out in this?
– Rakesh Singh
Nov 26 '18 at 7:45