diff --git a/scss/LICENSE.txt b/scss/LICENSE.txt deleted file mode 100644 index 2fce92d..0000000 --- a/scss/LICENSE.txt +++ /dev/null @@ -1,26 +0,0 @@ -Portions of this content are used under the terms of the MIT license. - - -https://github.com/franciscop/picnic - -The MIT License (MIT) - -Copyright (c) 2014 Francisco Presencia - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/scss/picnic.scss b/scss/picnic.scss deleted file mode 100644 index 93dfb1c..0000000 --- a/scss/picnic.scss +++ /dev/null @@ -1,42 +0,0 @@ -//! Picnic CSS http://www.picnicss.com/ - -// Loads the Sass Math Module -@use 'sass:math'; - -// Imports the base variable styles -@import './themes/default/theme'; - -@import './vendor/compass-breakpoint/stylesheets/breakpoint'; - -// Normalize.css (external library) -@import './plugins/normalize/plugin'; - -// Generic styles for things like , 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 deleted file mode 100644 index 75c825b..0000000 --- a/scss/plugins/button/_class.scss +++ /dev/null @@ -1,69 +0,0 @@ -// %button -// This class defines a clickable element that looks like a label - - - -// Variables -$picnic-button-margin: math.div($picnic-separation, 2) 0 !default; -$picnic-button-padding: $picnic-label-padding !default; -$picnic-button-hover: inset 0 0 0 99em rgba($picnic-white, $picnic-transparency) !default; -$picnic-button-click: inset 0 0 0 99em rgba($picnic-black, $picnic-transparency) !default; -$picnic-button-pseudo-hover: inset 0 0 0 99em rgba($picnic-black, math.div($picnic-transparency, 2)) !default; -$picnic-button-transition: $picnic-transition !default; -$picnic-button-radius: $picnic-label-radius !default; - - - -// Definition -%button { - @extend %label; - - margin: $picnic-button-margin; - cursor: pointer; - transition: $picnic-button-transition; - border-radius: $picnic-button-radius; - - // Avoid the input { height: 2.2 } - height: auto; - vertical-align: baseline; - - // This avoids a nasty "hover" issue (slightly taller on hover) - box-shadow: 0 0 rgba($picnic-black, 0) inset; - - // Methods - &:hover, - &:focus { - box-shadow: $picnic-button-hover; - border: 0; - } - - &.pseudo:hover, - &.pseudo:focus { - box-shadow: $picnic-button-pseudo-hover; - } - - &.active, - &:active, - &.pseudo:active { - box-shadow: $picnic-button-click; - } - - &[disabled] { - cursor: default; - box-shadow: none; - background: $picnic-dull; - } - } - - -// // Note: If you try to do this there's a selector explossion: - -// &%hover { -// box-shadow: $picnic-button-hover; -// } - -// &:hover { -// @extend %hover; -// } - -// Like `button.button:hover, .button[type="submit"], ...` diff --git a/scss/plugins/button/_plugin.scss b/scss/plugins/button/_plugin.scss deleted file mode 100644 index d6b741d..0000000 --- a/scss/plugins/button/_plugin.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Inherit from the class -@import 'class'; - - -// For the toggle buttons -:checked + .toggle, -:checked + .toggle:hover { - box-shadow: $picnic-button-click; -} - -// Hide the checkbox/radiobutton -// Handle with care -[type] + .toggle { - padding: $picnic-button-padding; - margin-right: 0; - - &:after, - &:before { - display: none; - } -} - -// Implement the abstract class for real elements -button, -.button, -[type=submit] { - @extend %button; -} diff --git a/scss/plugins/button/info.json b/scss/plugins/button/info.json deleted file mode 100644 index 6d63875..0000000 --- a/scss/plugins/button/info.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "id": "button", - "name": "Button", - "included": true, - "affected": "button, .button, [type=submit]", - "summary": "An element that looks like it can be clicked and will perform some action." -} \ No newline at end of file diff --git a/scss/plugins/button/readme.md b/scss/plugins/button/readme.md deleted file mode 100644 index c8e9e63..0000000 --- a/scss/plugins/button/readme.md +++ /dev/null @@ -1,83 +0,0 @@ -## 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 deleted file mode 100644 index 07f484f..0000000 --- a/scss/plugins/button/test.html +++ /dev/null @@ -1,56 +0,0 @@ - -

Button types and colors

