fuck css frameworks
This commit is contained in:
Joe Ardent
parent
bc9f5c29cb
commit
bdd826b2f1
|
|
@ -1,26 +0,0 @@
|
|||
Portions of this content are used under the terms of the MIT license.
|
||||
|
||||
|
||||
https://github.com/franciscop/picnic
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Francisco Presencia
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
//! Picnic CSS http://www.picnicss.com/
|
||||
|
||||
// Loads the Sass Math Module
|
||||
@use 'sass:math';
|
||||
|
||||
// Imports the base variable styles
|
||||
@import './themes/default/theme';
|
||||
|
||||
@import './vendor/compass-breakpoint/stylesheets/breakpoint';
|
||||
|
||||
// Normalize.css (external library)
|
||||
@import './plugins/normalize/plugin';
|
||||
|
||||
// Generic styles for things like <body>, <a> and others
|
||||
// It also overwrites normalize.css a bit
|
||||
@import './plugins/generic/plugin';
|
||||
@import './plugins/fontello/plugin';
|
||||
|
||||
// Simple elements
|
||||
@import './plugins/label/plugin';
|
||||
@import './plugins/button/plugin';
|
||||
|
||||
// Forms
|
||||
@import './plugins/input/plugin';
|
||||
@import './plugins/select/plugin';
|
||||
@import './plugins/radio/plugin';
|
||||
@import './plugins/checkbox/plugin';
|
||||
|
||||
// Components
|
||||
@import './plugins/table/plugin';
|
||||
@import './plugins/grid/plugin';
|
||||
|
||||
// Extra
|
||||
@import './plugins/nav/plugin';
|
||||
|
||||
@import './plugins/stack/plugin';
|
||||
@import './plugins/card/plugin';
|
||||
@import './plugins/modal/plugin';
|
||||
|
||||
@import './plugins/dropimage/plugin';
|
||||
@import './plugins/tabs/plugin';
|
||||
@import './plugins/tooltip/plugin';
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// %button
|
||||
// This class defines a clickable element that looks like a label
|
||||
|
||||
|
||||
|
||||
// Variables
|
||||
$picnic-button-margin: math.div($picnic-separation, 2) 0 !default;
|
||||
$picnic-button-padding: $picnic-label-padding !default;
|
||||
$picnic-button-hover: inset 0 0 0 99em rgba($picnic-white, $picnic-transparency) !default;
|
||||
$picnic-button-click: inset 0 0 0 99em rgba($picnic-black, $picnic-transparency) !default;
|
||||
$picnic-button-pseudo-hover: inset 0 0 0 99em rgba($picnic-black, math.div($picnic-transparency, 2)) !default;
|
||||
$picnic-button-transition: $picnic-transition !default;
|
||||
$picnic-button-radius: $picnic-label-radius !default;
|
||||
|
||||
|
||||
|
||||
// Definition
|
||||
%button {
|
||||
@extend %label;
|
||||
|
||||
margin: $picnic-button-margin;
|
||||
cursor: pointer;
|
||||
transition: $picnic-button-transition;
|
||||
border-radius: $picnic-button-radius;
|
||||
|
||||
// Avoid the input { height: 2.2 }
|
||||
height: auto;
|
||||
vertical-align: baseline;
|
||||
|
||||
// This avoids a nasty "hover" issue (slightly taller on hover)
|
||||
box-shadow: 0 0 rgba($picnic-black, 0) inset;
|
||||
|
||||
// Methods
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $picnic-button-hover;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.pseudo:hover,
|
||||
&.pseudo:focus {
|
||||
box-shadow: $picnic-button-pseudo-hover;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&.pseudo:active {
|
||||
box-shadow: $picnic-button-click;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
background: $picnic-dull;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// // Note: If you try to do this there's a selector explossion:
|
||||
|
||||
// &%hover {
|
||||
// box-shadow: $picnic-button-hover;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// @extend %hover;
|
||||
// }
|
||||
|
||||
// Like `button.button:hover, .button[type="submit"], ...`
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// Inherit from the class
|
||||
@import 'class';
|
||||
|
||||
|
||||
// For the toggle buttons
|
||||
:checked + .toggle,
|
||||
:checked + .toggle:hover {
|
||||
box-shadow: $picnic-button-click;
|
||||
}
|
||||
|
||||
// Hide the checkbox/radiobutton
|
||||
// Handle with care
|
||||
[type] + .toggle {
|
||||
padding: $picnic-button-padding;
|
||||
margin-right: 0;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Implement the abstract class for real elements
|
||||
button,
|
||||
.button,
|
||||
[type=submit] {
|
||||
@extend %button;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "button",
|
||||
"name": "Button",
|
||||
"included": true,
|
||||
"affected": "button, .button, [type=submit]",
|
||||
"summary": "An element that looks like it can be clicked and will perform some action."
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
## Buttons
|
||||
|
||||
They can be of different colors and types:
|
||||
|
||||
```html
|
||||
<button>Button</button>
|
||||
<button class='success'>Success</button>
|
||||
<button class='warning'>Warning</button>
|
||||
<button class='error'>Error</button>
|
||||
<button disabled>Disabled</button>
|
||||
```
|
||||
|
||||
```html
|
||||
<button>Button</button>
|
||||
<a class="button">Link</a>
|
||||
<input value="Submit" type="submit">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="toggle button">Toggle</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
|
||||
### Pseudo buttons
|
||||
|
||||
Allows for seemingly links to behave as buttons:
|
||||
|
||||
```html
|
||||
<button class="pseudo">Button</button>
|
||||
<a class="pseudo button">Link</a>
|
||||
<input class="pseudo" value="Submit" type="submit">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="toggle pseudo button">Toggle</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
|
||||
### Hack it
|
||||
|
||||
You only have to define a single color base for new colors. The `:hover` and `:active` status are handled as overlays for consistency and simplicity
|
||||
|
||||
```html
|
||||
<button class="myCoolButton">My Cool Button</button>
|
||||
```
|
||||
|
||||
```css
|
||||
.myCoolButton {
|
||||
background: #85144b;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
To create a larger button you only need to make the font inside it larger. The paddings are set in *em* so the whole button stays in great shape:
|
||||
|
||||
```html
|
||||
<button class="mainButton">Large button</button><br>
|
||||
<button>Normal button</button><br>
|
||||
<button class="shyButton">Small button</button>
|
||||
```
|
||||
|
||||
```css
|
||||
.mainButton {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.shyButton {
|
||||
font-size: .75em;
|
||||
}
|
||||
```
|
||||
|
||||
To change the color of the pseudo-color on hover:
|
||||
|
||||
```html
|
||||
<button class="pseudo cool">Pseudo personal</button>
|
||||
```
|
||||
|
||||
```css
|
||||
.cool:hover,
|
||||
.cool:active,
|
||||
.cool:focus {
|
||||
background: #cff;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!-- Testing the module -->
|
||||
<h2 id="button">Button types and colors</h2>
|
||||
|
||||
<div>
|
||||
<button>Button</button>
|
||||
<button class="success">Button</button>
|
||||
<button class="warning">Button</button>
|
||||
<button class="error" >Button</button>
|
||||
<button class="pseudo">Button</button>
|
||||
<button disabled>Button</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button">Link</a>
|
||||
<a class="button success">Link</a>
|
||||
<a class="button warning">Link</a>
|
||||
<a class="button error">Link</a>
|
||||
<a class="button pseudo">Link</a>
|
||||
<a class="button" disabled>Link</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value = "Submit" />
|
||||
<input type="submit" class="success" value="Submit" />
|
||||
<input type="submit" class="warning" value="Submit" />
|
||||
<input type="submit" class="error" value="Submit" />
|
||||
<input type="submit" class="pseudo" value="Submit" />
|
||||
<input disabled type="submit" value="Submit" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<span class="toggle button">Toggle</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<span class="toggle button success">Toggle</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<span class="toggle button warning">Toggle</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<span class="toggle button error">Toggle</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<span class="toggle button pseudo">Toggle</span>
|
||||
</label>
|
||||
<label>
|
||||
<input disabled type="checkbox" />
|
||||
<span disabled class="toggle button">Toggle</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
// Card
|
||||
// This represents a self-contained, replicable entity
|
||||
|
||||
// Variables
|
||||
$picnic-card-shadow: none !default;
|
||||
$picnic-card-border: $picnic-border !default;
|
||||
$picnic-card-radius: $picnic-radius !default;
|
||||
|
||||
|
||||
|
||||
// Styles
|
||||
|
||||
// http://8gramgorilla.com/mastering-sass-extends-and-placeholders/
|
||||
%card {
|
||||
|
||||
position: relative;
|
||||
box-shadow: $picnic-card-shadow;
|
||||
border-radius: $picnic-card-radius;
|
||||
border: $picnic-card-border;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
background: $picnic-white;
|
||||
margin-bottom: $picnic-separation;
|
||||
padding: 0;
|
||||
transition: all .3s ease;
|
||||
|
||||
&.hidden,
|
||||
:checked + & {
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Make sure that nothing overflows
|
||||
> * {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// The first part from the card
|
||||
header,
|
||||
section,
|
||||
> p {
|
||||
padding: .6em .8em;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: .6em .8em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: $picnic-dull;
|
||||
}
|
||||
|
||||
header {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
border-bottom: 1px solid $picnic-dull;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding: 0;
|
||||
margin: 0 2em 0 0;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: .8em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: math.div($picnic-separation, 2) 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-right: 2.5em;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
right: .3em;
|
||||
font-size: 1.2em;
|
||||
padding: 0 .5em;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
&:hover {
|
||||
color: $picnic-error;
|
||||
}
|
||||
}
|
||||
|
||||
h1 + .close {
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
h2 + .close {
|
||||
margin: .1em;
|
||||
}
|
||||
|
||||
.dangerous {
|
||||
background: $picnic-error;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Definition of card
|
||||
@import 'class';
|
||||
|
||||
// Implementation of card
|
||||
.card {
|
||||
@extend %card;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "card",
|
||||
"name": "Card",
|
||||
"included": false,
|
||||
"affected": ".card",
|
||||
"summary": "A self-contained, independent element. It works great with others of its kind."
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
## Card
|
||||
|
||||
A card is a self-contained, replicable type. It works great with other of its kind. It can consist of only one element or many of them:
|
||||
|
||||
```html
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>A really simple h3</h3>
|
||||
</header>
|
||||
</article>
|
||||
```
|
||||
|
||||
```html
|
||||
<article class="card">
|
||||
<header>
|
||||
<button>Love</button>
|
||||
<button class="dangerous">Hate</button>
|
||||
</header>
|
||||
</article>
|
||||
```
|
||||
|
||||
```html
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Forest</h3>
|
||||
</header>
|
||||
<footer>
|
||||
<button>Like</button>
|
||||
</footer>
|
||||
</article>
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="flex two">
|
||||
<div>
|
||||
<article class="card">
|
||||
<img src="/img/forest.jpg">
|
||||
<footer>
|
||||
<h3>Misty Forest</h3>
|
||||
<button>Like</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<article class="card">
|
||||
<img src="/img/forest.jpg">
|
||||
<footer>
|
||||
<h3>Misty Forest</h3>
|
||||
<button>Like</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<h2 id="card">Card</h2>
|
||||
|
||||
<p>
|
||||
<div class="flex three">
|
||||
<div>
|
||||
<article class="card">
|
||||
<img src="img/forest.jpg">
|
||||
<section>This is a nice forest. What do you want to do with it?</section>
|
||||
<footer>
|
||||
<button>Enjoy</button>
|
||||
<button class="dangerous">Go away</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>A more elaborated card</h3>
|
||||
</header>
|
||||
<section>It has some text</section>
|
||||
<footer>
|
||||
And even a footer!
|
||||
</footer>
|
||||
</article>
|
||||
<div>
|
||||
<input type="checkbox" id="cardtoggle">
|
||||
<article class="card">
|
||||
<p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
|
||||
<label for="cardtoggle" class="close">×</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input id="cardtoggle2" type="checkbox" name="name">
|
||||
<article class="card">
|
||||
<header>
|
||||
<h1>Header 1</h1>
|
||||
<label for="cardtoggle2" class="close">×</a>
|
||||
</header>
|
||||
</article>
|
||||
<input id="cardtoggle3" type="checkbox" name="name2">
|
||||
<article class="card">
|
||||
<header>
|
||||
<h2>Header 2</h2>
|
||||
<label for="cardtoggle3" class="close">×</label>
|
||||
</header>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Header 3</h3>
|
||||
<a class="close">×</a>
|
||||
</header>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h4>Header 4</h4>
|
||||
<a class="close">×</a>
|
||||
</header>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<p>This is a one line card</p>
|
||||
<a class="close">×</a>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Checkbox
|
||||
|
||||
// Variables
|
||||
$picnic-checkbox-character: '\2714' !default;
|
||||
$picnic-checkbox-radius: $picnic-radius !default;
|
||||
|
||||
|
||||
%checkbox {
|
||||
@extend %radio;
|
||||
|
||||
+ .checkable:before {
|
||||
border-radius: $picnic-checkbox-radius;
|
||||
}
|
||||
|
||||
+ .checkable:after {
|
||||
content: $picnic-checkbox-character;
|
||||
background: none;
|
||||
transform: scale(2) translateY(-25%);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:checked + .checkable:after {
|
||||
color: $picnic-black;
|
||||
background: none;
|
||||
transform: translateY(-50%);
|
||||
transition: $picnic-transition;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Get the checkbox definition
|
||||
@import 'class';
|
||||
|
||||
// Define it for the element checkbox
|
||||
[type=checkbox] {
|
||||
@extend %radio;
|
||||
@extend %checkbox;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"id": "checkbox",
|
||||
"name": "Checkbox",
|
||||
"included": true,
|
||||
"affected": "[type=checkbox]",
|
||||
"summary": "The classical checkbox revisited for bigger and coherent shape.",
|
||||
"dependencies": [
|
||||
"radiocheckbox/v2"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
## Checkbox
|
||||
|
||||
Display an inline checkbox with a nice default style
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="checkable">Check me out (;</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="checkbox" checked>
|
||||
<span class="checkable">Uncheck me</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
This plugin, while experimental in the past, is mature now. Use a normal checkbox followed by any other element with the class `checkable`. The element that follows the checkbox will receive the pseudo classes so it should be able to do so. We recommend a `<span>` or `<label>`. Here we use the label around them for making the `<input>` change state when you click on this folowing element.
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="checkable">Checkbox text</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
But you can also use a label and reference the original input:
|
||||
|
||||
```html
|
||||
<input id="checkboxdemo" type="checkbox">
|
||||
<label for="checkboxdemo" class="checkable">Checkbox text</label>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### JavaScript
|
||||
|
||||
You do not need javascript since we are using the native elements and not setting `display: none` purposefully. However, you can still use javascript as normal to retrieve the checked elements.
|
||||
|
||||
<form>
|
||||
<label>
|
||||
<input class="tos" type="checkbox" />
|
||||
<span class="checkable">Accept TOS</span>
|
||||
</label>
|
||||
<button>Send</button>
|
||||
</form>
|
||||
<script>
|
||||
// Pure javascript
|
||||
document.querySelector('form').onsubmit = function(e){
|
||||
e.preventDefault();
|
||||
alert(document.querySelector('.tos').checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
```js
|
||||
// Pure javascript
|
||||
document.querySelector('form').onsubmit = function(e){
|
||||
e.preventDefault();
|
||||
alert(document.querySelector('input.tos').checked);
|
||||
}
|
||||
|
||||
// jQuery
|
||||
$("form").on('submit', function(e){
|
||||
e.preventDefault();
|
||||
alert($('input.tos').is(':checked'));
|
||||
});
|
||||
```
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<h2 id="checkbox">Checkbox</h2>
|
||||
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="checkable">Check me out (;</span>
|
||||
</label>
|
||||
<br>
|
||||
<input id="checktest" type="checkbox" checked>
|
||||
<label for="checktest" class="checkable">Uncheck me</label>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
// Dropimage plugin
|
||||
// Allow to upload images in a sensible manner
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
// The ratio for the images (responsive by default)
|
||||
$picnic-dropimage-ratio: math.div(16, 9) !default;
|
||||
|
||||
// The percentage of height (respect of width)
|
||||
$picnic-dropimage-height: percentage(math.div(1, $picnic-dropimage-ratio)) !default;
|
||||
|
||||
$picnic-dropimage-background-color: #ddd !default;
|
||||
|
||||
// This comes from camera.svg. Converted with:
|
||||
// http://dopiaza.org/tools/datauri/index.php
|
||||
$picnic-dropimage-background-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNjQwIiB2ZXJzaW9uPSIxLjEiPjxnIHN0eWxlPSJmaWxsOiMzMzMiPjxwYXRoIGQ9Ik0gMTg3IDIzMCBDIDE3NSAyMzAgMTY1IDI0MCAxNjUgMjUyIEwgMTY1IDMwMCBMIDE2NSA0MDggQyAxNjUgNDIwIDE3NSA0MzAgMTg3IDQzMCBMIDQ2MyA0MzAgQyA0NzUgNDMwIDQ4NSA0MjAgNDg1IDQwOCBMIDQ4NSAzMDAgTCA0ODUgMjUyIEMgNDg1IDI0MCA0NzUgMjMwIDQ2MyAyMzAgTCAxODcgMjMwIHogTSAzNjAgMjU2IEEgNzAgNzIgMCAwIDEgNDMwIDMyOCBBIDcwIDcyIDAgMCAxIDM2MCA0MDAgQSA3MCA3MiAwIDAgMSAyOTAgMzI4IEEgNzAgNzIgMCAwIDEgMzYwIDI1NiB6Ii8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iMzMwIiByPSI0MSIvPjxwYXRoIGQ9Im0yMDUgMjI1IDUtMTAgMjAgMCA1IDEwLTMwIDAiLz48cGF0aCBkPSJNMjg1IDIwMEwyNzAgMjI1IDM3NiAyMjUgMzYxIDIwMCAyODUgMjAwek0zMTAgMjA1TDMzNyAyMDUgMzM3IDIxOCAzMTAgMjE4IDMxMCAyMDV6Ii8+PHBhdGggZD0ibTQwNSAyMjUgNS0xMCAyMCAwIDUgMTAtMzAgMCIvPjwvZz48L3N2Zz4=' !default;
|
||||
|
||||
$picnic-dropimage-radius: $picnic-button-radius !default;
|
||||
$picnic-dropimage-margin: $picnic-button-margin !default;
|
||||
|
||||
|
||||
// Styles
|
||||
// It is preferred to only use one top-level class or element
|
||||
// It can be combined with other, specific classes with &.another
|
||||
%dropimage {
|
||||
|
||||
@extend %button;
|
||||
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
// Hack from http://stackoverflow.com/a/13976732/938236
|
||||
padding-bottom: $picnic-dropimage-height;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin: $picnic-dropimage-margin;
|
||||
border-radius: $picnic-dropimage-radius;
|
||||
|
||||
background-color: $picnic-dropimage-background-color;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-image: url(#{$picnic-dropimage-background-image});
|
||||
|
||||
// Subelements
|
||||
input {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Dropimage
|
||||
// Allows you to click the element or drop an image on it to upload the image and display a preview.
|
||||
|
||||
@import 'class';
|
||||
|
||||
.dropimage {
|
||||
@extend %dropimage;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" version="1.1"><g style="fill:#333"><path d="M 187 230 C 175 230 165 240 165 252 L 165 300 L 165 408 C 165 420 175 430 187 430 L 463 430 C 475 430 485 420 485 408 L 485 300 L 485 252 C 485 240 475 230 463 230 L 187 230 z M 360 256 A 70 72 0 0 1 430 328 A 70 72 0 0 1 360 400 A 70 72 0 0 1 290 328 A 70 72 0 0 1 360 256 z"/><circle cx="360" cy="330" r="41"/><path d="m205 225 5-10 20 0 5 10-30 0"/><path d="M285 200L270 225 376 225 361 200 285 200zM310 205L337 205 337 218 310 218 310 205z"/><path d="m405 225 5-10 20 0 5 10-30 0"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 605 B |
|
|
@ -1,96 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="640"
|
||||
height="640"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="camera_original.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.05"
|
||||
inkscape:cx="491"
|
||||
inkscape:cy="309"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
gridtolerance="10"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid3768"
|
||||
empspacing="5"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-40,-40)">
|
||||
<path
|
||||
style="opacity:1;fill:#333333;fill-opacity:1;stroke:#46335c;stroke-width:0.20999999999999999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="M 187 230 C 175 230 165 240 165 252 L 165 300 L 165 408 C 165 420 175 430 187 430 L 463 430 C 475 430 485 420 485 408 L 485 300 L 485 252 C 485 240 475 230 463 230 L 187 230 z M 360 256 A 70 72.5 0 0 1 430 328 A 70 72.5 0 0 1 360 400 A 70 72.5 0 0 1 290 328 A 70 72.5 0 0 1 360 256 z "
|
||||
transform="translate(40,40)"
|
||||
id="rect2996" />
|
||||
<circle
|
||||
style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:33.33;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path3770"
|
||||
cx="401"
|
||||
cy="369"
|
||||
r="41" />
|
||||
<path
|
||||
style="fill:#333333;stroke:#333333;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1"
|
||||
d="m 205,225 5,-10 20,0 5,10 -30,0"
|
||||
id="path3780"
|
||||
inkscape:connector-curvature="0"
|
||||
transform="translate(40,40)" />
|
||||
<path
|
||||
style="fill:#333333;stroke:#333333;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;opacity:1"
|
||||
d="M 285 200 L 270 225 L 376 225 L 361 200 L 285 200 z M 310 205 L 337 205 L 337 218 L 310 218 L 310 205 z "
|
||||
id="path3782"
|
||||
transform="translate(40,40)" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path2996"
|
||||
d="m 455,265 5,-10 20,0 5,10 -30,0"
|
||||
style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"id": "dropimage",
|
||||
"name": "Dropimage",
|
||||
"affected": ".dropimage",
|
||||
"summary": "Allows you to click the element or drop an image on it to upload the image and display a preview.",
|
||||
"included": false,
|
||||
"javascript": true,
|
||||
"partial": false,
|
||||
"test": [
|
||||
"test.html"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
## Drop image
|
||||
|
||||
Allows you to add a file input element that can receive an image drop and clicks with native elements. However, it needs some javascript to show the dropped image:
|
||||
|
||||
```html
|
||||
<div style="width: 200px"> <!-- this div just for demo display -->
|
||||
<label class="dropimage">
|
||||
<input title="Drop image or click me" type="file">
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### JavaScript
|
||||
|
||||
This is the javascript you need for multiple elements:
|
||||
|
||||
```js
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
|
||||
img.onchange = function(e){
|
||||
var inputfile = this, reader = new FileReader();
|
||||
reader.onloadend = function(){
|
||||
inputfile.style['background-image'] = 'url('+reader.result+')';
|
||||
}
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Hack it
|
||||
|
||||
Do you want round pictures? No problem, just do this:
|
||||
|
||||
```css
|
||||
.profile {
|
||||
border-radius: 50%; /* Make it a circle */
|
||||
padding-bottom: 100%; /* 100% height (ratio 1) */
|
||||
}
|
||||
```
|
||||
|
||||
To get this:
|
||||
|
||||
```html
|
||||
<div style="width: 200px"> <!-- this div just for demo display -->
|
||||
<label class="dropimage profile">
|
||||
<input name="filea" title="Drop image or click me" type="file">
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Make it smaller
|
||||
|
||||
```css
|
||||
.miniprofile {
|
||||
border-radius: 50%; /* Make it a circle */
|
||||
margin: 0 auto; /* Center horizontally */
|
||||
width: 60%; /* 60% width */
|
||||
padding-bottom: 60%; /* 60% height */
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div style="width: 200px"> <!-- this div just for demo display -->
|
||||
<label class="dropimage miniprofile">
|
||||
<input name="filea" title="Drop image or click me" type="file">
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<h2 id="dropimage">Dropimage</h2>
|
||||
|
||||
<div class="flex three">
|
||||
<div>
|
||||
<label class="dropimage" style="background-image: url('img/forest.jpg');">
|
||||
<input name="filea" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dropimage">
|
||||
<input name="fileb" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dropimage">
|
||||
<input name="filec" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
[].forEach.call(document.querySelectorAll(".dropimage"), function(img) {
|
||||
img.onchange = function(e) {
|
||||
var inputfile = this,
|
||||
reader = new FileReader();
|
||||
reader.onloadend = function() {
|
||||
inputfile.style["background-image"] = "url(" + reader.result + ")";
|
||||
};
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
};
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// Fontello
|
||||
[class^="icon-"]:before,
|
||||
[class*=" icon-"]:before {
|
||||
margin: 0 $picnic-separation 0 0;
|
||||
}
|
||||
|
||||
// Nice fontello trick from Ronen Ackerman ( http://stackoverflow.com/a/17561467 )
|
||||
// Note: purposefully avoiding lint
|
||||
i[class^="icon-"]:before,
|
||||
i[class*=" icon-"]:before {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "fontello",
|
||||
"name": "Fontello",
|
||||
"description": "It overwrites some styles from fontello for better integration",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $picnic-black;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5;
|
||||
background: $picnic-white;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: $picnic-separation 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 0 math.div($picnic-separation, 2);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $picnic-primary;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
transition: $picnic-transition;
|
||||
}
|
||||
|
||||
|
||||
// The <pre> doesn't have a nice style from Normalize.css
|
||||
|
||||
code {
|
||||
padding: math.div($picnic-separation, 2) $picnic-separation;
|
||||
font-size: .8em;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
pre {
|
||||
text-align: left;
|
||||
padding: math.div($picnic-separation, 2);
|
||||
background: #f5f5f5;
|
||||
border-radius: $picnic-radius;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 0 0 1em;
|
||||
margin: 0 0 0 .1em;
|
||||
box-shadow: inset 5px 0 rgba($picnic-black, .3);
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "generic",
|
||||
"name": "Generic",
|
||||
"description": "General styles for common elements",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$picnic-grid-gutter: $picnic-separation !default;
|
||||
$picnic-grid-gutter-vertical: $picnic-grid-gutter !default;
|
||||
$picnic-grid-gutter-horizontal: $picnic-grid-gutter !default;
|
||||
// Real code
|
||||
$picnic-grid-gutter: 10px !default;
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
@import 'class';
|
||||
|
||||
$picnic-grid-gutter: $picnic-separation !default;
|
||||
$picnic-grid-gutter-vertical: $picnic-grid-gutter !default;
|
||||
$picnic-grid-gutter-horizontal: $picnic-grid-gutter !default;
|
||||
|
||||
$picnic-grid-sizes: 500 600 700 800 900 1000 1100 1200 1300 1400 1500 1600 1700 1800 1900 2000 !default;
|
||||
$picnic-grid-children: $picnic-grid-sizes !default;
|
||||
$picnic-grid-off: $picnic-grid-sizes !default;
|
||||
|
||||
$picnic-grid-count: one two three four five six seven eight nine ten eleven twelve !default;
|
||||
$picnic-grid-count-sizes: (
|
||||
one: 100%,
|
||||
two: 50%,
|
||||
three: 33.33333%,
|
||||
four: 25%,
|
||||
five: 20%,
|
||||
six: 16.66666%,
|
||||
seven: 14.28571%,
|
||||
eight: 12.5%,
|
||||
nine: 11.11111%,
|
||||
ten: 10%,
|
||||
eleven: 9.09091%,
|
||||
twelve: 8.33333%
|
||||
);
|
||||
$picnic-grid-part: full half third two-third fourth three-fourth fifth two-fifth three-fifth four-fifth sixth !default;
|
||||
$picnic-grid-part-sizes: (
|
||||
full: 100%,
|
||||
half: 50%,
|
||||
third: 33.33333%,
|
||||
two-third: 66.66666%,
|
||||
fourth: 25%,
|
||||
three-fourth: 75%,
|
||||
fifth: 20%,
|
||||
two-fifth: 40%,
|
||||
three-fifth: 60%,
|
||||
four-fifth: 80%,
|
||||
sixth: 16.66666%
|
||||
);
|
||||
$picnic-grid-offpart: none half third two-third fourth three-fourth fifth two-fifth three-fifth four-fifth sixth !default;
|
||||
$picnic-grid-offpart-sizes: (
|
||||
half: 50%,
|
||||
third: 33.33333%,
|
||||
two-third: 66.66666%,
|
||||
fourth: 25%,
|
||||
three-fourth: 75%,
|
||||
fifth: 20%,
|
||||
two-fifth: 40%,
|
||||
three-fifth: 60%,
|
||||
four-fifth: 80%,
|
||||
sixth: 16.66666%,
|
||||
none: 0
|
||||
);
|
||||
|
||||
|
||||
@function in($list, $var) {
|
||||
@return (false != index($list, $var));
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-left: -$picnic-grid-gutter-horizontal;
|
||||
width: calc(100% + #{$picnic-grid-gutter-horizontal});
|
||||
flex-wrap: wrap;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto; /* Default for IE10 bug */
|
||||
padding-left: $picnic-grid-gutter-horizontal;
|
||||
padding-bottom: $picnic-grid-gutter-vertical;
|
||||
}
|
||||
|
||||
.flex {
|
||||
&[class*="one"],
|
||||
&[class*="two"],
|
||||
&[class*="three"],
|
||||
&[class*="four"],
|
||||
&[class*="five"],
|
||||
&[class*="six"],
|
||||
&[class*="seven"],
|
||||
&[class*="eight"],
|
||||
&[class*="nine"],
|
||||
&[class*="ten"],
|
||||
&[class*="eleven"],
|
||||
&[class*="twelve"] {
|
||||
> * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex.grow > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@each $count in $picnic-grid-count {
|
||||
.#{$count} > * {
|
||||
width: map-get($picnic-grid-count-sizes, $count);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i in $picnic-grid-sizes {
|
||||
@media all and (min-width: unquote($i + 'px')) {
|
||||
@each $count in $picnic-grid-count {
|
||||
.#{$count}-#{$i} > * {
|
||||
width: map-get($picnic-grid-count-sizes, $count);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Children sizing
|
||||
@each $part in $picnic-grid-part {
|
||||
.#{$part} {
|
||||
width: map-get($picnic-grid-part-sizes, $part);
|
||||
}
|
||||
}
|
||||
.none { display: none; }
|
||||
|
||||
|
||||
@each $i in $picnic-grid-sizes {
|
||||
@media all and (min-width: unquote($i + 'px')) {
|
||||
@each $part in $picnic-grid-part {
|
||||
.#{$part}-#{$i} {
|
||||
width: map-get($picnic-grid-part-sizes, $part);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $i in $picnic-grid-children {
|
||||
@media all and (min-width: unquote($i + 'px')) {
|
||||
.none-#{$i} { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@each $part in $picnic-grid-offpart {
|
||||
.off-#{$part} {
|
||||
margin-left: map-get($picnic-grid-offpart-sizes, $part);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@each $i in $picnic-grid-sizes {
|
||||
@media all and (min-width: unquote($i + 'px')) {
|
||||
@each $part in $picnic-grid-offpart {
|
||||
.off-#{$part}-#{$i} {
|
||||
margin-left: map-get($picnic-grid-offpart-sizes, $part);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "grids",
|
||||
"name": "Grids",
|
||||
"description": "Simple grid system based on ungrid",
|
||||
"affected": ".row",
|
||||
"included": true
|
||||
}
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
## Grids
|
||||
|
||||
> Note: the old `.row` and `.grid` have been replaced by the new `.flex`. You can still [see the old documentation in github](https://github.com/picnicss/picnic/blob/dcf3410125a861b3bf58ebfd06f73916ef9ae3db/src/plugins/grid/readme.md).
|
||||
|
||||
> Note 2: the children `<span>` are only for display purposes; you can put anything you want instead of them
|
||||
|
||||
A flexbox grid implementation with breakpoints. Choose when to change your layout depending on your content instead of the device you want to show as recommended by [Google's RWD](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints), by [Smashing Magazine's Logical Breakpoints](https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/) and Picnic CSS.
|
||||
|
||||
|
||||
|
||||
You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:
|
||||
|
||||
```html
|
||||
<div class="flex two four-500 six-800 demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div class="full half-500 third-800"><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
<div><span>6</span></div>
|
||||
<div><span>7</span></div>
|
||||
<div><span>8</span></div>
|
||||
<div><span>9</span></div>
|
||||
<div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Equally sized columns
|
||||
|
||||
Let's start through the basics though. Just a container with equally sized children:
|
||||
|
||||
```html
|
||||
<div class="flex demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
<div><span>6</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
With the class `flex`, smaller children will be spaced equally to fill all of the content. However, this only works with small children. If you have children bigger than their corresponding width (1/6th in the above) they will not be restricted:
|
||||
|
||||
```html
|
||||
<div class="flex demo">
|
||||
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
|
||||
<div><span>2</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To fix this, manually set the number of columns as explained in the next point.
|
||||
|
||||
|
||||
### Column count
|
||||
|
||||
If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:
|
||||
|
||||
```html
|
||||
<div class="flex three demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
The columns will keep being equally spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:
|
||||
|
||||
|
||||
<div class="flex six">
|
||||
<div><code>one</code></div>
|
||||
<div><code>two</code></div>
|
||||
<div><code>three</code></div>
|
||||
<div><code>four</code></div>
|
||||
<div><code>five</code></div>
|
||||
<div><code>six</code></div>
|
||||
<div><code>seven</code></div>
|
||||
<div><code>eight</code></div>
|
||||
<div><code>nine</code></div>
|
||||
<div><code>ten</code></div>
|
||||
<div><code>eleven</code></div>
|
||||
<div><code>twelve</code></div>
|
||||
</div>
|
||||
|
||||
|
||||
Most grid systems use a 12 grid system, but we wanted to use a more flexible system and allow you to choose the grid size.
|
||||
|
||||
|
||||
|
||||
### Responsive column count
|
||||
|
||||
We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with the number of pixels in 100 increments as follows:
|
||||
|
||||
```html
|
||||
<div class="flex two three-600 six-1200 demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
<div><span>6</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The number after the column count as in `-600` or `-1200` are the breakpoints. When the **website width is over that number**, that column count will be used instead of the previous. If we use two or more, the largest column count will be used.
|
||||
|
||||
For example, in a desktop with a screen of `1920x1080px` the previous one will display 6 columns. Any screen from 600px to 1200px will display three columns and smaller than 600px will display 2 columns.
|
||||
|
||||
The increment is 100px and starts in 500px up to 2000px both included. You can use any of those suffixes for the column count class:
|
||||
|
||||
<div class="flex two five-800 ten-1200">
|
||||
<div><code>-500</code></div>
|
||||
<div><code>-600</code></div>
|
||||
<div><code>-700</code></div>
|
||||
<div><code>-800</code></div>
|
||||
<div><code>-900</code></div>
|
||||
<div><code>-1000</code></div>
|
||||
<div><code>-1100</code></div>
|
||||
<div><code>-1200</code></div>
|
||||
<div><code>-1300</code></div>
|
||||
<div><code>-1400</code></div>
|
||||
<div><code>-1500</code></div>
|
||||
<div><code>-1600</code></div>
|
||||
<div><code>-1700</code></div>
|
||||
<div><code>-1800</code></div>
|
||||
<div><code>-1900</code></div>
|
||||
<div><code>-2000</code></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
### Remainders
|
||||
|
||||
You can also modify the remainder content as you wish with a couple of utility classes. This is the default:
|
||||
|
||||
```html
|
||||
<div class="flex three demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can grow them:
|
||||
|
||||
```html
|
||||
<div class="flex three grow demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Or you can center them:
|
||||
|
||||
```html
|
||||
<div class="flex three center demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Children sizing
|
||||
|
||||
Now that we know how the parent (or grid) can modify itself and the elements below them, the children can also go rebel and behave on their own. Say that a child wants to be half of the size of its parent element. Easy, just add the class `half`:
|
||||
|
||||
|
||||
```html
|
||||
<div class="flex four demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div class="half"><span>3</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
We have many classes like those. They are the size relative to the parent grid:
|
||||
|
||||
<div class="flex six">
|
||||
<div><code>full</code></div>
|
||||
<div><code>half</code></div>
|
||||
<div><code>third</code></div>
|
||||
<div><code>two-third</code></div>
|
||||
<div><code>fourth</code></div>
|
||||
<div><code>three-fourth</code></div>
|
||||
<div><code>fifth</code></div>
|
||||
<div><code>two-fifth</code></div>
|
||||
<div><code>three-fifth</code></div>
|
||||
<div><code>four-fifth</code></div>
|
||||
<div><code>sixth</code></div>
|
||||
<div><code>none</code></div>
|
||||
</div>
|
||||
|
||||
The class `none` hides the element, useful for responsive layouts
|
||||
|
||||
|
||||
### Responsive children
|
||||
|
||||
They can also be fine-tuned in a way similar to the above:
|
||||
|
||||
```html
|
||||
<div class="flex four demo">
|
||||
<div class="half fourth-1000"><span>1</span></div>
|
||||
<div class="half fourth-1000"><span>2</span></div>
|
||||
<div class="full half-1000"><span>3</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Offsets
|
||||
|
||||
The children can also have one offset (empty space) before it. They are built adding the class off-SIZE, similar to the size but prefixing off-:
|
||||
|
||||
```html
|
||||
<div class="flex four demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div class="off-fourth"><span>3</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
We have many classes like those. They are the size of the offset relative to the parent grid:
|
||||
|
||||
<div class="flex two three-600 six-1200 demo">
|
||||
<div><code>off-none</code></div>
|
||||
<div><code>off-half</code></div>
|
||||
<div><code>off-third</code></div>
|
||||
<div><code>off-two-third</code></div>
|
||||
<div><code>off-fourth</code></div>
|
||||
<div><code>off-three-fourth</code></div>
|
||||
<div><code>off-fifth</code></div>
|
||||
<div><code>off-two-fifth</code></div>
|
||||
<div><code>off-three-fifth</code></div>
|
||||
<div><code>off-four-fifth</code></div>
|
||||
<div><code>off-sixth</code></div>
|
||||
</div>
|
||||
|
||||
> Note: `off-none` is useful for making responsive layouts as explained in the next point.
|
||||
|
||||
|
||||
|
||||
### Responsive offsets
|
||||
|
||||
They can also have the minimum screen size when they start working:
|
||||
|
||||
```html
|
||||
<div class="flex three four-1000 demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div class="off-fourth-800"><span>3</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The main difference with the width classes is that it includes a none in case you want to hide the offset at certain sizes and that it doesn't include a full
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<h2 id="grid">Grid</h2>
|
||||
|
||||
|
||||
<div class="flex two four-500 six-800 demo">
|
||||
<div><span>1</span></div>
|
||||
<div><span>2</span></div>
|
||||
<div class="full half-500 third-800"><span>3</span></div>
|
||||
<div><span>4</span></div>
|
||||
<div><span>5</span></div>
|
||||
<div><span>6</span></div>
|
||||
<div><span>7</span></div>
|
||||
<div><span>8</span></div>
|
||||
<div><span>9</span></div>
|
||||
<div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
|
||||
</div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
|
||||
// Variables
|
||||
$picnic-input-height: 2.1em !default;
|
||||
$picnic-input-padding: math.div($picnic-separation, 2) $picnic-separation !default;
|
||||
$picnic-input-background: $picnic-white !default;
|
||||
|
||||
|
||||
|
||||
// Top level selector
|
||||
%input {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
height: $picnic-input-height;
|
||||
padding: $picnic-input-padding;
|
||||
border: $picnic-border;
|
||||
background-color: $picnic-input-background;
|
||||
border-radius: $picnic-radius;
|
||||
transition: $picnic-transition;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $picnic-primary;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// Input
|
||||
// Handle the writing of text and some other user-generated content
|
||||
|
||||
@import 'class';
|
||||
|
||||
|
||||
// Browser treats unknow type as "text", so we'll do the same
|
||||
input,
|
||||
textarea,
|
||||
.select select {
|
||||
@extend %input;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=file],
|
||||
[type=color] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type=file] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"id": "input",
|
||||
"name": "Input and textarea",
|
||||
"affected": "input, textarea",
|
||||
|
||||
"summary-comment": "purposefuly empty",
|
||||
"summary": "",
|
||||
"included": true
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
## Input
|
||||
|
||||
Simple (or not) text form elements:
|
||||
|
||||
```html
|
||||
<fieldset class="flex two">
|
||||
<label><input type="email" placeholder="Email"></label>
|
||||
<label><input type="password" placeholder="Password"></label>
|
||||
</fieldset>
|
||||
<textarea placeholder="Textarea"></textarea>
|
||||
```
|
||||
|
||||
<style>
|
||||
input.demo {
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<h2 id="input">Input</h2>
|
||||
|
||||
<div class="flex two">
|
||||
<div>
|
||||
<input placeholder="Full name" />
|
||||
</div><div>
|
||||
<input type="number" placeholder="Number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex two">
|
||||
<div>
|
||||
<input type="email" placeholder="Email"/>
|
||||
</div><div>
|
||||
<input type="password" placeholder="Password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex two">
|
||||
<div>
|
||||
<input type="file"/>
|
||||
</div><div>
|
||||
<input type="color"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex one">
|
||||
<div>
|
||||
<textarea placeholder="Full description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
// Label of text
|
||||
$picnic-label-padding: math.div($picnic-separation, 2) $picnic-separation * 1.5 !default;
|
||||
$picnic-label-radius: $picnic-radius !default;
|
||||
|
||||
// Styles
|
||||
%label {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
letter-spacing: inherit;
|
||||
margin: 0;
|
||||
padding: $picnic-label-padding;
|
||||
vertical-align: middle;
|
||||
background: $picnic-primary;
|
||||
color: $picnic-white;
|
||||
border: 0;
|
||||
border-radius: $picnic-label-radius;
|
||||
width: auto;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
// Colors
|
||||
&.success {
|
||||
background: $picnic-success;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: $picnic-warning;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: $picnic-error;
|
||||
}
|
||||
|
||||
&.pseudo {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// Inherit from the class
|
||||
@import 'class';
|
||||
|
||||
.label {
|
||||
@extend %label;
|
||||
|
||||
font-size: .6em;
|
||||
padding: .4em .6em;
|
||||
margin-left: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "label",
|
||||
"name": "Label",
|
||||
"summary": "An element to display some short relevant information",
|
||||
"affected": ".label",
|
||||
"included": true
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
## Label
|
||||
|
||||
An element to display some short relevant information on the side of other element
|
||||
|
||||
```html
|
||||
<h1>header 1 <span class="label">Normal</span></h1>
|
||||
<h2>header 2 <span class="label success">Success</span></h2>
|
||||
<h3>header 3 <span class="label warning">Warning</span></h3>
|
||||
<h4>header 4 <span class="label error">Error</span></h4>
|
||||
<p>paragraph <span class="label">Normal</span></p>
|
||||
```
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<h2 id="label">Label</h2>
|
||||
|
||||
<p>
|
||||
<h1>h1 is important
|
||||
<span class="label">Normal</span>
|
||||
</h1>
|
||||
<h2>h2 is important too
|
||||
<span class="label success">Success</span>
|
||||
</h2>
|
||||
<h3>Is h3 important?
|
||||
<span class="label warning">Warning</span>
|
||||
</h3>
|
||||
<h4>h4 is not so important
|
||||
<span class="label error">Error</span>
|
||||
</h4>
|
||||
<p>p is normal text
|
||||
<span class="label">Normal</span>
|
||||
</p>
|
||||
</p>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
.modal {
|
||||
text-align: center;
|
||||
|
||||
// This is the elemet that allows for show/hide without requiring javascript
|
||||
> input {
|
||||
|
||||
// The input is only for functionality, so hide it
|
||||
display: none;
|
||||
|
||||
~ * {
|
||||
|
||||
// By default, they are not visible
|
||||
opacity: 0;
|
||||
|
||||
// Also hide it from any iteraction
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: $picnic-overlay;
|
||||
transition: $picnic-transition;
|
||||
z-index: 100000;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// All of the elements that follow the overlay (the modals)
|
||||
~ * {
|
||||
|
||||
// They are of type .card (see /plugins/card )
|
||||
@extend %card;
|
||||
|
||||
border: 0;
|
||||
|
||||
// Position it in the middle of the screen on top of everything
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) scale(.2, .2);
|
||||
z-index: 1000000;
|
||||
|
||||
// Hiding effect
|
||||
transition: $picnic-transition;
|
||||
}
|
||||
}
|
||||
|
||||
// When the checkbox is checked (modal should be showing)
|
||||
> input:checked {
|
||||
|
||||
// All the visible elements
|
||||
~ * {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
max-height: 10000px;
|
||||
transition: $picnic-transition;
|
||||
}
|
||||
|
||||
// This position is only for the modal, not for the overlay
|
||||
// It says: grab everything that is after the overlay after the input
|
||||
~ .overlay ~ * {
|
||||
max-height: 90%;
|
||||
overflow: auto;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
|
||||
transform: translateX(-50%) translateY(-50%) scale(1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $picnic-breakpoint) {
|
||||
.modal .overlay ~ * {
|
||||
min-width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"id": "modal",
|
||||
"name": "Modal",
|
||||
"description": "Fancy modal for the new web",
|
||||
"install": "plugin",
|
||||
"included": false,
|
||||
"affected": ".modal",
|
||||
"summary": "A pop-up like element that displays important information and focuses user's attention on it.",
|
||||
"dependencies": [
|
||||
"card/v2"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
## Modal
|
||||
|
||||
The modal is pure CSS, which makes the HTML quite ugly actually. However it does work. To try it, press the button:
|
||||
|
||||
```html
|
||||
<label for="modal_1" class="button">Show modal</label>
|
||||
|
||||
<div class="modal">
|
||||
<input id="modal_1" type="checkbox" />
|
||||
<label for="modal_1" class="overlay"></label>
|
||||
<article>
|
||||
<header>
|
||||
<h3>Great offer</h3>
|
||||
<label for="modal_1" class="close">×</label>
|
||||
</header>
|
||||
<section class="content">
|
||||
We have a special offer for you. I am sure you will love it! However this does look spammy...
|
||||
</section>
|
||||
<footer>
|
||||
<a class="button" href="#">See offer</a>
|
||||
<label for="modal_1" class="button dangerous">
|
||||
Cancel
|
||||
</label>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### JavaScript
|
||||
|
||||
As always, there is **no javascript**. However, a little bit of javascript could enhance the experience allowing to close the modal by pressing `ESC`.
|
||||
|
||||
<script>
|
||||
document.onkeydown = function(e){
|
||||
if (e.keyCode == 27) {
|
||||
var mods = document.querySelectorAll('.modal > [type=checkbox]');
|
||||
[].forEach.call(mods, function(mod){ mod.checked = false; });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```js
|
||||
document.onkeydown = function(e){
|
||||
if (e.keyCode == 27) {
|
||||
var mods = document.querySelectorAll('.modal > [type=checkbox]');
|
||||
[].forEach.call(mods, function(mod){ mod.checked = false; });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Toggling the modal with javascript
|
||||
|
||||
If you want to be able to toggle the modal with javascript, you can use the following:
|
||||
|
||||
```js
|
||||
document.getElementById('modal_1').checked = true; // open modal
|
||||
document.getElementById('modal_1').checked = false; // close modal
|
||||
```
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<h2 id="modal">Modal</h2>
|
||||
|
||||
<p>
|
||||
<label for="modal_1" class="button">
|
||||
Show modal
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<div class="modal">
|
||||
<input id="modal_1" type="checkbox" />
|
||||
<label for="modal_1" class="overlay"></label>
|
||||
<article>
|
||||
<header>
|
||||
<h3>Great offer</h3>
|
||||
<label for="modal_1" class="close">×</label>
|
||||
</header>
|
||||
<section class="content">
|
||||
We have a special offer for you. I am sure you will love it! However this does look spammy...
|
||||
</section>
|
||||
<footer>
|
||||
<a class="button" href="#">See offer</a>
|
||||
<label for="modal_1" class="button dangerous">
|
||||
Cancel
|
||||
</label>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
// Navigation bar
|
||||
|
||||
$picnic-nav-height: 3em !default;
|
||||
$picnic-nav-shadow: $picnic-shadow !default;
|
||||
$picnic-nav-position: fixed !default;
|
||||
$picnic-nav-sides: .6em !default;
|
||||
$picnic-nav-responsive: true !default;
|
||||
$picnic-nav-open-left: false !default;
|
||||
$picnic-nav-timing: .5s !default;
|
||||
|
||||
// Vertical align based on
|
||||
// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
|
||||
%nav {
|
||||
|
||||
// Position it on the top, full width
|
||||
position: $picnic-nav-position;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
// Total height
|
||||
height: $picnic-nav-height;
|
||||
padding: 0 $picnic-nav-sides;
|
||||
|
||||
// Make it look like a hovering bar
|
||||
background: $picnic-white;
|
||||
box-shadow: $picnic-nav-shadow;
|
||||
z-index: 10000;
|
||||
|
||||
// Everything happens slow-ish
|
||||
transition: all .3s;
|
||||
|
||||
// Half-pixel fix (vertical align hack)
|
||||
transform-style: preserve-3d;
|
||||
|
||||
// The two main elements
|
||||
.brand,
|
||||
.menu,
|
||||
.burger {
|
||||
float: right;
|
||||
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
float: left;
|
||||
padding: 0 $picnic-nav-sides;
|
||||
max-width: 50%;
|
||||
white-space: nowrap;
|
||||
color: inherit;
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 2em;
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
.select::after {
|
||||
height: calc(100% - 1px);
|
||||
padding: 0;
|
||||
line-height: 2.4em;
|
||||
}
|
||||
|
||||
.menu > * {
|
||||
margin-right: $picnic-nav-sides;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
// Navigation bar
|
||||
@import 'class';
|
||||
|
||||
nav {
|
||||
@extend %nav;
|
||||
}
|
||||
|
||||
@if $picnic-nav-responsive {
|
||||
nav .burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (max-width: $picnic-breakpoint) {
|
||||
|
||||
nav {
|
||||
.burger {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
bottom: -1000em;
|
||||
margin: 0;
|
||||
// fix blue flash before animation in chrome
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.burger ~ .menu,
|
||||
.show:checked ~ .burger {
|
||||
position: fixed;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
|
||||
@if $picnic-nav-open-left{
|
||||
left: 0;
|
||||
}
|
||||
@else{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
bottom: -1000em;
|
||||
margin: 0;
|
||||
background: $picnic-white;
|
||||
transition: all $picnic-nav-timing ease;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.burger ~ .menu {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.show:checked ~ .burger {
|
||||
color: transparent;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
background: $picnic-overlay;
|
||||
transition: all $picnic-nav-timing ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Show animation
|
||||
.show ~ .menu {
|
||||
width: 70%;
|
||||
max-width: 300px;
|
||||
// max-width: 0;
|
||||
transform-origin: center right;
|
||||
transition: all math.div($picnic-nav-timing, 2) ease;
|
||||
|
||||
// opacity: 0;
|
||||
// width: 0;
|
||||
transform: scaleX(0);
|
||||
|
||||
& > * {
|
||||
transform: translateX(100%);
|
||||
transition: all 0s ease $picnic-nav-timing;
|
||||
}
|
||||
}
|
||||
|
||||
.show:checked ~ .menu > *:nth-child(1) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
|
||||
}
|
||||
.show:checked ~ .menu > *:nth-child(2) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.2;
|
||||
}
|
||||
.show:checked ~ .menu > *:nth-child(3) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.4;
|
||||
}
|
||||
.show:checked ~ .menu > *:nth-child(4) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.6;
|
||||
}
|
||||
.show:checked ~ .menu > *:nth-child(5) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.8;
|
||||
}
|
||||
.show:checked ~ .menu > *:nth-child(6) {
|
||||
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 1;
|
||||
}
|
||||
|
||||
.show:checked ~ .menu {
|
||||
// opacity: 1;
|
||||
// width: 70%;
|
||||
transform: scaleX(1);
|
||||
|
||||
& > * {
|
||||
transform: translateX(0);
|
||||
transition: all $picnic-nav-timing ease-in-out $picnic-nav-timing * 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.burger ~ .menu > * {
|
||||
display: block;
|
||||
margin: math.div($picnic-separation, 2);
|
||||
text-align: left;
|
||||
max-width: calc(100% - #{$picnic-separation});
|
||||
}
|
||||
|
||||
.burger ~ .menu > a {
|
||||
padding: math.div($picnic-separation, 2) $picnic-separation * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "nav",
|
||||
"name": "Navigation bar",
|
||||
"affected": "nav",
|
||||
"summary": "Gives access to common links of the website in an easy way from the top of the page.",
|
||||
"included": false
|
||||
}
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
## Nav
|
||||
|
||||
<style>
|
||||
nav.demo {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
padding: 0 .6em;
|
||||
}
|
||||
</style>
|
||||
|
||||
A responsive, pure css navigation menu:
|
||||
|
||||
> On these smaller versions it might have small glitches. Please see the top, page-wide nav to see the actual effect.
|
||||
|
||||
```html
|
||||
<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
|
||||
|
||||
<nav class="demo">
|
||||
<a href="#" class="brand">
|
||||
<img class="logo" src="/img/basket.png" />
|
||||
<span>Picnic CSS</span>
|
||||
</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="bmenub" type="checkbox" class="show">
|
||||
<label for="bmenub" class="burger pseudo button">menu</label>
|
||||
|
||||
<div class="menu">
|
||||
<a href="#" class="pseudo button icon-picture">Demo</a>
|
||||
<a href="#" class="button icon-puzzle">Plugins</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Responsive
|
||||
|
||||
The nav is responsive by default. The text inside the `<label>` can be changed for the following characters for a different effect ([source](https://css-tricks.com/three-line-menu-navicon/)):
|
||||
|
||||
- Identical to `≡` (safe on mobile): <label class="pseudo button">≡</label>
|
||||
- Trigram for heaven `☰`: <label class="pseudo button">☰</label>
|
||||
- Any other: <i class="pseudo button icon-cog"></i>
|
||||
|
||||
|
||||
### Different height and big logo
|
||||
|
||||
Thanks to a [vertical-align trick](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/), you can set it up to any height you want:
|
||||
|
||||
```css
|
||||
nav.imponent {
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
.imponent .logo {
|
||||
height: 3em;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<nav class="demo imponent">
|
||||
<a href="#" class="brand">
|
||||
<img class="logo" src="/img/basket.png" />
|
||||
<span>Picnic CSS</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
### Form elements
|
||||
|
||||
Just get anything you want inside the nav, most things should work.
|
||||
|
||||
```html
|
||||
<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
|
||||
|
||||
<nav class="demo">
|
||||
<a href="#" class="brand">Picnic CSS</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="bmenug" type="checkbox" class="show">
|
||||
<label for="bmenug" class="burger pseudo button">≡</label>
|
||||
|
||||
<div class="menu">
|
||||
<input placeholder="Search plugins" />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
|
||||
|
||||
<nav class="demo">
|
||||
<a href="#" class="brand">Picnic CSS</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="cmenug" type="checkbox" class="show">
|
||||
<label for="cmenug" class="burger pseudo button">≡</label>
|
||||
|
||||
<div class="menu">
|
||||
<select>
|
||||
<option>Choose an option</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Fixed position
|
||||
|
||||
To set it on the top of the page instead of scrolling with the page, just do:
|
||||
|
||||
```
|
||||
nav {
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
|
||||
### Open nav menu from left
|
||||
|
||||
Change sass variable `$picnic-nav-open-left: false !default;` to
|
||||
`$picnic-nav-open-left: true;` to open it from the left:
|
||||
|
||||
```html
|
||||
<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
|
||||
|
||||
<nav class="demo">
|
||||
<a href="#" class="brand">Picnic CSS</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="cmenug" type="checkbox" class="show">
|
||||
<label for="cmenug" class="burger pseudo button">≡</label>
|
||||
|
||||
<div class="menu">
|
||||
<select>
|
||||
<option>Choose an option</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<h2 id="nav">Nav</h2>
|
||||
|
||||
<p>
|
||||
<nav style="position: relative; z-index: 9">
|
||||
<a href="#" class="brand">
|
||||
<img class="logo" src="/img/basket.png" />
|
||||
<span>Picnic CSS</span>
|
||||
</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="bmenub" type="checkbox" class="show">
|
||||
<label for="bmenub" class="burger pseudo button toggle">menu</label>
|
||||
|
||||
<div class="menu">
|
||||
<a href="#" class="pseudo button icon-picture">Demo</a>
|
||||
<a href="#" class="button icon-puzzle">Plugins</a>
|
||||
</div>
|
||||
</nav>
|
||||
</p>
|
||||
|
|
@ -1,434 +0,0 @@
|
|||
$picnic-normalize-display: true !default;
|
||||
$picnic-normalize-ie: true !default;
|
||||
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-display {
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-display {
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
mark {
|
||||
background: $picnic-white;
|
||||
color: $picnic-black;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
@if $picnic-normalize-ie {
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
@if $picnic-normalize-ie {
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
@if $picnic-normalize-ie {
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
@if $picnic-normalize-ie {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
@if $picnic-normalize-ie {
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
@if $picnic-normalize-ie {
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "normalize",
|
||||
"name": "Normalize",
|
||||
"description": "The foundation of Picnic CSS",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
// Radio button
|
||||
|
||||
// Variables
|
||||
$picnic-radio-size: 1em !default;
|
||||
$picnic-radio-border: 1px solid $picnic-dull !default;
|
||||
|
||||
//
|
||||
%radio {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
+ .checkable:hover:before,
|
||||
&:focus + .checkable:before {
|
||||
border: 1px solid $picnic-primary;
|
||||
}
|
||||
|
||||
+ .checkable {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: $picnic-radio-size * 1.5;
|
||||
margin-right: .6em;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: $picnic-radio-size;
|
||||
line-height: $picnic-radio-size;
|
||||
color: transparent;
|
||||
font-family: sans;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: $picnic-radio-size;
|
||||
height: $picnic-radio-size;
|
||||
border-radius: 50%;
|
||||
transition: $picnic-transition;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border: $picnic-radio-border;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .checkable:after {
|
||||
background: $picnic-black;
|
||||
transform: scale(.5) translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Radio
|
||||
// Allows to choose one element from several of them
|
||||
@import 'class';
|
||||
|
||||
|
||||
[type=radio] {
|
||||
@extend %radio;
|
||||
}
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "radio",
|
||||
"name": "Radiobutton",
|
||||
"included": true,
|
||||
"affected": "[type=radio]",
|
||||
"summary": "Allows to choose one element from several of them."
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
## Radio button
|
||||
|
||||
A simple way of using radiobuttons
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type='radio' name="radiodemo">
|
||||
<span class="checkable">Select me</span>
|
||||
</label><br><br>
|
||||
|
||||
<input id="radiodemo" checked type='radio' name="radiodemo">
|
||||
<label for="radiodemo" class="checkable">Or me</label>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<h2 id="radio">Radio button</h2>
|
||||
|
||||
<p>
|
||||
<label>
|
||||
<input type='radio' name="radiodemo">
|
||||
<span class="checkable">Select me</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input checked type='radio' name="radiodemo">
|
||||
<span class="checkable">Or me</span>
|
||||
</label>
|
||||
</p>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// Variables
|
||||
$picnic-select-height: 2.2em !default;
|
||||
$picnic-select-margin: math.div($picnic-separation, 2) !default;
|
||||
$picnic-select-padding: math.div($picnic-separation, 2) $picnic-separation * 0.75 !default;
|
||||
|
||||
// This comes from arrow.svg. Converted with:
|
||||
// http://dopiaza.org/tools/datauri/index.php
|
||||
$picnic-select-dropimage: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=" !default;
|
||||
|
||||
// Code
|
||||
%select {
|
||||
// Compatible with old androids
|
||||
background: $picnic-white url(#{$picnic-select-dropimage}) no-repeat scroll 95% center/
|
||||
10px 15px;
|
||||
|
||||
// Compatible with modern browsers
|
||||
background-position: calc(100% - 15px) center;
|
||||
|
||||
border: $picnic-border;
|
||||
border-radius: $picnic-radius;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: $picnic-select-height;
|
||||
box-sizing: border-box;
|
||||
padding: $picnic-select-padding;
|
||||
transition: all 0.3s;
|
||||
|
||||
// Hide dropdown arrow
|
||||
|
||||
// vendor prefixes required, see:
|
||||
// https://github.com/postcss/autoprefixer#why-doesnt-autoprefixer-support-appearance
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
// Hide the arrow for IE (apparently IE10+)
|
||||
// http://stackoverflow.com/a/21417591 method
|
||||
// http://stackoverflow.com/a/15933790 version
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid $picnic-primary;
|
||||
transition: outline 0s;
|
||||
}
|
||||
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $picnic-black;
|
||||
}
|
||||
|
||||
option {
|
||||
font-size: inherit;
|
||||
padding: $picnic-separation * 0.75;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Import the select plugin
|
||||
@import 'class';
|
||||
|
||||
// Implement the plugin for select
|
||||
select {
|
||||
@extend %select;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="3"><path d="m 0,1 1,2 1,-2 z"/></svg>
|
||||
|
Before Width: | Height: | Size: 95 B |
|
|
@ -1,65 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="10"
|
||||
height="15"
|
||||
viewBox="0 0 10 15"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="arrow.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="31.7"
|
||||
inkscape:cx="0.165"
|
||||
inkscape:cy="5.88"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
gridtolerance="9" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1040)">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 0,1040 5,20 5,-20 z"
|
||||
id="path4138"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "select",
|
||||
"name": "Select",
|
||||
"affected": ".select",
|
||||
"included": true,
|
||||
"summary": "A typical dropdown, now enhanced with a custom down arrow and coherent style."
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
## Select
|
||||
|
||||
```html
|
||||
<select>
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
```
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<h2 id="select">Select</h2>
|
||||
|
||||
<div class="flex two">
|
||||
<p>
|
||||
<select>
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select multiple>
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// Stacking elements one of top of another
|
||||
.stack,
|
||||
.stack .toggle {
|
||||
//@extend %stack;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// This is in this way to allow for individual stack items
|
||||
// Because if it was border-radius: $picnic-radius $picnic-radius 0 0;
|
||||
// then they would all behave as last-child
|
||||
.stack:first-child,
|
||||
.stack:first-child .toggle {
|
||||
border-top-left-radius: $picnic-radius;
|
||||
border-top-right-radius: $picnic-radius;
|
||||
}
|
||||
|
||||
.stack:last-child,
|
||||
.stack:last-child .toggle {
|
||||
border-bottom-left-radius: $picnic-radius;
|
||||
border-bottom-right-radius: $picnic-radius;
|
||||
}
|
||||
|
||||
// To avoid the double border of input and textarea
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
|
||||
&.stack {
|
||||
transition: border-bottom 0 ease 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
&:focus + input,
|
||||
&:focus + textarea,
|
||||
&:focus + select {
|
||||
border-top-color: $picnic-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "stack",
|
||||
"name": "Stack",
|
||||
"affected": ".stack",
|
||||
"summary": "Allow to set one element on top of each other and gives them a sense of unity.",
|
||||
"included": false
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
## Stack
|
||||
|
||||
A vertical group of different elements.
|
||||
|
||||
```html
|
||||
<span class="button stack icon-picture">Home</span>
|
||||
<span class="button stack icon-puzzle">Plugins</span>
|
||||
<span class="button stack icon-file-code">Documentation</span>
|
||||
<span class="button stack icon-help-circled">Test</span>
|
||||
```
|
||||
|
||||
|
||||
They can also toggle:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<label class="stack">
|
||||
<input name="stack" type="radio">
|
||||
<span class="button toggle">
|
||||
<span class="icon-picture"></span> Home
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input name="stack" type="radio">
|
||||
<span class="button toggle">
|
||||
<span class="icon-puzzle"></span> Plugins
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input name="stack" type="radio">
|
||||
<span class="button toggle">
|
||||
<span class="icon-file-code"></span> Documentation
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input name="stack" type="radio">
|
||||
<span class="button toggle">
|
||||
<span class="icon-help-circled"></span> Test
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
Stack different kind of elements
|
||||
|
||||
```html
|
||||
<div class="third">
|
||||
<img class="stack" src="/img/forest.jpg">
|
||||
<a class="button stack">Full size</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
A small form
|
||||
|
||||
```html
|
||||
<div class="third">
|
||||
<input class="stack" placeholder="Name" />
|
||||
<input class="stack" placeholder="Email" />
|
||||
<button class="stack icon-paper-plane">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Pseudo buttons:
|
||||
|
||||
```html
|
||||
<a class="stack pseudo button">First</a>
|
||||
<a class="stack pseudo button">Second</a>
|
||||
<a class="stack pseudo button">Third</a>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Forms
|
||||
|
||||
Create nice and packed forms. [jsfiddle](http://jsfiddle.net/ddmv3dsr/4/)
|
||||
|
||||
```html
|
||||
<div class="third">
|
||||
<input class="stack" placeholder="First name" />
|
||||
<input class="stack" placeholder="Last name" />
|
||||
<input class="stack" placeholder="Email" />
|
||||
</div><br>
|
||||
|
||||
<div class="third">
|
||||
<input class="stack" placeholder="Password" />
|
||||
<input class="stack" placeholder="Repeat password" />
|
||||
<textarea class="stack" placeholder="Biography"></textarea>
|
||||
<button class="stack icon-paper-plane">Send</button>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<!-- Testing the module -->
|
||||
<h2 id="stack">Stack</h2>
|
||||
|
||||
<h3>Buttons stack</h3>
|
||||
|
||||
<div class="flex four">
|
||||
<div>
|
||||
<span class="stack button icon-puzzle">Plugins</span>
|
||||
<span class="stack button icon-picture">Demo</span>
|
||||
<span class="stack button icon-help-circled">Test</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="stack">
|
||||
<input type="radio" name="stack" checked />
|
||||
<span class="button toggle"><span class="icon-puzzle"></span>Plugins</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input type="radio" name="stack" />
|
||||
<span class="button toggle"><span class="icon-picture"></span>Demo</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input type="radio" name="stack" />
|
||||
<span class="button toggle"><span class="icon-help-circled"></span>Test</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="stack">
|
||||
<input type="checkbox" checked />
|
||||
<span class="button toggle"><span class="icon-puzzle"></span>Plugins</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input type="checkbox" checked />
|
||||
<span class="button toggle"><span class="icon-picture"></span>Demo</span>
|
||||
</label>
|
||||
<label class="stack">
|
||||
<input type="checkbox" />
|
||||
<span class="button toggle"><span class="icon-help-circled"></span>Test</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span class="stack pseudo button icon-puzzle">Plugins</span>
|
||||
<span class="stack pseudo button icon-picture">Demo</span>
|
||||
<span class="stack pseudo button icon-help-circled">Test</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Image stack</h3>
|
||||
|
||||
<div class="flex four">
|
||||
<div>
|
||||
<img class="stack" src="img/forest.jpg" />
|
||||
<a class="stack button">Forest</a>
|
||||
</div>
|
||||
<div>
|
||||
<img class="stack" src="img/balloon.jpg" />
|
||||
<a class="stack button">Balloon</a>
|
||||
</div>
|
||||
<div>
|
||||
<img class="stack" src="img/lake.jpg" /> <a class="stack button">Lake</a>
|
||||
</div>
|
||||
<div>
|
||||
<img class="stack" src="img/halong.jpg" />
|
||||
<a class="stack button">Halong bay</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Form stack</h3>
|
||||
|
||||
<div class="flex four">
|
||||
<div>
|
||||
<input class="stack" placeholder="Name" />
|
||||
<input class="stack" type="email" placeholder="Email" />
|
||||
<input class="stack" type="password" placeholder="Password" />
|
||||
</div>
|
||||
<div>
|
||||
<select class="stack">
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
<select class="stack">
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
<select class="stack">
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<textarea class="stack" placeholder="Textarea"></textarea>
|
||||
<textarea class="stack" placeholder="Textarea"></textarea>
|
||||
<textarea class="stack" placeholder="Textarea"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dropimage stack">
|
||||
<input name="filea" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
<label class="dropimage stack">
|
||||
<input name="filea" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
<label class="dropimage stack">
|
||||
<input name="filea" title="Drop image or click me" type="file" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
table {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: math.div($picnic-separation, 2) 2.4em math.div($picnic-separation, 2) $picnic-separation;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 900;
|
||||
color: $picnic-white;
|
||||
background-color: $picnic-primary;
|
||||
}
|
||||
|
||||
.success th {
|
||||
background-color: $picnic-success;
|
||||
}
|
||||
|
||||
.warning th {
|
||||
background-color: $picnic-warning;
|
||||
}
|
||||
|
||||
.error th {
|
||||
background-color: $picnic-error;
|
||||
}
|
||||
|
||||
.dull th {
|
||||
background-color: $picnic-dull;
|
||||
}
|
||||
|
||||
// Zebra stripes
|
||||
tr:nth-child(even) {
|
||||
background: rgba($picnic-black, .05);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"id": "table",
|
||||
"name": "Table",
|
||||
"affected": "table",
|
||||
"included": true
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
## Table
|
||||
|
||||
```html
|
||||
<table class="primary">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>City</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Francisco</td>
|
||||
<td>Valencia, Spain</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eve</td>
|
||||
<td>San Francisco, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martin</td>
|
||||
<td>New York, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sarah</td>
|
||||
<td>London, UK</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<h2 id="table">Table</h2>
|
||||
|
||||
<table class="primary">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>City</th>
|
||||
<th>Age</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Francisco</td>
|
||||
<td>Valencia, Spain</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eve</td>
|
||||
<td>San Francisco, USA</td>
|
||||
<td>22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martin</td>
|
||||
<td>New York, USA</td>
|
||||
<td>45</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sarah</td>
|
||||
<td>London, UK</td>
|
||||
<td>25</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
// Tab definition
|
||||
%tabs {
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> label img {
|
||||
float: left;
|
||||
margin-left: $picnic-separation;
|
||||
}
|
||||
|
||||
> .row {
|
||||
width: calc(100% + 2 * .6em);
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
transition: all .3s;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> *,
|
||||
img {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
+ * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
+ label {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.two {
|
||||
> .row {
|
||||
width: 200%;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(1):checked ~ .row {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
> label img {
|
||||
width: 48%;
|
||||
margin: 4% 0 4% 4%;
|
||||
}
|
||||
}
|
||||
|
||||
&.three {
|
||||
> .row {
|
||||
width: 300%;
|
||||
left: -200%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(1):checked ~ .row {
|
||||
margin-left: 200%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(2):checked ~ .row {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
> label img {
|
||||
width: 30%;
|
||||
margin: 5% 0 5% 5%;
|
||||
}
|
||||
}
|
||||
|
||||
&.four {
|
||||
> .row {
|
||||
width: 400%;
|
||||
left: -300%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(1):checked ~ .row {
|
||||
margin-left: 300%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(2):checked ~ .row {
|
||||
margin-left: 200%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(3):checked ~ .row {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
> label img {
|
||||
width: 22%;
|
||||
margin: 4% 0 4% 4%;
|
||||
}
|
||||
}
|
||||
|
||||
&.five {
|
||||
> .row {
|
||||
width: 500%;
|
||||
left: -400%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(1):checked ~ .row {
|
||||
margin-left: 400%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(2):checked ~ .row {
|
||||
margin-left: 300%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(3):checked ~ .row {
|
||||
margin-left: 200%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(4):checked ~ .row {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
> label img {
|
||||
width: 18%;
|
||||
margin: 2% 0 2% 2%;
|
||||
}
|
||||
}
|
||||
|
||||
&.six {
|
||||
> .row {
|
||||
width: 600%;
|
||||
left: -500%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(1):checked ~ .row {
|
||||
margin-left: 500%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(2):checked ~ .row {
|
||||
margin-left: 400%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(3):checked ~ .row {
|
||||
margin-left: 300%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(4):checked ~ .row {
|
||||
margin-left: 200%;
|
||||
}
|
||||
|
||||
> input:nth-of-type(5):checked ~ .row {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
> label img {
|
||||
width: 12%;
|
||||
margin: 1% 0 1% 1%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
>label:first-of-type img {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import "class";
|
||||
|
||||
.tabs {
|
||||
@extend %tabs;
|
||||
}
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"id": "tabs",
|
||||
"name": "Tabs",
|
||||
"summary": "Tab system for webpage",
|
||||
"affected": ".tabs",
|
||||
"included": false
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
## Tabs
|
||||
|
||||
> Original: http://jsfiddle.net/franciscop/wwfby2y8/
|
||||
|
||||
A simple tab system inspired by [Components CSS Tabs](https://www.felipefialho.com/css-components/#component-tab).
|
||||
|
||||
```html
|
||||
<div class="tabs three">
|
||||
<input id='tab-1' type='radio' name='tabgroupB' checked />
|
||||
<label class="pseudo button toggle" for="tab-1">Forest</label>
|
||||
<input id='tab-2' type='radio' name='tabgroupB'>
|
||||
<label class="pseudo button toggle" for="tab-2">Lake</label>
|
||||
<input id='tab-3' type='radio' name='tabgroupB'>
|
||||
<label class="pseudo button toggle" for="tab-3">Balloon</label>
|
||||
<div class="row">
|
||||
<div>
|
||||
<img src="img/forest.jpg">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="img/lake.jpg">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="img/balloon.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Gallery example
|
||||
|
||||
Create a gallery super-easy with thumbnails as tabs:
|
||||
|
||||
```html
|
||||
<div class="tabs four">
|
||||
<input id="tabC-1" type='radio' name='tabGroupC' checked >
|
||||
<input id="tabC-2" type='radio' name='tabGroupC'>
|
||||
<input id="tabC-3" type='radio' name='tabGroupC'>
|
||||
<input id="tabC-4" type='radio' name='tabGroupC'>
|
||||
<div class='row'>
|
||||
<div>
|
||||
<img src="img/forest.jpg">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/lake.jpg">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/halong.jpg">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/balloon.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<label for="tabC-1"><img src="img/forest.jpg"></label>
|
||||
<label for="tabC-2"><img src="img/lake.jpg"></label>
|
||||
<label for="tabC-3"><img src="img/halong.jpg"></label>
|
||||
<label for="tabC-4"><img src="img/balloon.jpg"></label>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,250 +0,0 @@
|
|||
<h2>Tab</h2>
|
||||
|
||||
<div class="flex two">
|
||||
<div>
|
||||
<div class="tabs three">
|
||||
<input id="tab-1" type="radio" name="tabgroupB" checked />
|
||||
<label class="pseudo button toggle" for="tab-1">Forest</label>
|
||||
<input id="tab-2" type="radio" name="tabgroupB" />
|
||||
<label class="pseudo button toggle" for="tab-2">Lake</label>
|
||||
<input id="tab-3" type="radio" name="tabgroupB" />
|
||||
<label class="pseudo button toggle" for="tab-3">Balloon</label>
|
||||
<div class="row">
|
||||
<div><img src="img/forest.jpg" /></div>
|
||||
|
||||
<div><img src="img/lake.jpg" /></div>
|
||||
|
||||
<div><img src="img/balloon.jpg" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="tabs three" style="text-align: center;">
|
||||
<input id="tabC-1" type="radio" name="tabgroupC" checked />
|
||||
<label class="pseudo button toggle" for="tabC-1">1</label> /
|
||||
<input id="tabC-2" type="radio" name="tabgroupC" />
|
||||
<label class="pseudo button toggle" for="tabC-2">2</label> /
|
||||
<input id="tabC-3" type="radio" name="tabgroupC" />
|
||||
<label class="pseudo button toggle" for="tabC-3">3</label>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="card" style="margin: 0 20px;">
|
||||
<header><h3>Super important notice!</h3></header>
|
||||
<p>
|
||||
Thank you for registering! By doing so you agree to the
|
||||
<a href="#">Terms and conditions</a>
|
||||
</p>
|
||||
<footer><label class="button" for="tabC-2">Agree</label></footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="card" style="margin: 0 20px;">
|
||||
<header><h3>Your basic data</h3></header>
|
||||
<section><input type="text" placeholder="Full Name" /></section>
|
||||
<section>
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Where did you find us?</option>
|
||||
<option>Facebook</option>
|
||||
<option>Twitter</option>
|
||||
<option>Linkedin</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<label class="button" for="tabC-3">Next</label>
|
||||
<label class="button dangerous" for="tabC-1">Back</label>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="card" style="margin: 0 20px;">
|
||||
<header><h3>Create account</h3></header>
|
||||
<section><input type="email" placeholder="Email" /></section>
|
||||
<section><input type="password" placeholder="Password" /></section>
|
||||
<footer>
|
||||
<button class="success">Finish!</button>
|
||||
<label class="button dangerous" for="tabC-2">Back</label>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="tabs two">
|
||||
<input id="tabA-1" type="radio" name="tabgroupA" checked />
|
||||
<label class="button toggle" for="tabA-1">Tab 1</label>
|
||||
<input id="tabA-2" type="radio" name="tabgroupA" />
|
||||
<label class="button toggle" for="tabA-2">Tab 2</label>
|
||||
<div class="row">
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the first tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the second tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="tabs four">
|
||||
<input id="tabD-1" type="radio" name="tabgroupD" checked />
|
||||
<label class="pseudo button toggle" for="tabD-1">•</label>
|
||||
<input id="tabD-2" type="radio" name="tabgroupD" />
|
||||
<label class="pseudo button toggle" for="tabD-2">•</label>
|
||||
<input id="tabD-3" type="radio" name="tabgroupD" />
|
||||
<label class="pseudo button toggle" for="tabD-3">•</label>
|
||||
<input id="tabD-4" type="radio" name="tabgroupD" />
|
||||
<label class="pseudo button toggle" for="tabD-4">•</label>
|
||||
<div class="row">
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the first tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the second tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the third tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the fourth tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="tabs six">
|
||||
<input id="tabE-1" type="radio" name="tabgroupE" checked />
|
||||
<label class="pseudo button toggle" for="tabE-1">•</label>
|
||||
<input id="tabE-2" type="radio" name="tabgroupE" />
|
||||
<label class="pseudo button toggle" for="tabE-2">•</label>
|
||||
<input id="tabE-3" type="radio" name="tabgroupE" />
|
||||
<label class="pseudo button toggle" for="tabE-3">•</label>
|
||||
<input id="tabE-4" type="radio" name="tabgroupE" />
|
||||
<label class="pseudo button toggle" for="tabE-4">•</label>
|
||||
<input id="tabE-5" type="radio" name="tabgroupE" />
|
||||
<label class="pseudo button toggle" for="tabE-5">•</label>
|
||||
<input id="tabE-6" type="radio" name="tabgroupE" />
|
||||
<label class="pseudo button toggle" for="tabE-6">•</label>
|
||||
<div class="row">
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the first tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the second tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the third tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the fourth tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the fifth tab</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<div>
|
||||
<h2>This is the sixth tab</h2>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
// Variables for the tooltips
|
||||
$picnic-tooltip-background: $picnic-black !default;
|
||||
$picnic-tooltip-size: .8em !default;
|
||||
|
||||
|
||||
// Only display the tooltip for elements with <element data-tooltip="blabla">
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
// Position
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
// Hide it by default
|
||||
opacity: 0;
|
||||
border-width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// Transition
|
||||
transition: opacity .6s ease, height 0s ease .6s;
|
||||
|
||||
// Bottom one (default)
|
||||
top: calc(100% - 6px);
|
||||
left: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
// This is the acutal label-like element
|
||||
&:after {
|
||||
|
||||
// Style
|
||||
@extend .label;
|
||||
margin-left: 0;
|
||||
font-size: $picnic-tooltip-size;
|
||||
background: $picnic-tooltip-background;
|
||||
|
||||
// Content
|
||||
content: attr(data-tooltip);
|
||||
|
||||
// Behaviour
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// This is the small arrow
|
||||
&:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
|
||||
// Bottom one (default)
|
||||
border-color: transparent transparent $picnic-tooltip-background;
|
||||
margin-top: 0;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:focus:after,
|
||||
&:hover:before,
|
||||
&:focus:before {
|
||||
opacity: 1;
|
||||
border-width: 6px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:focus:after {
|
||||
padding: $picnic-separation * .75 $picnic-separation * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Top
|
||||
.tooltip-top {
|
||||
&:after,
|
||||
&:before {
|
||||
top: auto;
|
||||
bottom: calc(100% - 6px);
|
||||
left: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: $picnic-tooltip-background transparent transparent;
|
||||
margin-bottom: 0;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
.tooltip-right {
|
||||
&:after,
|
||||
&:before {
|
||||
left: 100%;
|
||||
margin-left: 6px;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: transparent $picnic-tooltip-background transparent transparent;
|
||||
margin-left: -6px;
|
||||
left: 100%;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Left
|
||||
.tooltip-left {
|
||||
&:after,
|
||||
&:before {
|
||||
right: 100%;
|
||||
margin-right: 6px;
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: transparent transparent transparent $picnic-tooltip-background;
|
||||
margin-right: -6px;
|
||||
right: 100%;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<button data-tooltip="This is a great tooltip" class="tooltip-left">
|
||||
Left
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip">
|
||||
Bottom (default)
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-top">
|
||||
Top
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-right">
|
||||
Right
|
||||
</button>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"id": "tooltip",
|
||||
"name": "Tooltip",
|
||||
"included": false,
|
||||
"affected": "[data-tooltip]",
|
||||
"summary": "An element that displays extra information when you put your mouse on it.",
|
||||
"dependencies": [ "label" ]
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
## Tooltip
|
||||
|
||||
Hover this element to show the tooltip:
|
||||
|
||||
```html
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-top">
|
||||
Hover for tooltip
|
||||
</button>
|
||||
```
|
||||
|
||||
|
||||
### Positions
|
||||
|
||||
```html
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-top">
|
||||
Top
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip">
|
||||
Bottom (default)
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-left">
|
||||
Left
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-right">
|
||||
Right
|
||||
</button>
|
||||
```
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<h2 id="tooltip">Tooltip</h2>
|
||||
|
||||
<p>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-left">
|
||||
Left
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip">
|
||||
Bottom (default)
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-top">
|
||||
Top
|
||||
</button>
|
||||
<button data-tooltip="This is a great tooltip" class="tooltip-right">
|
||||
Right
|
||||
</button>
|
||||
</p>
|
||||
<br><br><br>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# Picnic CSS
|
||||
|
||||
Picnic CSS is a lightweight and beautiful CSS library
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// Color variables
|
||||
// - Cool
|
||||
// - Warm
|
||||
// - Gray Scale
|
||||
//
|
||||
// clrs, from https://github.com/mrmrs/colors
|
||||
|
||||
// Cool
|
||||
$aqua: #7fdbff !default;
|
||||
$blue: #0074d9 !default;
|
||||
$navy: #001f3f !default;
|
||||
$teal: #39cccc !default;
|
||||
$green: #2ecc40 !default;
|
||||
$olive: #3d9970 !default;
|
||||
$lime: #01ff70 !default;
|
||||
|
||||
// Warm
|
||||
$yellow: #ffdc00 !default;
|
||||
$orange: #ff851b !default;
|
||||
$red: #ff4136 !default;
|
||||
$fuchsia: #f012be !default;
|
||||
$purple: #b10dc9 !default;
|
||||
$maroon: #85144b !default;
|
||||
|
||||
// Gray Scale
|
||||
$white: #fff !default;
|
||||
$silver: #ddd !default;
|
||||
$gray: #aaa !default;
|
||||
$black: #111 !default;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Top level variables for Picnic CSS
|
||||
// Note: some others are available under each specific plugin
|
||||
|
||||
@import 'colors';
|
||||
|
||||
|
||||
// Colors (from /themes/default/colors)
|
||||
$picnic-white: $white !default;
|
||||
$picnic-black: $black !default;
|
||||
$picnic-primary: $blue !default;
|
||||
$picnic-success: $green !default;
|
||||
$picnic-warning: $orange !default;
|
||||
$picnic-error: $red !default;
|
||||
$picnic-dull: $gray !default;
|
||||
$picnic-color-variation: 10% !default;
|
||||
$picnic-transparency: .2 !default;
|
||||
|
||||
|
||||
// Spaces
|
||||
$picnic-separation: .6em !default;
|
||||
$picnic-breakpoint: 60em !default;
|
||||
|
||||
|
||||
// Shapes
|
||||
$picnic-radius: .2em !default;
|
||||
$picnic-border: 1px solid $picnic-dull !default;
|
||||
$picnic-shadow: 0 0 .2em rgba($picnic-dull, $picnic-transparency) !default;
|
||||
$picnic-overlay: rgba($picnic-black, $picnic-transparency);
|
||||
|
||||
// Transitions
|
||||
$picnic-transition: all .3s;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// Color variables
|
||||
// - Cool
|
||||
// - Warm
|
||||
// - Gray Scale
|
||||
//
|
||||
// clrs, from https://github.com/mrmrs/colors
|
||||
|
||||
// Cool
|
||||
$aqua: #7fdbff !default;
|
||||
$blue: #0074d9 !default;
|
||||
$navy: #001f3f !default;
|
||||
$teal: #39cccc !default;
|
||||
$green: #2ecc40 !default;
|
||||
$olive: #3d9970 !default;
|
||||
$lime: #01ff70 !default;
|
||||
|
||||
// Warm
|
||||
$yellow: #ffdc00 !default;
|
||||
$orange: #ff851b !default;
|
||||
$red: #ff4136 !default;
|
||||
$fuchsia: #f012be !default;
|
||||
$purple: #b10dc9 !default;
|
||||
$maroon: #85144b !default;
|
||||
|
||||
// Gray Scale
|
||||
$white: #fff !default;
|
||||
$silver: #ddd !default;
|
||||
$gray: #aaa !default;
|
||||
$black: #111 !default;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
|
||||
%nav {
|
||||
background: transparent;
|
||||
transition: 0;
|
||||
|
||||
.brand,
|
||||
.pseudo.button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// Top level variables for Picnic CSS
|
||||
// Note: some others are available under each specific plugin
|
||||
|
||||
@import 'colors';
|
||||
|
||||
|
||||
// Colors (from /themes/default/colors)
|
||||
$picnic-white: #fff;
|
||||
$picnic-black: #111;
|
||||
$picnic-primary: darken($green, 5%) !default;
|
||||
$picnic-success: $blue !default;
|
||||
$picnic-warning: $orange !default;
|
||||
$picnic-error: $red !default;
|
||||
$picnic-dull: $gray !default;
|
||||
$picnic-color-variation: 10% !default;
|
||||
$picnic-transparency: .1 !default;
|
||||
|
||||
|
||||
// Spaces
|
||||
$picnic-separation: .6em !default;
|
||||
$picnic-breakpoint: 60em !default;
|
||||
|
||||
|
||||
// Shapes
|
||||
$picnic-radius: 0 !default;
|
||||
$picnic-border: 1px solid #ddd !default;
|
||||
$picnic-shadow: none !default;
|
||||
$picnic-overlay: rgba($picnic-black, $picnic-transparency);
|
||||
|
||||
|
||||
// Transitions
|
||||
$picnic-transition: all .2s ease !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Plugins
|
||||
$picnic-nav-position: absolute !default;
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{
|
||||
"name": "compass-breakpoint",
|
||||
"version": "2.6.1",
|
||||
"main": "stylesheets/_breakpoint.scss",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"components",
|
||||
"test",
|
||||
"tests",
|
||||
"Rakefile",
|
||||
"*.gemspec",
|
||||
"lib",
|
||||
"Gemfile"
|
||||
],
|
||||
"dependencies": {
|
||||
"sassy-maps": "<1.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/Team-Sass/breakpoint",
|
||||
"_release": "2.6.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v2.6.1",
|
||||
"commit": "5baa6382a350f75d88444271e4a509eea0ced001"
|
||||
},
|
||||
"_source": "git://github.com/Team-Sass/breakpoint.git",
|
||||
"_target": "~2.6.1",
|
||||
"_originalSource": "compass-breakpoint",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
# Changelog
|
||||
|
||||
## 2.6.0
|
||||
* **Change** Moved variable settings to new Breakpoint settings. Future versions will deprecate variable settings. Use `@include breakpoint-set()` or `@include bkpt-set()` to change settings, `@include breakpoint-reset()` or `@include bkpt-reset()` to reset settings to their default state. Please update your settings as followins:
|
||||
* `$breakpoint-default-media: value;` should become `@include bkpt-set('default media', value);`
|
||||
* `$breakpoint-default-feature: value;` should become `@include bkpt-set('default feature', value);`
|
||||
* `$breakpoint-default-pair: value;` should become `@include bkpt-set('default pair', value);`
|
||||
* `$breakpoint-force-media-all: value;` should become `@include bkpt-set('force all media type', value);`
|
||||
* `$breakpoint-to-ems: value;` should become `@include bkpt-set('to ems', value);`
|
||||
* `$breakpoint-resolutions: value;` should become `@include bkpt-set('transform resolutions', value);`
|
||||
* `$breakpoint-no-queries: value;` should become `@include bkpt-set('no queries', value);`
|
||||
* `$breakpoint-no query fallbacks: value;` should become `@include bkpt-set('no query fallbacks', value);`
|
||||
* `$breakpoint-base-font-size: value;` should become `@include bkpt-set('base font size', value);`
|
||||
* `$breakpoint-legacy-syntax: value;` should become `@include bkpt-set('legacy syntax', value);`
|
||||
* **Change** Adding breakpoints for `respond-to` should now be done through the mixin `@include add-breakpoint()` instead of the function call `$breakpoints: add-breakpoint()`. Future versions will deprecate function.
|
||||
* **New** Initial support for Libsass 3.1
|
||||
|
||||
## 2.5.0
|
||||
|
||||
## 2.4.0
|
||||
|
||||
## 2.3.0
|
||||
|
||||
## 2.2.0
|
||||
### Nov 23, 2013
|
||||
* fix simple or queries
|
||||
* convert respond-to to use sass maps
|
||||
* convert context to use sass maps
|
||||
|
||||
## 2.0.7
|
||||
### Sept 17th, 2013
|
||||
* fix fallback support for 1.x
|
||||
|
||||
## 2.0.0
|
||||
### The Past
|
||||
* Looks like we forgot release notes for 2.0. oops
|
||||
|
||||
## 1.3
|
||||
### August 28th, 2012
|
||||
* better conversion to base-ems
|
||||
* fix floating point error
|
||||
|
||||
## 1.2
|
||||
### August 16th, 2012
|
||||
* Added ability to force the 'all' media type to be written by setting `$breakpoint-force-media-all: true;`. Defaults to `false`.
|
||||
* Added ability to generate no query fallback code. See the README for full documentaiton.
|
||||
|
||||
## 1.1.1
|
||||
### July 30, 2012
|
||||
* Added (forgot to include the first time) the ability to query the media type using `breakpoint-get-context('media')`
|
||||
|
||||
|
||||
## 1.1
|
||||
### July 29, 2012
|
||||
* Added function `breakpoint-get-context($feature)` to allow users to get the current media query context
|
||||
|
||||
## 1.0.2
|
||||
### July 28, 2012
|
||||
* Refixed our 'device-pixel-ratio' conversions because, frankly, the w3c was wrong.
|
||||
* fixed bugs that caused single and triple value single queries to fail. Also bugs with stacking single and triple value queries.
|
||||
|
||||
## 1.0.1
|
||||
### June 27, 2012
|
||||
* fixed logic error that would print multiple instences of a media type
|
||||
|
||||
## 1.0
|
||||
### June 22, 2012
|
||||
* Refactor of the underlying logic to make everything work better and make the world a happy place.
|
||||
* Added default options for Default Feature, Default Media, and Default Feature Pair.
|
||||
* Changed default media from "Screen" to "All".
|
||||
* Added ability to have all px/pt/percentage media queries transformed into em based media queries.
|
||||
|
||||
## 0.3
|
||||
### June 18, 2012
|
||||
* Rewrote 'device-pixel-ratio' conversions to change from prefixed nightmarish hell to Resolution standard based on the [W3C Unprefixing -webkit-device-pixel-ratio article](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/)
|
||||
* Large README update covering feature set, installation, assumptions, and more.
|
||||
|
||||
## 0.2
|
||||
### May 24, 2012
|
||||
* Converted from Sass to SCSS
|
||||
* Converted README examples from Sass to SCSS
|
||||
* Added ability to do min/max easily with any valid feature
|
||||
* Added prefixing for "device-pixel-ratio" feature for the three implementations (-webkit, -moz, -o) as well as a standard version for future friendliness
|
||||
* -moz's min/max is different than -webkit or -o, so prefixed differently
|
||||
* Opera is strange and needs its DPR in a ratio instead of a floating point number, so requires the fraction rubygem and has a numerator/denominator function to accommodate.
|
||||
* Added ability to have single feature/value input be either have feature first or second
|
||||
|
||||
## 0.1
|
||||
### May 22, 2012
|
||||
* extract breakpoint from survival kit to this gem
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
## Contributing to Breakpoint
|
||||
|
||||
We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the following guidelines:
|
||||
|
||||
* **DO NOT ISSUE A PULL REQUEST WITHOUT RELATED ISSUE!!** All pull requests must reference an issue in the issue queue and will only be looked at after discussion about that issue has taken place. Any pull request created that does not reference an issue will be closed.
|
||||
* All pull requests will be tested against our standard test suite through Travis CI. If any of the tests fail, we will ask you to fix your code so that the tests no longer fail. Any new features that are added must have accompanying passing tests before being considered. During a pull request, we may ask for additional tests to be written in order to ensure that what is being changed does not have negative effects elsewhere.
|
||||
* We are actively trying to stay away from Ruby functionality and am attempting to build this entirely with native Sass functionality. If you would like to add a feature that includes Ruby code, there needs to be a very very compelling case as to why.
|
||||
* Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 2.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Breakpoint) we may ask you to rewrite your commit.
|
||||
|
||||
### Testing
|
||||
|
||||
We have automated tests to ensure our build is working. To test, you must install [Bundler](http://bundler.io/), which will allow you to install all needed gem versions. Once you have Bundler up and running and have your dependencies installed, run ```bundle exec rake``` to run the tests. All tests are stored within the 'test' folder as .scss files. The test suite ensures that each test compiles, and does not change the expected behavior. If a test needs to be updated or changed, update the correct .scss file, and then run ```bundle exec rake compile``` to update all corrosponding css files.
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
# Breakpoint [](http://badge.fury.io/rb/breakpoint) [](https://travis-ci.org/Team-Sass/breakpoint)
|
||||
|
||||
**Really Simple Media Queries with Sass**
|
||||
|
||||
Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the `breakpoint` mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
|
||||
|
||||
Breakpoint also allows you to get the [context of your media queries](https://github.com/Team-Sass/breakpoint/wiki/Breakpoint-Context) from your code, allowing you to write dynamic mixins based on their media query context.
|
||||
|
||||
If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, the [Respond-To](https://github.com/Team-Sass/breakpoint/wiki/Respond-To) syntax is now included in Breakpoint core!
|
||||
|
||||
**It is important to note** that due to limitations within the Sass language itself, which themselves stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoidable. That being said, once [Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet](https://github.com/nex3/sass/issues/241) hits, be sure we're going to take full advantage of it.
|
||||
|
||||
|
||||
## Full documentation is available on the [Breakpoint Wiki](https://github.com/Team-Sass/breakpoint/wiki)
|
||||
|
||||
## Getting Help with Breakpoint
|
||||
|
||||
* For help with Breakpoint, please ask a question on [Stack Overflow](http://stackoverflow.com/questions/ask) tagged with "breakpoint-sass".
|
||||
* To file an issue with Breakpoint, be it a feature request or a bug report, please use our [Issue Queue](https://github.com/Team-Sass/breakpoint/issues).
|
||||
* **Each Separate Bug Report or Feature Request Must Have Its Own Issue**
|
||||
* Search in both active issues and closed issues before filing your own. If one already exists, please respond there.
|
||||
* If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on irc.freenode.net. Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to
|
||||
|
||||
## Contributing to Breakpoint
|
||||
|
||||
We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the [Contributing Guidelines](https://github.com/Team-Sass/breakpoint/blob/2.x.x/CONTRIBUTING.md)
|
||||
|
||||
## Awesome Things Built With Breakpoint
|
||||
|
||||
Breakpoint is designed to be a Media Query engine to power everything from design tweaks to media query contexts to full media query fallbacks. But we also know that our users will build awesome thing with these tools. Build a Breakpoint powered mixin for new media query semantics? We want to hear about it! Build something cool with Context? Let us know! If you would like to add your Awesome Thing to the list, please issue a Pull Request to add it!
|
||||
|
||||
* [Singularity](https://github.com/Team-Sass/Singularity) - Semantic Grid System
|
||||
* [Breakpoint Slicer](https://github.com/lolmaus/breakpoint-slicer) - Quick and efficient syntax for Min/Max Width media queries
|
||||
|
||||
## License
|
||||
|
||||
Licensed under MIT/GPL.
|
||||
|
||||
GPL2 license:
|
||||
http://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
MIT license:
|
||||
http://www.opensource.org/licenses/mit-license.php
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"name": "compass-breakpoint",
|
||||
"version": "2.6.1",
|
||||
"main": "stylesheets/_breakpoint.scss",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"components",
|
||||
"test",
|
||||
"tests",
|
||||
"Rakefile",
|
||||
"*.gemspec",
|
||||
"lib",
|
||||
"Gemfile"
|
||||
],
|
||||
"dependencies": {
|
||||
"sassy-maps": "<1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
var path = require('path');
|
||||
|
||||
module.exports = function(eyeglass, sass) {
|
||||
return {
|
||||
sassDir: path.join(__dirname, 'stylesheets')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"name": "breakpoint-sass",
|
||||
"version": "2.6.1",
|
||||
"description": "Really Simple Media Queries with Sass",
|
||||
"main": "stylesheets/_breakpoint.scss",
|
||||
"eyeglass": {
|
||||
"exports": "eyeglass-exports.js",
|
||||
"name": "breakpoint"
|
||||
},
|
||||
"directories": {
|
||||
"test": "tests"
|
||||
},
|
||||
"keywords": [
|
||||
"sass",
|
||||
"responsive",
|
||||
"rwd",
|
||||
"eyeglass-module",
|
||||
"breakpoint"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Team-Sass/breakpoint.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Team-Sass/breakpoint/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Team-Sass/breakpoint",
|
||||
"devDependencies": {
|
||||
"diff": "^1.2.1",
|
||||
"fs-extra": "^0.14.0",
|
||||
"glob": "^4.3.2",
|
||||
"node-sass": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"name": "breakpoint",
|
||||
"description": "Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.",
|
||||
"tags": ["media-queries", "rwd", "responsive-web-design", "dry"]
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
//////////////////////////////
|
||||
// Default Variables
|
||||
//////////////////////////////
|
||||
$Breakpoint-Settings: (
|
||||
'default media': all,
|
||||
'default feature': min-width,
|
||||
'default pair': width,
|
||||
|
||||
'force all media type': false,
|
||||
'to ems': false,
|
||||
'transform resolutions': true,
|
||||
|
||||
'no queries': false,
|
||||
'no query fallbacks': false,
|
||||
|
||||
'base font size': 16px,
|
||||
|
||||
'legacy syntax': false
|
||||
);
|
||||
|
||||
$breakpoint: () !default;
|
||||
|
||||
//////////////////////////////
|
||||
// Imports
|
||||
//////////////////////////////
|
||||
@import "breakpoint/settings";
|
||||
@import 'breakpoint/context';
|
||||
@import 'breakpoint/helpers';
|
||||
@import 'breakpoint/parsers';
|
||||
@import 'breakpoint/no-query';
|
||||
|
||||
@import 'breakpoint/respond-to';
|
||||
|
||||
@import "breakpoint/legacy-settings";
|
||||
|
||||
//////////////////////////////
|
||||
// Breakpoint Mixin
|
||||
//////////////////////////////
|
||||
|
||||
@mixin breakpoint($query, $no-query: false) {
|
||||
@include legacy-settings-warning;
|
||||
|
||||
// Reset contexts
|
||||
@include private-breakpoint-reset-contexts();
|
||||
|
||||
$breakpoint: breakpoint($query, false);
|
||||
|
||||
$query-string: map-get($breakpoint, 'query');
|
||||
$query-fallback: map-get($breakpoint, 'fallback');
|
||||
|
||||
$private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
|
||||
$private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
|
||||
|
||||
// Allow for an as-needed override or usage of no query fallback.
|
||||
@if $no-query != false {
|
||||
$query-fallback: $no-query;
|
||||
}
|
||||
|
||||
@if $query-fallback != false {
|
||||
$context-setter: private-breakpoint-set-context('no-query', $query-fallback);
|
||||
}
|
||||
|
||||
// Print Out Query String
|
||||
@if not breakpoint-get('no queries') {
|
||||
@media #{$query-string} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
|
||||
|
||||
$type: type-of(breakpoint-get('no query fallbacks'));
|
||||
$print: false;
|
||||
|
||||
@if ($type == 'bool') {
|
||||
$print: true;
|
||||
}
|
||||
@else if ($type == 'string') {
|
||||
@if $query-fallback == breakpoint-get('no query fallbacks') {
|
||||
$print: true;
|
||||
}
|
||||
}
|
||||
@else if ($type == 'list') {
|
||||
@each $wrapper in breakpoint-get('no query fallbacks') {
|
||||
@if $query-fallback == $wrapper {
|
||||
$print: true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Write Fallback
|
||||
@if ($query-fallback != false) and ($print == true) {
|
||||
$type-fallback: type-of($query-fallback);
|
||||
|
||||
@if ($type-fallback != 'bool') {
|
||||
#{$query-fallback} & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include private-breakpoint-reset-contexts();
|
||||
}
|
||||
|
||||
|
||||
@mixin mq($query, $no-query: false) {
|
||||
@include breakpoint($query, $no-query) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
//////////////////////////////
|
||||
// Private Breakpoint Variables
|
||||
//////////////////////////////
|
||||
$private-breakpoint-context-holder: ();
|
||||
$private-breakpoint-query-count: 0 !default;
|
||||
|
||||
//////////////////////////////
|
||||
// Breakpoint Has Context
|
||||
// Returns whether or not you are inside a Breakpoint query
|
||||
//////////////////////////////
|
||||
@function breakpoint-has-context() {
|
||||
@if length($private-breakpoint-query-count) {
|
||||
@return true;
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Breakpoint Get Context
|
||||
// $feature: Input feature to get it's current MQ context. Returns false if no context
|
||||
//////////////////////////////
|
||||
@function breakpoint-get-context($feature) {
|
||||
@if map-has-key($private-breakpoint-context-holder, $feature) {
|
||||
$get: map-get($private-breakpoint-context-holder, $feature);
|
||||
// Special handling of no-query from get side so /false/ prepends aren't returned
|
||||
@if $feature == 'no-query' {
|
||||
@if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false {
|
||||
$get: nth($get, length($get));
|
||||
}
|
||||
}
|
||||
@return $get;
|
||||
}
|
||||
@else {
|
||||
@if breakpoint-has-context() and $feature == 'media' {
|
||||
@return breakpoint-get('default media');
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Private function to set context
|
||||
//////////////////////////////
|
||||
@function private-breakpoint-set-context($feature, $value) {
|
||||
@if $value == 'monochrome' {
|
||||
$feature: 'monochrome';
|
||||
}
|
||||
|
||||
$current: map-get($private-breakpoint-context-holder, $feature);
|
||||
@if $current and length($current) == $private-breakpoint-query-count {
|
||||
@warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`";
|
||||
}
|
||||
|
||||
@if not map-has-key($private-breakpoint-context-holder, $feature) {
|
||||
$v-holder: ();
|
||||
@for $i from 1 to $private-breakpoint-query-count {
|
||||
@if $feature == 'media' {
|
||||
$v-holder: append($v-holder, breakpoint-get('default media'));
|
||||
}
|
||||
@else {
|
||||
$v-holder: append($v-holder, false);
|
||||
}
|
||||
}
|
||||
$v-holder: append($v-holder, $value);
|
||||
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
|
||||
}
|
||||
@else {
|
||||
$v-holder: map-get($private-breakpoint-context-holder, $feature);
|
||||
$length: length($v-holder);
|
||||
@for $i from $length to $private-breakpoint-query-count - 1 {
|
||||
@if $feature == 'media' {
|
||||
$v-holder: append($v-holder, breakpoint-get('default media'));
|
||||
}
|
||||
@else {
|
||||
$v-holder: append($v-holder, false);
|
||||
}
|
||||
}
|
||||
$v-holder: append($v-holder, $value);
|
||||
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Private function to reset context
|
||||
//////////////////////////////
|
||||
@mixin private-breakpoint-reset-contexts {
|
||||
$private-breakpoint-context-holder: () !global;
|
||||
$private-breakpoint-query-count: 0 !global;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue