diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 7733ca2..45bd734 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -5,7 +5,7 @@ // ---------------- // Warning: you should use your own values, regardless of the devices -// Best practise is Mobile First: (min-width: $breakpoint) +// Best practice is Mobile First: (min-width: $breakpoint) $tiny : 480px !default; // or 'em' if you prefer, of course $small : 576px !default; $medium : 768px !default; diff --git a/sass/_library/_layout.scss b/sass/_library/_layout.scss index ec35e64..cd51a4f 100644 --- a/sass/_library/_layout.scss +++ b/sass/_library/_layout.scss @@ -8,7 +8,7 @@ overflow: hidden; } -/* blocks that needs to be placed under floats */ +/* blocks that need to be placed under floats */ .clear { clear: both; } diff --git a/sass/_library/grillade-flex.scss b/sass/_library/grillade-flex.scss index eb6cadd..6bcb9c6 100644 --- a/sass/_library/grillade-flex.scss +++ b/sass/_library/grillade-flex.scss @@ -7,7 +7,7 @@ // Responsive breakpoints variables // Warning : you should use your own values, regardless of the devices -// Best practise : (max-width: ($BP - 1)) and (min-width: $BP) +// Best practice : (max-width: ($BP - 1)) and (min-width: $BP) $tiny: 480px !default; // or 'em' if you prefer, of course $small: 576px !default; diff --git a/sass/_library/grillade-grid.scss b/sass/_library/grillade-grid.scss index 5e204e4..f205a31 100644 --- a/sass/_library/grillade-grid.scss +++ b/sass/_library/grillade-grid.scss @@ -87,6 +87,7 @@ $medium: 768px !default; grid-column: auto / span #{$i}; } } + [class*="-small-all"] { grid-column: 1 / -1; } diff --git a/sass/components/_alerts.scss b/sass/components/_alerts.scss index 1628a65..e422264 100644 --- a/sass/components/_alerts.scss +++ b/sass/components/_alerts.scss @@ -42,11 +42,13 @@ width: 100% !important; display: block; } + &.disabled, &--disabled { opacity: 0.5; cursor: not-allowed; } + &:empty { display: none; } diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss index 3562d89..53805e2 100644 --- a/sass/components/_badges.scss +++ b/sass/components/_badges.scss @@ -44,6 +44,7 @@ opacity: 0.5; cursor: not-allowed; } + &:empty { display: none; } diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index e79ba3d..d1acb32 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -90,8 +90,8 @@ button { } // nav "burger" button -// active it with a JS toggle-class to .is-active -// recommanded HTML : +// activate it with a JS toggle-class to .is-active +// recommended HTML : // see doc : https://knacss.com/styleguide.html#buttons .nav-button { padding: 0; @@ -141,7 +141,6 @@ button { } &.is-active { - & > * { background-image: none; justify-content: center; @@ -149,6 +148,7 @@ button { &::before { transform: translateY(50%) rotate3d(0,0,1,45deg); } + &::after { transform: translateY(-50%) rotate3d(0,0,1,-45deg); } diff --git a/sass/components/_checkbox.scss b/sass/components/_checkbox.scss index 5358d3f..4ead9f7 100644 --- a/sass/components/_checkbox.scss +++ b/sass/components/_checkbox.scss @@ -2,9 +2,9 @@ /* ==Checkbox, radio, switch */ /* ----------------------------- */ /* use .checkbox class on input type=checkbox */ -/* recommanded HTML : */ +/* recommended HTML : */ /* use .radio class on input type=radio */ -/* recommanded HTML : */ +/* recommended HTML : */ /* use .switch class on input type=checkbox */ // @@ -31,7 +31,7 @@ box-shadow: inset 0 0 0 1px $checkbox-color; background: #fff; - ~ label { + & ~ label { cursor: pointer; } @@ -48,17 +48,21 @@ font-size: 60%; box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color; transition: box-shadow .15s; + &::before, &::after { font-weight: bold; color: #fff; } + &::before { content: "✕"; float: right; margin-right: $switch-size /3; - } + } + &:checked { box-shadow: inset #{$switch-size} 0 0 $color-success, inset 0 0 0 1px $color-success; + &::before { content: "✓"; float: left; @@ -73,6 +77,7 @@ width: $checkbox-size; height: $checkbox-size; transition: background-color .15s; + &:checked { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo="); background-size: 60% 60%; @@ -87,6 +92,7 @@ width: $checkbox-size; height: $checkbox-size; transition: background-color .15s; + &:checked { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E"); background-size: 80% 80%; diff --git a/sass/components/_media.scss b/sass/components/_media.scss index 30cbee7..74634bc 100644 --- a/sass/components/_media.scss +++ b/sass/components/_media.scss @@ -1,7 +1,7 @@ /* ----------------------------- */ /* ==Media object */ /* ----------------------------- */ -/* recommanded HTML :
*/ +/* recommended HTML :
*/ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ @media (min-width: $tiny) { @@ -17,6 +17,7 @@ &-figure--center { align-self: center; } + // reverse variant &--reverse { flex-direction: row-reverse; diff --git a/sass/components/_tables.scss b/sass/components/_tables.scss index 62f174f..86be778 100644 --- a/sass/components/_tables.scss +++ b/sass/components/_tables.scss @@ -40,6 +40,7 @@ table, text-align: left; cursor: default; } + & thead { color: $table-head-color; background: $table-head-background; diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss index cd7a1a0..7807ca1 100644 --- a/sass/components/_tabs.scss +++ b/sass/components/_tabs.scss @@ -4,7 +4,6 @@ /* see example on https://knacss.com/styleguide.html#tabs */ /* NOTE : tabs need JavaScript to be activated */ - .tabs-menu { border-bottom: 2px solid $tabs-border; diff --git a/sass/components/_tags.scss b/sass/components/_tags.scss index 18c5574..fb8866e 100644 --- a/sass/components/_tags.scss +++ b/sass/components/_tags.scss @@ -39,11 +39,13 @@ width: 100% !important; display: block; } + &.disabled, &--disabled { opacity: 0.5; cursor: not-allowed; } + &:empty { display: none; } diff --git a/sass/knacss.scss b/sass/knacss.scss index 880f04c..f5bea6a 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -42,12 +42,12 @@ @import "_library/base"; // basic styles @import "_library/print"; // print quick reset @import "_library/layout"; // alignment, modules, positionning -@import "_library/utilities"; // width and spacers helpers +@import "_library/utilities"; // width and spacer helpers @import "_library/responsive"; // Responsive Web Design helpers // @import "_library/wordpress"; // WordPress reset and basic styles // New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex" -// Note that none of these file is prefixed by an underscore, in order to compile them. +// Note that none of these files are prefixed by an underscore, in order to compile them. @import "_library/grillade-grid"; // grid system with Grid Layout // Components