Comments (5)
Do you have an example of the html file as well?
from css-progress-wizard.
css-progress-wizard-master.zip
Attaching the sample.
from css-progress-wizard.
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.
from css-progress-wizard.
from css-progress-wizard.
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
from css-progress-wizard.
Related Issues (11)
- Compatibility with IE9 HOT 2
- MIT License? HOT 3
- Bubble's contents covered by timeline HOT 1
- Release via NPM HOT 5
- Update gh-pages docs to reflect breaking changes with variable rename
- Can you remove the bower.json file from the old project which has lgpl in it? HOT 4
- Add missing package.json fields
- npm publish HOT 3
- Your Github Project Page Has An MIT button bower package says GPL ? HOT 2
- Override-able variables HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-progress-wizard.