Comments (4)
Here is a proposed method for creating breadcrumbs.
This uses the same arrows as the top example that are done with the following code:
ul.breadcrumb li a:after {
content: '';
display: block;
position: absolute;
left: -8px;
top: .25em;
border-left: solid 4px #989690;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
Thoughts on this @tpitre?
from alps.
@designerbrent Would it be possible to add a class to each list item? Something like (untested):
.breadcrumb__item {
margin-right: 10px;
padding-right: 8px;
&:after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%); // Always stay centered.
border-left: 4px solid #989690;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
&:last-child:after {
display: none; // Remove from last breadcrumb item.
}
}
from alps.
@designerbrent We also have these arrow helper classes that could be used to generate the arrow. We can extend the styles with .breadcrumb__item
.
from alps.
Oh, yes, that world work fine, @tpitre. I assume they will be setup as an ordered list?
from alps.
Related Issues (20)
- UPDATE ESLINT plugin
- Issue with Alps Widget Text with Link
- Migration Support
- ALPS Library Support HOT 16
- wrong slack link on alps.adventist.io/v3
- Shadow menu on mobile HOT 2
- Footer localization
- Footer localisation | Site Branding Statement HOT 11
- CTA block contains HTML <title> tag HOT 10
- Search button is not responsive HOT 2
- Columns | No left margin on mobile devices HOT 6
- Secondary navigation menu overlaps Search and Menu HOT 1
- Secondary navigation menu colliding HOT 2
- To to go to the old page layout HOT 1
- ALPS for Drupal HOT 2
- New branch for pull request HOT 1
- Copy of Update global css styles file HOT 1
- Updates to changes made not showing HOT 1
- Conflict with Google Maps API
- Add Division Colors to Storybook Site
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 alps.