- -
- - - - - - -
- -
- Link - Link - Link - Link - Link - Link -
- -
- - - - - - -
- -
- - - - - - -
diff --git a/scss/plugins/card/_class.scss b/scss/plugins/card/_class.scss deleted file mode 100644 index 234a3cb..0000000 --- a/scss/plugins/card/_class.scss +++ /dev/null @@ -1,132 +0,0 @@ -// Card -// This represents a self-contained, replicable entity - -// Variables -$picnic-card-shadow: none !default; -$picnic-card-border: $picnic-border !default; -$picnic-card-radius: $picnic-radius !default; - - - -// Styles - -// http://8gramgorilla.com/mastering-sass-extends-and-placeholders/ -%card { - - position: relative; - box-shadow: $picnic-card-shadow; - border-radius: $picnic-card-radius; - border: $picnic-card-border; - overflow: hidden; - text-align: left; - background: $picnic-white; - margin-bottom: $picnic-separation; - padding: 0; - transition: all .3s ease; - - &.hidden, - :checked + & { - font-size: 0; - padding: 0; - margin: 0; - border: 0; - } - - // Make sure that nothing overflows - > * { - max-width: 100%; - display: block; - - &:last-child { - margin-bottom: 0; - } - } - - // The first part from the card - header, - section, - > p { - padding: .6em .8em; - } - - section { - padding: .6em .8em 0; - } - - hr { - border: none; - height: 1px; - background-color: $picnic-dull; - } - - header { - font-weight: bold; - position: relative; - border-bottom: 1px solid $picnic-dull; - - h1, - h2, - h3, - h4, - h5, - h6 { - padding: 0; - margin: 0 2em 0 0; - line-height: 1; - display: inline-block; - vertical-align: text-bottom; - } - - &:last-child { - border-bottom: 0; - } - } - - footer { - padding: .8em; - } - - p { - margin: math.div($picnic-separation, 2) 0; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - > p { - margin: 0; - padding-right: 2.5em; - } - - .close { - position: absolute; - top: .4em; - right: .3em; - font-size: 1.2em; - padding: 0 .5em; - cursor: pointer; - width: auto; - - &:hover { - color: $picnic-error; - } - } - - h1 + .close { - margin: .2em; - } - - h2 + .close { - margin: .1em; - } - - .dangerous { - background: $picnic-error; - float: right; - } - } diff --git a/scss/plugins/card/_plugin.scss b/scss/plugins/card/_plugin.scss deleted file mode 100644 index e969ffb..0000000 --- a/scss/plugins/card/_plugin.scss +++ /dev/null @@ -1,7 +0,0 @@ -// 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 deleted file mode 100644 index 25e536b..0000000 --- a/scss/plugins/card/info.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "id": "card", - "name": "Card", - "included": false, - "affected": ".card", - "summary": "A self-contained, independent element. It works great with others of its kind." -} \ No newline at end of file diff --git a/scss/plugins/card/readme.md b/scss/plugins/card/readme.md deleted file mode 100644 index 8e4efd6..0000000 --- a/scss/plugins/card/readme.md +++ /dev/null @@ -1,54 +0,0 @@ -## Card - -A card is a self-contained, replicable type. It works great with other of its kind. It can consist of only one element or many of them: - -```html -
-
-

A really simple h3

-
-
-``` - -```html -
-
- - -
-
-``` - -```html -
-
-

Forest

-
- -
-``` - -```html -
-
-
- -
-

Misty Forest

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

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 deleted file mode 100644 index e48a5f7..0000000 --- a/scss/plugins/checkbox/_class.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Checkbox - -// Variables -$picnic-checkbox-character: '\2714' !default; -$picnic-checkbox-radius: $picnic-radius !default; - - -%checkbox { - @extend %radio; - - + .checkable:before { - border-radius: $picnic-checkbox-radius; - } - - + .checkable:after { - content: $picnic-checkbox-character; - background: none; - transform: scale(2) translateY(-25%); - visibility: hidden; - opacity: 0; - } - - &:checked + .checkable:after { - color: $picnic-black; - background: none; - transform: translateY(-50%); - transition: $picnic-transition; - visibility: visible; - opacity: 1; - } - } diff --git a/scss/plugins/checkbox/_plugin.scss b/scss/plugins/checkbox/_plugin.scss deleted file mode 100644 index 733c960..0000000 --- a/scss/plugins/checkbox/_plugin.scss +++ /dev/null @@ -1,8 +0,0 @@ -// 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 deleted file mode 100644 index 83e9922..0000000 --- a/scss/plugins/checkbox/info.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "checkbox", - "name": "Checkbox", - "included": true, - "affected": "[type=checkbox]", - "summary": "The classical checkbox revisited for bigger and coherent shape.", - "dependencies": [ - "radiocheckbox/v2" - ] -} \ No newline at end of file diff --git a/scss/plugins/checkbox/readme.md b/scss/plugins/checkbox/readme.md deleted file mode 100644 index a973ce9..0000000 --- a/scss/plugins/checkbox/readme.md +++ /dev/null @@ -1,73 +0,0 @@ -## 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 `