mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity

Drawer component

Browse Source 
Rebuilt, working better than ever.
This commit is contained in:
Angelos Chalaris
2017-11-08 22:30:23 +02:00
parent 9ea6a68988
commit 50a50908ef
5 changed files with 232 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v3/DEVLOG.md
View File

@@ -122,3 +122,5 @@
- Styled `.logo` in `header`. The styling is now far simpler and easier to use. - Styled `.logo` in `header`. The styling is now far simpler and easier to use.
- Removed `display:block` fix from `nav` as it was targeting IE 9-. - Removed `display:block` fix from `nav` as it was targeting IE 9-.
- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`. - Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
- Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell.
- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).

5
docs/v3_dev/src/App.js
View File

@@ -9,11 +9,12 @@ class App extends Component {
<button id='button'>Docs</button> <button id='button'>Docs</button>
<a class='button' href='#'>Get started</a> <a class='button' href='#'>Get started</a>
<input class='button' type='submit' value='github' /> <input class='button' type='submit' value='github' />
{/*<label htmlFor="doc-drawer-checkbox" className="button drawer-toggle hide"></label>*/} <label htmlFor="doc-drawer-checkbox" className="button drawer-toggle">menu</label>
</header> </header>
<div className="row" id="doc-wrapper"> <div className="row" id="doc-wrapper">
<input type="checkbox" id="doc-drawer-checkbox" /> <input type="checkbox" id="doc-drawer-checkbox" class="drawer" />
<nav> <nav>
<label htmlFor="doc-drawer-checkbox" className="drawer-close"></label>
<a href="#">Home</a> <a href="#">Home</a>
<span>News</span> <span>News</span>
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">New Courses</a>

198
docs/v3_dev/src/index.css
View File

@@ -778,6 +778,9 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
--nav-hover-back-color: #f0f0f0; --nav-hover-back-color: #f0f0f0;
--nav-fore-color: #444; --nav-fore-color: #444;
--nav-border-color: #ddd; --nav-border-color: #ddd;
--drawer-back-color: #f8f8f8;
--drawer-hover-back-color: #f0f0f0;
--drawer-border-color: #ddd;
} }
header { header {
@@ -827,7 +830,6 @@ nav {
border: 0.0625rem solid var(--nav-border-color); border: 0.0625rem solid var(--nav-border-color);
border-radius: var(--universal-border-radius); border-radius: var(--universal-border-radius);
margin: var(--universal-margin); margin: var(--universal-margin);
padding: 0;
} }
nav * { nav * {
@@ -890,6 +892,96 @@ footer.sticky {
bottom: 0; bottom: 0;
} }
.drawer-toggle:before {
display: inline-block;
position: relative;
width: 24px;
height: 24px;
vertical-align: text-top;
content: '';
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
}
@media screen and (min-width: 768px) {
.drawer-toggle:not(.persistent) {
display: none;
}
}
[type="checkbox"].drawer {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
[type="checkbox"].drawer + * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: var(--drawer-back-color);
border: 0.0625rem solid var(--drawer-border-color);
border-radius: 0;
margin: 0;
z-index: 1110;
right: -320px;
transition: right 0.3s;
}
[type="checkbox"].drawer + * .drawer-close {
position: absolute;
top: var(--universal-margin);
right: var(--universal-margin);
z-index: 1111;
border-radius: var(--universal-border-radius);
padding: var(--universal-padding);
margin: 0;
cursor: pointer;
transition: background 0.3s;
}
[type="checkbox"].drawer + * .drawer-close:before {
display: block;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
content: '';
position: relative;
width: 24px;
height: 24px;
}
[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
background: var(--drawer-hover-back-color);
}
@media screen and (max-width: 320px) {
[type="checkbox"].drawer + * {
width: 100%;
}
}
[type="checkbox"].drawer:checked + * {
right: 0;
}
@media screen and (min-width: 768px) {
[type="checkbox"].drawer:not(.persistent) + * {
position: static;
height: 100%;
z-index: 1100;
}
[type="checkbox"].drawer:not(.persistent) + * .drawer-close {
display: none;
}
}
:not(.doc) { :not(.doc) {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
} }
@@ -1018,110 +1110,6 @@ p.splash {
cursor: pointer; cursor: pointer;
} }
[type="checkbox"], [type="radio"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
.drawer-toggle:before {
position: relative;
top: 0.4375rem;
font-family: sans-serif;
font-size: 2.5rem;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #eceff1;
border: 0.0625rem solid #c9c9c9;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 0.75rem;
right: 0.25rem;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
:checked + .drawer:not(.right) {
left: 0;
}
:checked + .drawer.right {
right: 0;
}
.close {
display: inline-block;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(230, 230, 230, 0);
vertical-align: top;
cursor: pointer;
transition: background 0.3s;
}
.close:hover, .close:focus {
background: #e6e6e6;
}
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
#root, #App { #root, #App {
height: 100vh; height: 100vh;
} }

105
src/flavors/mini-doc.scss
View File

@@ -126,111 +126,6 @@ p.splash {
} }
} }
[type="checkbox"], [type="radio"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
.drawer-toggle:before {
position: relative;
top: 0.4375rem;
font-family: sans-serif;
font-size: 2.5rem;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #eceff1;
border: 0.0625rem solid #c9c9c9;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 0.75rem;
right: 0.25rem;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
:checked + .drawer:not(.right) {
left: 0;
}
:checked + .drawer.right {
right: 0;
}
.close {
display: inline-block;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(230, 230, 230, 0);
vertical-align: top;
cursor: pointer;
transition: background 0.3s;
}
.close:hover, .close:focus {
background: #e6e6e6;
}
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
#root, #App { #root, #App {
height: 100vh; height: 100vh;
} }

140
src/mini/_navigation.scss
View File

@@ -7,10 +7,13 @@ $header-back-color: #f8f8f8 !default; // Background color for the header
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover). $header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
$header-fore-color: #444 !default; // Text color for the header element. $header-fore-color: #444 !default; // Text color for the header element.
$header-border-color: #ddd !default; // Border color for the header element. $header-border-color: #ddd !default; // Border color for the header element.
$nav-back-color: #f8f8f8 !default; // Background color for the header element. $nav-back-color: #f8f8f8 !default; // Background color for the nav element.
$nav-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover). $nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
$nav-fore-color: #444 !default; // Text color for the header element. $nav-fore-color: #444 !default; // Text color for the nav element.
$nav-border-color: #ddd !default; // Border color for the header element. $nav-border-color: #ddd !default; // Border color for the nav element.
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
$drawer-border-color: #ddd !default; // Border color for the drawer component.
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean) $_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean) $_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
$header-logo-name: 'logo' !default; // Class name for the header logo element. $header-logo-name: 'logo' !default; // Class name for the header logo element.
@@ -18,6 +21,14 @@ $header-logo-font-size: 1.75rem !default; // Font ize for the header logo ele
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav. $nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add. $nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers. $sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
// CSS variable name definitions [exercise caution if modifying these] // CSS variable name definitions [exercise caution if modifying these]
$header-fore-color-var: '--header-fore-color' !default; $header-fore-color-var: '--header-fore-color' !default;
$header-back-color-var: '--header-back-color' !default; $header-back-color-var: '--header-back-color' !default;
@@ -27,6 +38,25 @@ $nav-fore-color-var: '--nav-fore-color' !default;
$nav-back-color-var: '--nav-back-color' !default; $nav-back-color-var: '--nav-back-color' !default;
$nav-hover-back-color-var: '--nav-hover-back-color' !default; $nav-hover-back-color-var: '--nav-hover-back-color' !default;
$nav-border-color-var: '--nav-border-color' !default; $nav-border-color-var: '--nav-border-color' !default;
$drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
// Necessary functions for certain elements (mainly the icons used for the drawer)
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
/// -----------------------------------------------------------------------
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/* Navigation module CSS variable definitions */ /* Navigation module CSS variable definitions */
:root { :root {
#{$header-back-color-var}: $header-back-color; #{$header-back-color-var}: $header-back-color;
@@ -37,6 +67,9 @@ $nav-border-color-var: '--nav-border-color' !default;
#{$nav-hover-back-color-var}: $nav-hover-back-color; #{$nav-hover-back-color-var}: $nav-hover-back-color;
#{$nav-fore-color-var}: $nav-fore-color; #{$nav-fore-color-var}: $nav-fore-color;
#{$nav-border-color-var}: $nav-border-color; #{$nav-border-color-var}: $nav-border-color;
#{$drawer-back-color-var}: $drawer-back-color;
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
#{$drawer-border-color-var}: $drawer-border-color;
} }
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any. // Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
header { header {
@@ -93,7 +126,6 @@ nav {
border: $__1px solid var(#{$nav-border-color-var}); border: $__1px solid var(#{$nav-border-color-var});
border-radius: var(#{$universal-border-radius-var}); border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var}); margin: var(#{$universal-margin-var});
padding: 0;
@if $universal-box-shadow != none { @if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var}); box-shadow: var(#{$universal-box-shadow-var});
} }
@@ -107,7 +139,7 @@ nav {
transition: background 0.3s; transition: background 0.3s;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
background: var(#{$a-hover-back-color-var}); background: var(#{$nav-hover-back-color-var});
} }
} }
// Subcategories in navigation. // Subcategories in navigation.
@@ -141,3 +173,99 @@ footer.#{$sticky-name} {
z-index: 1101; // Deals with certain problems when combined with cards and tables. z-index: 1101; // Deals with certain problems when combined with cards and tables.
bottom: 0; bottom: 0;
} }
// Responsive drawer component.
.#{$drawer-toggle-name} {
&:before {
display: inline-block;
position: relative;
width: 24px;
height: 24px;
vertical-align: text-top;
content: '';
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) {
display: none;
}
}
}
[type="checkbox"].#{$drawer-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: var(#{$drawer-back-color-var});
border: $__1px solid var(#{$drawer-border-color-var});
border-radius: 0; // Set to 0 to override the value from `nav`.
margin: 0; // Set to 0 to override the value from `nav`.
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
z-index: 1110;
@if $_drawer-right {
right: -$drawer-width;
transition: right 0.3s;
}
@else {
left: -$drawer-width;
transition: left 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: var(#{$universal-margin-var});
right: var(#{$universal-margin-var});
z-index: 1111;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0; // Fixes the offset from label
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
content: '';
position: relative;
width: 24px;
height: 24px;
}
&:hover, &:focus {
background: var(#{$drawer-hover-back-color-var});
}
}
@media screen and (max-width: #{$drawer-width}) {
width: 100%;
}
}
&:checked + * {
@if $_drawer-right {
right: 0;
}
@else {
left: 0;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) + * {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
}
}