bubble without background about css-progress-wizard

[christabor]

Do you have an example of the html file as well?

[suryamadhavi]

css-progress-wizard-master.zip

Attaching the sample.

[christabor]

I see the issue is primarily because the white background is obscured by the lines, which you've adjusted to not overlap. This timeline was probably not generic enough for styles like this, as it assumes the background and lines are going to be the same, using whatever is declared in the sass variables. It could probably be reworked to allow more custom layouts like this, but for now to get it working:

I used the stock css file, except changed the variables for colors to (nearly) match your teal color, and then changed the $bubble-size variable.

I also added the following html and css:

    body {
        font-family: 'Lato', sans-serif;
    }
    .stepdate {
        display: block;
        font-size: 90%;
    }
    .progress-indicator>li.completed .bubble {
        background-color: #fff;
        border-width: 4px;
        line-height: 50px;
        border: 4px solid teal;
        font-size: 22px;
        overflow: hidden;
    }
    .progress-indicator>li.completed .bubble-text {
        z-index: 999;
        background-color: #fff;
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 1000px;
    }
    .progress-indicator>li .bubble:after,
    .progress-indicator>li .bubble:before {
        z-index: 0;
    }

Really I'm just adding a wrapper div around the inner bubble text, so I can make it overlap the :before and :after pseudo-elements:

                <span class="bubble">
                    <span class="bubble-text">3</span>
                </span>

This retains the original scaling ability and still works with your larger size and coloring. You'll need to add the remaining styles to finish it off, but that should give you a head start.

[suryamadhavi]

Thank you. I will give it a try.

…

________________________________ From: Chris Tabor <[email protected]> Sent: Saturday, 10 December 2016 4:38 PM To: christabor/css-progress-wizard Cc: suryamadhavi; Author Subject: Re: [christabor/css-progress-wizard] bubble without background (#14) I see the issue has is primarily because the white background is obscured by the lines, which you've adjusted to not overlap. This timeline was probably not generic enough for styles like this, as it assumes the background and lines are going to be the same, using whatever is declared in the sass variables. It could probably be reworked to allow more custom layouts like this, but for now to get it working: I used the stock css file, except changed the variables for colors to (nearly) match your teal color, and then changed the $bubble-size variable. I also added the following html and css: body { font-family: 'Lato', sans-serif; } .stepdate { display: block; font-size: 90%; } .progress-indicator>li.completed .bubble { background-color: #fff; border-width: 4px; line-height: 50px; border: 4px solid teal; font-size: 22px; overflow: hidden; } .progress-indicator>li.completed .bubble-text { z-index: 999; background-color: #fff; display: block; position: absolute; width: 50px; height: 50px; border-radius: 1000px; } .progress-indicator>li .bubble:after, .progress-indicator>li .bubble:before { z-index: 0; } Really I'm just adding a wrapper div around the inner bubble text, so I can make it overlap the :before and :after pseudo-elements: <span class="bubble"> <span class="bubble-text">3</span> </span> This retains the original scaling ability and still works with your larger size and coloring. You'll need to add the remaining styles to finish it off, but that should give you a head start. - You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#14 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ANet7c7BSUL8UK9_9l541KLzqfZYXxT3ks5rGjrQgaJpZM4KaXw7>.

[crixlet]

The fix provided by @christabor almost worked for me... except I had to modify the .bubble-text class a bit more:

.bubble-text {
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $bubble-size - $border-thickness * 2;
        height: $bubble-size - $border-thickness * 2;
        border-radius: 1000px;
        position: absolute;
        //compensate for border position
        top: $border-thickness;
        background-color: #fff;
}

This way, the bubble text perfectly sites on top of the bubble, regardless of border thickness or bubble size variables