vendor in picnic scss lib
This commit is contained in:
Joe Ardent
parent
14c36397d1
commit
826c21b4df
134 changed files with 6081 additions and 0 deletions
26
scss/LICENSE.txt
Normal file
26
scss/LICENSE.txt
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
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.
|
||||
42
scss/picnic.scss
Normal file
42
scss/picnic.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
//! 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';
|
||||
69
scss/plugins/button/_class.scss
Normal file
69
scss/plugins/button/_class.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// %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"], ...`
|
||||
28
scss/plugins/button/_plugin.scss
Normal file
28
scss/plugins/button/_plugin.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// 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;
|
||||
}
|
||||
7
scss/plugins/button/info.json
Normal file
7
scss/plugins/button/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"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."
|
||||
}
|
||||
83
scss/plugins/button/readme.md
Normal file
83
scss/plugins/button/readme.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
## 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;
|
||||
}
|
||||
```
|
||||
56
scss/plugins/button/test.html
Normal file
56
scss/plugins/button/test.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!-- 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>
|
||||
132
scss/plugins/card/_class.scss
Normal file
132
scss/plugins/card/_class.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
7
scss/plugins/card/_plugin.scss
Normal file
7
scss/plugins/card/_plugin.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// Definition of card
|
||||
@import 'class';
|
||||
|
||||
// Implementation of card
|
||||
.card {
|
||||
@extend %card;
|
||||
}
|
||||
7
scss/plugins/card/info.json
Normal file
7
scss/plugins/card/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "card",
|
||||
"name": "Card",
|
||||
"included": false,
|
||||
"affected": ".card",
|
||||
"summary": "A self-contained, independent element. It works great with others of its kind."
|
||||
}
|
||||
54
scss/plugins/card/readme.md
Normal file
54
scss/plugins/card/readme.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
## 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>
|
||||
```
|
||||
69
scss/plugins/card/test.html
Normal file
69
scss/plugins/card/test.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<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>
|
||||
31
scss/plugins/checkbox/_class.scss
Normal file
31
scss/plugins/checkbox/_class.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
8
scss/plugins/checkbox/_plugin.scss
Normal file
8
scss/plugins/checkbox/_plugin.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// Get the checkbox definition
|
||||
@import 'class';
|
||||
|
||||
// Define it for the element checkbox
|
||||
[type=checkbox] {
|
||||
@extend %radio;
|
||||
@extend %checkbox;
|
||||
}
|
||||
10
scss/plugins/checkbox/info.json
Normal file
10
scss/plugins/checkbox/info.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"id": "checkbox",
|
||||
"name": "Checkbox",
|
||||
"included": true,
|
||||
"affected": "[type=checkbox]",
|
||||
"summary": "The classical checkbox revisited for bigger and coherent shape.",
|
||||
"dependencies": [
|
||||
"radiocheckbox/v2"
|
||||
]
|
||||
}
|
||||
73
scss/plugins/checkbox/readme.md
Normal file
73
scss/plugins/checkbox/readme.md
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
## 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'));
|
||||
});
|
||||
```
|
||||
9
scss/plugins/checkbox/test.html
Normal file
9
scss/plugins/checkbox/test.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<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>
|
||||
59
scss/plugins/dropimage/_class.scss
Normal file
59
scss/plugins/dropimage/_class.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
8
scss/plugins/dropimage/_plugin.scss
Normal file
8
scss/plugins/dropimage/_plugin.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// 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
scss/plugins/dropimage/camera.svg
Normal file
1
scss/plugins/dropimage/camera.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 605 B |
96
scss/plugins/dropimage/camera_original.svg
Normal file
96
scss/plugins/dropimage/camera_original.svg
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<?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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
12
scss/plugins/dropimage/info.json
Normal file
12
scss/plugins/dropimage/info.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
73
scss/plugins/dropimage/readme.md
Normal file
73
scss/plugins/dropimage/readme.md
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
## 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>
|
||||
```
|
||||
34
scss/plugins/dropimage/test.html
Normal file
34
scss/plugins/dropimage/test.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<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>
|
||||
12
scss/plugins/fontello/_plugin.scss
Normal file
12
scss/plugins/fontello/_plugin.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// 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;
|
||||
}
|
||||
7
scss/plugins/fontello/info.json
Normal file
7
scss/plugins/fontello/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "fontello",
|
||||
"name": "Fontello",
|
||||
"description": "It overwrites some styles from fontello for better integration",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
72
scss/plugins/generic/_plugin.scss
Normal file
72
scss/plugins/generic/_plugin.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
* {
|
||||
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;
|
||||
}
|
||||
7
scss/plugins/generic/info.json
Normal file
7
scss/plugins/generic/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "generic",
|
||||
"name": "Generic",
|
||||
"description": "General styles for common elements",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
5
scss/plugins/grid/_class.scss
Normal file
5
scss/plugins/grid/_class.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
$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;
|
||||
162
scss/plugins/grid/_plugin.scss
Normal file
162
scss/plugins/grid/_plugin.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
scss/plugins/grid/info.json
Normal file
7
scss/plugins/grid/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "grids",
|
||||
"name": "Grids",
|
||||
"description": "Simple grid system based on ungrid",
|
||||
"affected": ".row",
|
||||
"included": true
|
||||
}
|
||||
264
scss/plugins/grid/readme.md
Normal file
264
scss/plugins/grid/readme.md
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
## 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
|
||||
15
scss/plugins/grid/test.html
Normal file
15
scss/plugins/grid/test.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<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>
|
||||
25
scss/plugins/input/_class.scss
Normal file
25
scss/plugins/input/_class.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
26
scss/plugins/input/_plugin.scss
Normal file
26
scss/plugins/input/_plugin.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
9
scss/plugins/input/info.json
Normal file
9
scss/plugins/input/info.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"id": "input",
|
||||
"name": "Input and textarea",
|
||||
"affected": "input, textarea",
|
||||
|
||||
"summary-comment": "purposefuly empty",
|
||||
"summary": "",
|
||||
"included": true
|
||||
}
|
||||
17
scss/plugins/input/readme.md
Normal file
17
scss/plugins/input/readme.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
## 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>
|
||||
29
scss/plugins/input/test.html
Normal file
29
scss/plugins/input/test.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<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>
|
||||
43
scss/plugins/label/_class.scss
Normal file
43
scss/plugins/label/_class.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
11
scss/plugins/label/_plugin.scss
Normal file
11
scss/plugins/label/_plugin.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// Inherit from the class
|
||||
@import 'class';
|
||||
|
||||
.label {
|
||||
@extend %label;
|
||||
|
||||
font-size: .6em;
|
||||
padding: .4em .6em;
|
||||
margin-left: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
7
scss/plugins/label/info.json
Normal file
7
scss/plugins/label/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "label",
|
||||
"name": "Label",
|
||||
"summary": "An element to display some short relevant information",
|
||||
"affected": ".label",
|
||||
"included": true
|
||||
}
|
||||
12
scss/plugins/label/readme.md
Normal file
12
scss/plugins/label/readme.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
## 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>
|
||||
```
|
||||
|
||||
19
scss/plugins/label/test.html
Normal file
19
scss/plugins/label/test.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<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>
|
||||
84
scss/plugins/modal/_plugin.scss
Normal file
84
scss/plugins/modal/_plugin.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
.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%;
|
||||
}
|
||||
}
|
||||
12
scss/plugins/modal/info.json
Normal file
12
scss/plugins/modal/info.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
60
scss/plugins/modal/readme.md
Normal file
60
scss/plugins/modal/readme.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
## 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
|
||||
```
|
||||
27
scss/plugins/modal/test.html
Normal file
27
scss/plugins/modal/test.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<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>
|
||||
75
scss/plugins/nav/_class.scss
Normal file
75
scss/plugins/nav/_class.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
121
scss/plugins/nav/_plugin.scss
Normal file
121
scss/plugins/nav/_plugin.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
scss/plugins/nav/info.json
Normal file
7
scss/plugins/nav/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
151
scss/plugins/nav/readme.md
Normal file
151
scss/plugins/nav/readme.md
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
## 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>
|
||||
```
|
||||
19
scss/plugins/nav/test.html
Normal file
19
scss/plugins/nav/test.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<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>
|
||||
434
scss/plugins/normalize/_plugin.scss
Normal file
434
scss/plugins/normalize/_plugin.scss
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
$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;
|
||||
}
|
||||
7
scss/plugins/normalize/info.json
Normal file
7
scss/plugins/normalize/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "normalize",
|
||||
"name": "Normalize",
|
||||
"description": "The foundation of Picnic CSS",
|
||||
"install": "[included]",
|
||||
"partial": true
|
||||
}
|
||||
54
scss/plugins/radio/_class.scss
Normal file
54
scss/plugins/radio/_class.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
// 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%);
|
||||
}
|
||||
}
|
||||
9
scss/plugins/radio/_plugin.scss
Normal file
9
scss/plugins/radio/_plugin.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// Radio
|
||||
// Allows to choose one element from several of them
|
||||
@import 'class';
|
||||
|
||||
|
||||
[type=radio] {
|
||||
@extend %radio;
|
||||
}
|
||||
|
||||
7
scss/plugins/radio/info.json
Normal file
7
scss/plugins/radio/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "radio",
|
||||
"name": "Radiobutton",
|
||||
"included": true,
|
||||
"affected": "[type=radio]",
|
||||
"summary": "Allows to choose one element from several of them."
|
||||
}
|
||||
13
scss/plugins/radio/readme.md
Normal file
13
scss/plugins/radio/readme.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
## 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>
|
||||
```
|
||||
14
scss/plugins/radio/test.html
Normal file
14
scss/plugins/radio/test.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<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>
|
||||
64
scss/plugins/select/_class.scss
Normal file
64
scss/plugins/select/_class.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
7
scss/plugins/select/_plugin.scss
Normal file
7
scss/plugins/select/_plugin.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// Import the select plugin
|
||||
@import 'class';
|
||||
|
||||
// Implement the plugin for select
|
||||
select {
|
||||
@extend %select;
|
||||
}
|
||||
1
scss/plugins/select/arrow.svg
Normal file
1
scss/plugins/select/arrow.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="3"><path d="m 0,1 1,2 1,-2 z"/></svg>
|
||||
|
After Width: | Height: | Size: 95 B |
65
scss/plugins/select/arrow_original.svg
Normal file
65
scss/plugins/select/arrow_original.svg
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<?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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
7
scss/plugins/select/info.json
Normal file
7
scss/plugins/select/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "select",
|
||||
"name": "Select",
|
||||
"affected": ".select",
|
||||
"included": true,
|
||||
"summary": "A typical dropdown, now enhanced with a custom down arrow and coherent style."
|
||||
}
|
||||
10
scss/plugins/select/readme.md
Normal file
10
scss/plugins/select/readme.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
## Select
|
||||
|
||||
```html
|
||||
<select>
|
||||
<option>Select an option</option>
|
||||
<option>Good option</option>
|
||||
<option>Nice option</option>
|
||||
<option>Cheap option</option>
|
||||
</select>
|
||||
```
|
||||
21
scss/plugins/select/test.html
Normal file
21
scss/plugins/select/test.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<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>
|
||||
52
scss/plugins/stack/_plugin.scss
Normal file
52
scss/plugins/stack/_plugin.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
7
scss/plugins/stack/info.json
Normal file
7
scss/plugins/stack/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
93
scss/plugins/stack/readme.md
Normal file
93
scss/plugins/stack/readme.md
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
## 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>
|
||||
```
|
||||
111
scss/plugins/stack/test.html
Normal file
111
scss/plugins/stack/test.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!-- 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>
|
||||
36
scss/plugins/table/_plugin.scss
Normal file
36
scss/plugins/table/_plugin.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
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);
|
||||
}
|
||||
6
scss/plugins/table/info.json
Normal file
6
scss/plugins/table/info.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"id": "table",
|
||||
"name": "Table",
|
||||
"affected": "table",
|
||||
"included": true
|
||||
}
|
||||
30
scss/plugins/table/readme.md
Normal file
30
scss/plugins/table/readme.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
## 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>
|
||||
```
|
||||
33
scss/plugins/table/test.html
Normal file
33
scss/plugins/table/test.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<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>
|
||||
175
scss/plugins/tabs/_class.scss
Normal file
175
scss/plugins/tabs/_class.scss
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
6
scss/plugins/tabs/_plugin.scss
Normal file
6
scss/plugins/tabs/_plugin.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import "class";
|
||||
|
||||
.tabs {
|
||||
@extend %tabs;
|
||||
}
|
||||
|
||||
7
scss/plugins/tabs/info.json
Normal file
7
scss/plugins/tabs/info.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"id": "tabs",
|
||||
"name": "Tabs",
|
||||
"summary": "Tab system for webpage",
|
||||
"affected": ".tabs",
|
||||
"included": false
|
||||
}
|
||||
61
scss/plugins/tabs/readme.md
Normal file
61
scss/plugins/tabs/readme.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
## 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>
|
||||
```
|
||||
250
scss/plugins/tabs/test.html
Normal file
250
scss/plugins/tabs/test.html
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<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>
|
||||
134
scss/plugins/tooltip/_plugin.scss
Normal file
134
scss/plugins/tooltip/_plugin.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
12
scss/plugins/tooltip/description.html
Normal file
12
scss/plugins/tooltip/description.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<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>
|
||||
8
scss/plugins/tooltip/info.json
Normal file
8
scss/plugins/tooltip/info.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"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" ]
|
||||
}
|
||||
27
scss/plugins/tooltip/readme.md
Normal file
27
scss/plugins/tooltip/readme.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
## 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>
|
||||
```
|
||||
17
scss/plugins/tooltip/test.html
Normal file
17
scss/plugins/tooltip/test.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<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>
|
||||
3
scss/readme.md
Normal file
3
scss/readme.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# Picnic CSS
|
||||
|
||||
Picnic CSS is a lightweight and beautiful CSS library
|
||||
29
scss/themes/default/_colors.scss
Normal file
29
scss/themes/default/_colors.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// 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;
|
||||
31
scss/themes/default/_theme.scss
Normal file
31
scss/themes/default/_theme.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
// 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;
|
||||
29
scss/themes/squared/_colors.scss
Normal file
29
scss/themes/squared/_colors.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// 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;
|
||||
10
scss/themes/squared/_plugins.scss
Normal file
10
scss/themes/squared/_plugins.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%nav {
|
||||
background: transparent;
|
||||
transition: 0;
|
||||
|
||||
.brand,
|
||||
.pseudo.button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
39
scss/themes/squared/_theme.scss
Normal file
39
scss/themes/squared/_theme.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// 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;
|
||||
30
scss/vendor/compass-breakpoint/.bower.json
vendored
Normal file
30
scss/vendor/compass-breakpoint/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
90
scss/vendor/compass-breakpoint/CHANGELOG.md
vendored
Normal file
90
scss/vendor/compass-breakpoint/CHANGELOG.md
vendored
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
# 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
|
||||
12
scss/vendor/compass-breakpoint/CONTRIBUTING.md
vendored
Normal file
12
scss/vendor/compass-breakpoint/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
## 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.
|
||||
43
scss/vendor/compass-breakpoint/README.md
vendored
Normal file
43
scss/vendor/compass-breakpoint/README.md
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# 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
|
||||
19
scss/vendor/compass-breakpoint/bower.json
vendored
Normal file
19
scss/vendor/compass-breakpoint/bower.json
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
7
scss/vendor/compass-breakpoint/eyeglass-exports.js
vendored
Normal file
7
scss/vendor/compass-breakpoint/eyeglass-exports.js
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
var path = require('path');
|
||||
|
||||
module.exports = function(eyeglass, sass) {
|
||||
return {
|
||||
sassDir: path.join(__dirname, 'stylesheets')
|
||||
}
|
||||
}
|
||||
39
scss/vendor/compass-breakpoint/package.json
vendored
Normal file
39
scss/vendor/compass-breakpoint/package.json
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
5
scss/vendor/compass-breakpoint/sache.json
vendored
Normal file
5
scss/vendor/compass-breakpoint/sache.json
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"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"]
|
||||
}
|
||||
114
scss/vendor/compass-breakpoint/stylesheets/_breakpoint.scss
vendored
Normal file
114
scss/vendor/compass-breakpoint/stylesheets/_breakpoint.scss
vendored
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
//////////////////////////////
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
95
scss/vendor/compass-breakpoint/stylesheets/breakpoint/_context.scss
vendored
Normal file
95
scss/vendor/compass-breakpoint/stylesheets/breakpoint/_context.scss
vendored
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
//////////////////////////////
|
||||
// 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 a new issue