diff --git a/scss/LICENSE.txt b/scss/LICENSE.txt new file mode 100644 index 0000000..2fce92d --- /dev/null +++ b/scss/LICENSE.txt @@ -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. diff --git a/scss/picnic.scss b/scss/picnic.scss new file mode 100644 index 0000000..93dfb1c --- /dev/null +++ b/scss/picnic.scss @@ -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 , 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'; diff --git a/scss/plugins/button/_class.scss b/scss/plugins/button/_class.scss new file mode 100644 index 0000000..75c825b --- /dev/null +++ b/scss/plugins/button/_class.scss @@ -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"], ...` diff --git a/scss/plugins/button/_plugin.scss b/scss/plugins/button/_plugin.scss new file mode 100644 index 0000000..d6b741d --- /dev/null +++ b/scss/plugins/button/_plugin.scss @@ -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; +} diff --git a/scss/plugins/button/info.json b/scss/plugins/button/info.json new file mode 100644 index 0000000..6d63875 --- /dev/null +++ b/scss/plugins/button/info.json @@ -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." +} \ No newline at end of file diff --git a/scss/plugins/button/readme.md b/scss/plugins/button/readme.md new file mode 100644 index 0000000..c8e9e63 --- /dev/null +++ b/scss/plugins/button/readme.md @@ -0,0 +1,83 @@ +## Buttons + +They can be of different colors and types: + +```html + + + + + +``` + +```html + +Link + + +``` + + +### Pseudo buttons + +Allows for seemingly links to behave as buttons: + +```html + +Link + + +``` + + +### 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 + +``` + +```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 +
+
+ +``` + +```css +.mainButton { + font-size: 1.5em; +} +.shyButton { + font-size: .75em; +} +``` + +To change the color of the pseudo-color on hover: + +```html + +``` + +```css +.cool:hover, +.cool:active, +.cool:focus { + background: #cff; +} +``` diff --git a/scss/plugins/button/test.html b/scss/plugins/button/test.html new file mode 100644 index 0000000..07f484f --- /dev/null +++ b/scss/plugins/button/test.html @@ -0,0 +1,56 @@ + +

Button types and colors

+ +
+ + + + + + +
+ +
+ Link + Link + Link + Link + Link + Link +
+ +
+ + + + + + +
+ +
+ + + + + + +
diff --git a/scss/plugins/card/_class.scss b/scss/plugins/card/_class.scss new file mode 100644 index 0000000..234a3cb --- /dev/null +++ b/scss/plugins/card/_class.scss @@ -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; + } + } diff --git a/scss/plugins/card/_plugin.scss b/scss/plugins/card/_plugin.scss new file mode 100644 index 0000000..e969ffb --- /dev/null +++ b/scss/plugins/card/_plugin.scss @@ -0,0 +1,7 @@ +// Definition of card +@import 'class'; + +// Implementation of card +.card { + @extend %card; +} diff --git a/scss/plugins/card/info.json b/scss/plugins/card/info.json new file mode 100644 index 0000000..25e536b --- /dev/null +++ b/scss/plugins/card/info.json @@ -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." +} \ No newline at end of file diff --git a/scss/plugins/card/readme.md b/scss/plugins/card/readme.md new file mode 100644 index 0000000..8e4efd6 --- /dev/null +++ b/scss/plugins/card/readme.md @@ -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 +
+
+

A really simple h3

+
+
+``` + +```html +
+
+ + +
+
+``` + +```html +
+
+

Forest

+
+ +
+``` + +```html +
+
+
+ +
+

Misty Forest

+ +
+
+
+
+
+ + +
+
+
+``` diff --git a/scss/plugins/card/test.html b/scss/plugins/card/test.html new file mode 100644 index 0000000..ff6f8e0 --- /dev/null +++ b/scss/plugins/card/test.html @@ -0,0 +1,69 @@ +

Card

+ +

+

+
+
+ +
This is a nice forest. What do you want to do with it?
+
+ + +
+
+
+
+
+
+

A more elaborated card

+
+
It has some text
+
+ And even a footer! +
+
+
+ +
+

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

+
+
+
+
+ +
+
+

Header 1

+
+
+ +
+
+

Header 2

+ +
+
+
+
+

Header 3

+ × +
+
+
+
+

Header 4

+ × +
+
+
+
+ +
+
+

This is a one line card

+ × +
+
+

diff --git a/scss/plugins/checkbox/_class.scss b/scss/plugins/checkbox/_class.scss new file mode 100644 index 0000000..e48a5f7 --- /dev/null +++ b/scss/plugins/checkbox/_class.scss @@ -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; + } + } diff --git a/scss/plugins/checkbox/_plugin.scss b/scss/plugins/checkbox/_plugin.scss new file mode 100644 index 0000000..733c960 --- /dev/null +++ b/scss/plugins/checkbox/_plugin.scss @@ -0,0 +1,8 @@ +// Get the checkbox definition +@import 'class'; + +// Define it for the element checkbox +[type=checkbox] { + @extend %radio; + @extend %checkbox; + } diff --git a/scss/plugins/checkbox/info.json b/scss/plugins/checkbox/info.json new file mode 100644 index 0000000..83e9922 --- /dev/null +++ b/scss/plugins/checkbox/info.json @@ -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" + ] +} \ No newline at end of file diff --git a/scss/plugins/checkbox/readme.md b/scss/plugins/checkbox/readme.md new file mode 100644 index 0000000..a973ce9 --- /dev/null +++ b/scss/plugins/checkbox/readme.md @@ -0,0 +1,73 @@ +## Checkbox + +Display an inline checkbox with a nice default style + +```html + +``` + +```html + +``` + + + +### 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 `` or `