dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ajout des badges. Distinction badges / tags

Browse source
This commit is contained in:
Raphael Goetter 2017-10-03 11:03:48 +02:00
parent 5af73cab2b
commit e460c7f2cb
4 changed files with 69 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
css/knacss-unminified.css
View file

@ -2456,62 +2456,53 @@ button:focus {
/* use .badge-- classes for variants */ /* use .badge-- classes for variants */
.badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost { .badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost {
display: inline-block; display: inline-block;
padding: 3px 0.5rem; padding: 0.5rem;
vertical-align: baseline; border-radius: 50%;
white-space: nowrap;
color: #000; color: #000;
border-radius: 0;
background-color: #F7F7F7; background-color: #F7F7F7;
line-height: 1; line-height: 1;
} }
.badge ::before, .badge--primary ::before, .badge--success ::before, .badge--info ::before, .badge--warning ::before, .badge--danger ::before, .badge--inverse ::before, .badge--ghost ::before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
.badge--primary { .badge--primary {
background-color: #0275D8; background-color: #0275D8;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--success { .badge--success {
background-color: #5CB85C; background-color: #5CB85C;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--info { .badge--info {
background-color: #5BC0DE; background-color: #5BC0DE;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--warning { .badge--warning {
background-color: #F0AD4E; background-color: #F0AD4E;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--danger { .badge--danger {
background-color: #D9534F; background-color: #D9534F;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--inverse { .badge--inverse {
background-color: #292B2C; background-color: #292B2C;
color: #fff; color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
} }
.badge--ghost { .badge--ghost {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
-webkit-box-shadow: 0 0 0 1px #fff inset;
box-shadow: 0 0 0 1px #fff inset;
} }
.badge--small { .badge--small {
@ -2522,11 +2513,6 @@ button:focus {
font-size: 1.8rem; font-size: 1.8rem;
} }
.badge--block {
width: 100% !important;
display: block;
}
.badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { .badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

18
sass/components/_badges.scss
View file

@ -5,13 +5,18 @@
.badge { .badge {
display: inline-block; display: inline-block;
padding: 3px $tiny-value; padding: $tiny-value;
vertical-align: baseline; border-radius: 50%;
white-space: nowrap;
color: $color-base; color: $color-base;
border-radius: $border-radius;
background-color: $color-muted; background-color: $color-muted;
line-height: 1; line-height: 1;
::before{
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
} }
.badge { .badge {
@ -20,7 +25,6 @@
@extend .badge; @extend .badge;
background-color: $background-color; background-color: $background-color;
color: $color; color: $color;
box-shadow: $border;
} }
} }
} }
@ -35,10 +39,6 @@
font-size: $base-font-size + 0.4rem; font-size: $base-font-size + 0.4rem;
} }
&--block {
width: 100% !important;
display: block;
}
&.disabled, &.disabled,
&--disabled { &--disabled {
opacity: 0.5; opacity: 0.5;

50
sass/components/_tags.scss Normal file
View file

@ -0,0 +1,50 @@
/* ----------------------------- */
/* ==Tags */
/* ----------------------------- */
/* use .tag-- classes for variants */
.tag {
display: inline-block;
padding: 3px $tiny-value;
vertical-align: baseline;
white-space: nowrap;
color: $color-base;
border-radius: $border-radius;
background-color: $color-muted;
line-height: 1;
}
.tag {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend .tag;
background-color: $background-color;
color: $color;
box-shadow: $border;
}
}
}
// tag state variants
.tag {
&--small {
font-size: $base-font-size - 0.4rem;
}
&--big {
font-size: $base-font-size + 0.4rem;
}
&--block {
width: 100% !important;
display: block;
}
&.disabled,
&--disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:empty {
display: none;
}
}