mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-11 04:07:55 +03:00
#822 - checkpoint on drawer documentation - more to do and a few bugs left to fix
This commit is contained in:
Kevin Ross
parent
bd8145b5d7
commit
887b266026
|
|
@ -19,6 +19,7 @@
|
|||
- title: Labels
|
||||
- title: Selections
|
||||
- title: Collapse inline
|
||||
- title: Drawers
|
||||
|
||||
- title: About
|
||||
pages:
|
||||
|
|
|
|||
|
|
@ -92,3 +92,4 @@ $bd-info: $brand-info; // #5bc0de;
|
|||
@import 'mdb/component-examples';
|
||||
@import 'mdb/clipboard-js';
|
||||
@import 'mdb/sidebar';
|
||||
@import 'mdb/drawer';
|
||||
|
|
|
|||
10
docs/assets/scss/mdb/_drawer.scss
Normal file
10
docs/assets/scss/mdb/_drawer.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.bd-example[data-example-id*="drawer-"] {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
min-height: 235px;
|
||||
}
|
||||
|
||||
.bd-example[data-example-id*="drawer-1"] {
|
||||
min-height: 350px; // make first example bigger
|
||||
}
|
||||
|
|
@ -41,14 +41,8 @@ a, a:hover {
|
|||
.mdb-layout-drawer {
|
||||
background-color: $blue-grey-900;
|
||||
color: $blue-grey-50;
|
||||
font-size: .875rem;
|
||||
|
||||
> header {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 16px;
|
||||
height: 151px;
|
||||
|
||||
.avatar {
|
||||
|
|
@ -78,16 +72,11 @@ a, a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.mdb-nav {
|
||||
flex-grow: 1;
|
||||
> .list-group {
|
||||
background-color: $blue-grey-800;
|
||||
z-index: -2;
|
||||
|
||||
.list-group-item {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
font-size: .8125rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ js: example.js
|
|||
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
|
|
@ -60,10 +60,10 @@ js: example.js
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="nav-extras-menu" data-toggle="dropdown" aria-haspopup="true" >
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu" data-toggle="dropdown" aria-haspopup="true" >
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-extras-menu">
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu">
|
||||
<button class="dropdown-item" type="button">About</button>
|
||||
<button class="dropdown-item" type="button">Contact</button>
|
||||
<button class="dropdown-item" type="button">Legal information</button>
|
||||
|
|
@ -91,7 +91,7 @@ js: example.js
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="mdb-nav list-group">
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">home</i>Home
|
||||
</a>
|
||||
|
|
|
|||
73
docs/examples/drawer/index.html
Normal file
73
docs/examples/drawer/index.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
layout: example
|
||||
title: Drawer Template
|
||||
group: material-design
|
||||
---
|
||||
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#dw-1">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item">
|
||||
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
|
||||
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search-1" aria-controls="collapse-search-1">
|
||||
<i class="material-icons">search</i>
|
||||
</button>
|
||||
<span id="collapse-search-1" class="collapse">
|
||||
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu-1" data-toggle="dropdown" aria-haspopup="true">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu-1">
|
||||
<button class="dropdown-item" type="button">About</button>
|
||||
<button class="dropdown-item" type="button">Contact</button>
|
||||
<button class="dropdown-item" type="button">Legal information</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="dw-1" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">home</i>Home
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">inbox</i>Inbox
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">delete</i>Trash
|
||||
</a>
|
||||
|
||||
<li class="mdb-layout-spacer"></li>
|
||||
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<!-- main content -->
|
||||
<h2>Responsive drawer template</h2>
|
||||
<p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens.</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -13,6 +13,11 @@ Templates that give a quick structural start to using Material Design for Bootst
|
|||
<p class="card-text">Nothing but the basics: compiled CSS and JavaScript.</p>
|
||||
<a href="{{ site.baseurl }}/examples/starter-template/" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Responsive Drawer Template</h4>
|
||||
<p class="card-text">Responsive fixed left drawer with a fixed top navigation</p>
|
||||
<a href="{{ site.baseurl }}/examples/drawer/" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Dashboard</h4>
|
||||
<p class="card-text">Dashboard with a drawer</p>
|
||||
|
|
|
|||
303
docs/material-design/drawers.md
Normal file
303
docs/material-design/drawers.md
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Drawers
|
||||
group: material-design
|
||||
---
|
||||
|
||||
The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any `position: relative` containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Overview
|
||||
|
||||
### Templates and examples
|
||||
|
||||
The following examples provide a good starting point:
|
||||
|
||||
- [Drawer template]({{ site.baseurl }}/examples/dashboard/) is a basic fully responsive template.
|
||||
- [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.
|
||||
|
||||
### Markup
|
||||
|
||||
In order to use the drawer component, MDB has created the following flex based layout structure:
|
||||
|
||||
{% highlight html %}
|
||||
<div class="mdb-layout-container">
|
||||
<header class="mdb-layout-header"> </header>
|
||||
<div class="mdb-layout-drawer"> </div>
|
||||
<main class="mdb-layout-content"> </main>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
## Positions
|
||||
|
||||
### Classes
|
||||
|
||||
The following positioning marker classes should be placed on the `mdb-layout-container` element:
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Classes</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-drawer-f-t</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Fixed top{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-drawer-f-r</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Fixed right{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-drawer-f-b</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Fixed bottom{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-drawer-f-l</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Fixed left{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### Fixed left
|
||||
|
||||
{% example html id=drawer-p1 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-p1" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<!-- main content -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Fixed right
|
||||
|
||||
{% example html id=drawer-p2 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-r mdb-drawer-overlay">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-p2" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<!-- main content -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Fixed top
|
||||
|
||||
{% example html id=drawer-p3 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-t mdb-drawer-overlay">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-p3" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<!-- main content -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Fixed bottom
|
||||
|
||||
{% example html id=drawer-p4 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-b mdb-drawer-overlay">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-p4" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<!-- main content -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Styles
|
||||
|
||||
### Push
|
||||
|
||||
The default behavior is for content to be pushed.
|
||||
{% example html id=drawer-s1 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-l">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-s1" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<p>Main content</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Overlay
|
||||
Optional behavior will overlay the drawer and provide a backdrop:
|
||||
{% example html id=drawer-s2 %}
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">Title</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dw-s2" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<a class="navbar-brand">Title</a>
|
||||
</header>
|
||||
<ul class="mdb-nav-x list-group">
|
||||
<a class="list-group-item">Link 1</a>
|
||||
<a class="list-group-item">Link 2</a>
|
||||
<a class="list-group-item">Link 3</a>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<p>Main content</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Responsiveness vs Static
|
||||
|
||||
### Static
|
||||
in
|
||||
out
|
||||
overlay
|
||||
|
||||
### Responsive in
|
||||
|
||||
### Responsive overlay
|
||||
|
||||
|
||||
## Customization
|
||||
|
||||
## Variables
|
||||
|
||||
## Using mixins
|
||||
|
|
@ -4,77 +4,8 @@ title: Test
|
|||
group: material-design
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
{% example html %}
|
||||
|
||||
<h2>Normal navbar</h2>
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Flex navbar</h2>
|
||||
With flex enabled on a navbar (and with compiled flex-enabled css), the nav elements do not inline.
|
||||
|
||||
<style>
|
||||
.flexyflexflex {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flexyflexflex form {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded flexyflexflex">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% example html id=drawer-1 %}
|
||||
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
flex-wrap: nowrap;
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
font-size: .875rem;
|
||||
color: $mdb-layout-drawer-text-color;
|
||||
background: $mdb-layout-drawer-bg-color;
|
||||
|
||||
|
|
@ -26,10 +27,34 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdb-nav {
|
||||
// Placement of common components within the drawer
|
||||
// You might say this is opinionated - feedback welcome.
|
||||
> header {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem;
|
||||
|
||||
.navbar-brand {
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-top: 1rem;
|
||||
flex-grow: 1;
|
||||
//z-index: -2;
|
||||
|
||||
.list-group-item {
|
||||
padding-right: 2.5rem;
|
||||
padding-left: 2.5rem;
|
||||
font-size: .8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,13 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
//outline: 1px dotted;
|
||||
//outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
|
||||
//// Prevent highlight on mobile
|
||||
//* {
|
||||
// -webkit-tap-highlight-color: rgba($white, 0);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user