mirror of
https://github.com/papercss/papercss
synced 2024-06-08 08:52:25 +02:00
Merge remote-tracking branch 'refs/remotes/rhyneav/master'
This commit is contained in:
commit
26a1495453
|
@ -34,6 +34,13 @@ Here's the full workflow for customization:
|
|||
- preview changes with `npm start` and go to http://localhost:8080 (changes are automatically reloaded on page)
|
||||
- OR run `npm run build` to create the new CSS in the /dist folder
|
||||
|
||||
### Adding a new color
|
||||
- Go to file `src/color.less`
|
||||
- Add a new varable and assign it to a color hex value
|
||||
- Add the new variable to the list of colors
|
||||
- Add a new variable for the light variation
|
||||
- Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
|
||||
|
||||
## Contributing
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
|
|
30
index.html
30
index.html
|
@ -821,6 +821,36 @@ function add(x, y) {
|
|||
<img src="https://unsplash.it/300" class="no-responsive no-border"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Alerts</h2>
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">
|
||||
Alert-primary
|
||||
</div>
|
||||
<div class="alert alert-secondary">
|
||||
Alert-secondary
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
Alert-success
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
Alert-warning
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
Alert-danger
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">Alert-primary</div>
|
||||
<div class="alert alert-secondary">Alert-secondary</div>
|
||||
<div class="alert alert-success">Alert-success</div>
|
||||
<div class="alert alert-warning">Alert-warning</div>
|
||||
<div class="alert alert-danger">Alert-danger</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 id="download">Download</h2>
|
||||
<p>Download the latest version (1.0.1) using either of the links below. Or download an older release via Github.</p>
|
||||
|
|
18
src/alerts.less
Normal file
18
src/alerts.less
Normal file
|
@ -0,0 +1,18 @@
|
|||
.alert{
|
||||
.border;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.make-alert-color-classes(@a: length(@colors)) when (@a > 0) {
|
||||
.make-alert-color-classes(@a - 1);
|
||||
@color: extract(@colors, @a);
|
||||
.alert-@{color} {
|
||||
border-color: @@color;
|
||||
color: @@color;
|
||||
background-color: ~"@{@{color}-light}";
|
||||
}
|
||||
}
|
||||
|
||||
.make-alert-color-classes();
|
|
@ -40,21 +40,6 @@
|
|||
.child-borders > * {
|
||||
border: 2px solid @primary;
|
||||
}
|
||||
.border-primary {
|
||||
border-color: @primary;
|
||||
}
|
||||
.border-secondary {
|
||||
border-color: @secondary;
|
||||
}
|
||||
.border-success {
|
||||
border-color: @success;
|
||||
}
|
||||
.border-warning {
|
||||
border-color: @warning;
|
||||
}
|
||||
.border-danger {
|
||||
border-color: @danger;
|
||||
}
|
||||
.border-white {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
@ -66,4 +51,14 @@
|
|||
}
|
||||
.border-thick {
|
||||
border-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.make-border-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-border-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.border-@{color} {
|
||||
border-color: @@color;
|
||||
}
|
||||
}
|
||||
|
||||
.make-border-color-classes();
|
||||
|
|
|
@ -5,44 +5,23 @@
|
|||
@warning: #ddcd45;
|
||||
@danger: #a7342d;
|
||||
|
||||
@main-colors: @primary, @secondary, @success, @warning, @danger;
|
||||
|
||||
@primary-light: lighten(@primary, 50%);
|
||||
@secondary-light: lighten(@secondary, 50%);
|
||||
@success-light: lighten(@success, 30%);
|
||||
@warning-light: lighten(@warning, 30%);
|
||||
@danger-light: lighten(@danger, 45%);
|
||||
|
||||
// Mixin to create colors from list
|
||||
.text-primary {
|
||||
color: @primary;
|
||||
}
|
||||
.text-secondary {
|
||||
color: @secondary;
|
||||
}
|
||||
.text-success {
|
||||
color: @success;
|
||||
}
|
||||
.text-warning {
|
||||
color: @warning;
|
||||
}
|
||||
.text-danger {
|
||||
color: @danger;
|
||||
}
|
||||
.background {
|
||||
&-primary {
|
||||
background-color: @primary-light;
|
||||
@colors: primary, secondary, success, warning, danger;
|
||||
|
||||
.make-text-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-text-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.text-@{color} {
|
||||
color: @@color;
|
||||
}
|
||||
&-secondary {
|
||||
background-color: @secondary-light;
|
||||
.background-@{color}{
|
||||
background-color: ~"@{@{color}-light}";
|
||||
}
|
||||
&-success {
|
||||
background-color: @success-light;
|
||||
}
|
||||
&-warning {
|
||||
background-color: @warning-light;
|
||||
}
|
||||
&-danger {
|
||||
background-color: @danger-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-text-color-classes();
|
||||
|
|
|
@ -13,4 +13,5 @@
|
|||
@import (less) "./tables.less";
|
||||
@import (less) "./images.less";
|
||||
@import (less) "./utilities.less";
|
||||
@import (less) "./popovers.less";
|
||||
@import (less) "./popovers.less";
|
||||
@import (less) "./alerts.less";
|
Loading…
Reference in a new issue