Breadcrumbs update, todo list for utility module

This commit is contained in:
Angelos Chalaris 2016-12-10 13:13:50 +02:00
parent 624ab29059
commit 3914f5ebc7
5 changed files with 18 additions and 6 deletions

View file

@ -1228,8 +1228,9 @@ ul.breadcrumbs {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
list-style: none; list-style: none;
margin-left: 0; margin: 10px 8px;
margin-right: 0; /* margin-left: 0; // Reset margins from list styling
margin-right: 0; // Reset margins from list styling*/
padding: 0; padding: 0;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); } box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }

File diff suppressed because one or more lines are too long

View file

@ -628,3 +628,6 @@
- Basic documentation and syntax explanation of `tab` module. - Basic documentation and syntax explanation of `tab` module.
- Added documentation for `stacked` `tab`s in `tab` module doc page. Module documentation complete. - Added documentation for `stacked` `tab`s in `tab` module doc page. Module documentation complete.
- `playground` cleanup, only `utility` module remains there now. - `playground` cleanup, only `utility` module remains there now.
- Added `$breadcrumbs-margin` and updated accordingly to actually use a proper `margin` value if one is speciified, otherwise it will apply the resets.
- *TODO* Add responsive margin and responsive padding mixins in `utility`.
- *TODO* Add circular fixed size elements with close and dropdown icon that will change background color from opacity 0.00 to 1 (transitioned) when hovered over, selected, active etc.

View file

@ -466,6 +466,7 @@ $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements $visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs $breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
$breadcrumbs-height: 32px; // Height of the breadcrumbs $breadcrumbs-height: 32px; // Height of the breadcrumbs
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator $breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
$breadcrumbs-border-style: 0; // Border style for breadcrumbs $breadcrumbs-border-style: 0; // Border style for breadcrumbs

View file

@ -23,9 +23,16 @@ ul.#{$breadcrumbs-name} {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
list-style: none; list-style: none;
// TODO: ADD MARGIN-TOP WITH A VARIABLE TO MAKE THIS BETTER SPACED, MAYBE ALSO MARGIN-BOTTOM! // Apply margin from styling
margin-left: 0; // Reset margins from list styling @if $breadcrumbs-margin != 0 {
margin-right: 0; // Reset margins from list styling margin: $breadcrumbs-margin;
}
@else { // Reset margins from list styling
margin-left: 0;
margin-right: 0;
}
/* margin-left: 0; // Reset margins from list styling
margin-right: 0; // Reset margins from list styling*/
padding: 0; // Remove unnecessary left and right empty space padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 { @if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style; border: $breadcrumbs-border-style;