deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-08 00:42:20 +02:00
Code Issues Projects Releases Wiki Activity

Added muted color and fixed edgy badges corners

Browse source
This commit is contained in:
Thomas Cazade 2017-11-02 14:58:35 +01:00
parent 76007dfdeb
commit d1947ea764
3 changed files with 12 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/badges.less
View file

@ -1,6 +1,4 @@
.badge {
.border;
display: inline-block;
padding: .25em .4em;
font-size: 75%;
@ -9,9 +7,10 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #868e96;
background-color: @muted;
color: white;
border-color: transparent;
border: 2px solid transparent;
border-radius: 20px;
&.primary {
background-color: @primary;

20
src/cards.less
View file

@ -1,14 +1,11 @@
.card {
// Card border can't be changed with .border-x classes
// since we want to avoid the little blank space between
// image and border-top-left/right-radius, so we force
// the default border class and customize it on the img
.border;
.shadow;
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
border: 2px solid @muted-light;
.card-body {
flex: 1 1 auto;
@ -37,19 +34,10 @@
}
}
.image-bottom {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 255px 18px !important;
border-bottom-left-radius: 18px 225px !important;
}
.image-top,
.image-bottom,
img {
border: 0;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 255px 14px !important;
border-top-right-radius: 13px 225px !important;
border-radius: 0;
}
}

5
src/colors.less
View file

@ -4,6 +4,7 @@
@success: #86a361;
@warning: #ddcd45;
@danger: #a7342d;
@muted: #868e96;
@main-colors: @primary, @secondary, @success, @warning, @danger;
@ -12,6 +13,7 @@
@success-light: lighten(@success, 30%);
@warning-light: lighten(@warning, 30%);
@danger-light: lighten(@danger, 45%);
@muted-light: lighten(@muted, 35%);
// Mixin to create colors from list
.text-primary {
@ -45,4 +47,7 @@
&-danger {
background-color: @danger-light;
}
&-muted {
background-color: @muted-light;
}
}