From 826c21b4dfa5217a77020d109ba49a713c1a30ab Mon Sep 17 00:00:00 2001 From: Joe Ardent Date: Thu, 21 Sep 2023 17:43:18 -0700 Subject: [PATCH] vendor in picnic scss lib --- scss/LICENSE.txt | 26 ++ scss/picnic.scss | 42 ++ scss/plugins/button/_class.scss | 69 +++ scss/plugins/button/_plugin.scss | 28 ++ scss/plugins/button/info.json | 7 + scss/plugins/button/readme.md | 83 ++++ scss/plugins/button/test.html | 56 +++ scss/plugins/card/_class.scss | 132 ++++++ scss/plugins/card/_plugin.scss | 7 + scss/plugins/card/info.json | 7 + scss/plugins/card/readme.md | 54 +++ scss/plugins/card/test.html | 69 +++ scss/plugins/checkbox/_class.scss | 31 ++ scss/plugins/checkbox/_plugin.scss | 8 + scss/plugins/checkbox/info.json | 10 + scss/plugins/checkbox/readme.md | 73 +++ scss/plugins/checkbox/test.html | 9 + scss/plugins/dropimage/_class.scss | 59 +++ scss/plugins/dropimage/_plugin.scss | 8 + scss/plugins/dropimage/camera.svg | 1 + scss/plugins/dropimage/camera_original.svg | 96 ++++ scss/plugins/dropimage/info.json | 12 + scss/plugins/dropimage/readme.md | 73 +++ scss/plugins/dropimage/test.html | 34 ++ scss/plugins/fontello/_plugin.scss | 12 + scss/plugins/fontello/info.json | 7 + scss/plugins/generic/_plugin.scss | 72 +++ scss/plugins/generic/info.json | 7 + scss/plugins/grid/_class.scss | 5 + scss/plugins/grid/_plugin.scss | 162 +++++++ scss/plugins/grid/info.json | 7 + scss/plugins/grid/readme.md | 264 +++++++++++ scss/plugins/grid/test.html | 15 + scss/plugins/input/_class.scss | 25 + scss/plugins/input/_plugin.scss | 26 ++ scss/plugins/input/info.json | 9 + scss/plugins/input/readme.md | 17 + scss/plugins/input/test.html | 29 ++ scss/plugins/label/_class.scss | 43 ++ scss/plugins/label/_plugin.scss | 11 + scss/plugins/label/info.json | 7 + scss/plugins/label/readme.md | 12 + scss/plugins/label/test.html | 19 + scss/plugins/modal/_plugin.scss | 84 ++++ scss/plugins/modal/info.json | 12 + scss/plugins/modal/readme.md | 60 +++ scss/plugins/modal/test.html | 27 ++ scss/plugins/nav/_class.scss | 75 +++ scss/plugins/nav/_plugin.scss | 121 +++++ scss/plugins/nav/info.json | 7 + scss/plugins/nav/readme.md | 151 ++++++ scss/plugins/nav/test.html | 19 + scss/plugins/normalize/_plugin.scss | 434 ++++++++++++++++++ scss/plugins/normalize/info.json | 7 + scss/plugins/radio/_class.scss | 54 +++ scss/plugins/radio/_plugin.scss | 9 + scss/plugins/radio/info.json | 7 + scss/plugins/radio/readme.md | 13 + scss/plugins/radio/test.html | 14 + scss/plugins/select/_class.scss | 64 +++ scss/plugins/select/_plugin.scss | 7 + scss/plugins/select/arrow.svg | 1 + scss/plugins/select/arrow_original.svg | 65 +++ scss/plugins/select/info.json | 7 + scss/plugins/select/readme.md | 10 + scss/plugins/select/test.html | 21 + scss/plugins/stack/_plugin.scss | 52 +++ scss/plugins/stack/info.json | 7 + scss/plugins/stack/readme.md | 93 ++++ scss/plugins/stack/test.html | 111 +++++ scss/plugins/table/_plugin.scss | 36 ++ scss/plugins/table/info.json | 6 + scss/plugins/table/readme.md | 30 ++ scss/plugins/table/test.html | 33 ++ scss/plugins/tabs/_class.scss | 175 +++++++ scss/plugins/tabs/_plugin.scss | 6 + scss/plugins/tabs/info.json | 7 + scss/plugins/tabs/readme.md | 61 +++ scss/plugins/tabs/test.html | 250 ++++++++++ scss/plugins/tooltip/_plugin.scss | 134 ++++++ scss/plugins/tooltip/description.html | 12 + scss/plugins/tooltip/info.json | 8 + scss/plugins/tooltip/readme.md | 27 ++ scss/plugins/tooltip/test.html | 17 + scss/readme.md | 3 + scss/themes/default/_colors.scss | 29 ++ scss/themes/default/_theme.scss | 31 ++ scss/themes/squared/_colors.scss | 29 ++ scss/themes/squared/_plugins.scss | 10 + scss/themes/squared/_theme.scss | 39 ++ scss/vendor/compass-breakpoint/.bower.json | 30 ++ scss/vendor/compass-breakpoint/CHANGELOG.md | 90 ++++ .../vendor/compass-breakpoint/CONTRIBUTING.md | 12 + scss/vendor/compass-breakpoint/README.md | 43 ++ scss/vendor/compass-breakpoint/bower.json | 19 + .../compass-breakpoint/eyeglass-exports.js | 7 + scss/vendor/compass-breakpoint/package.json | 39 ++ scss/vendor/compass-breakpoint/sache.json | 5 + .../stylesheets/_breakpoint.scss | 114 +++++ .../stylesheets/breakpoint/_context.scss | 95 ++++ .../stylesheets/breakpoint/_helpers.scss | 151 ++++++ .../breakpoint/_legacy-settings.scss | 50 ++ .../stylesheets/breakpoint/_no-query.scss | 15 + .../stylesheets/breakpoint/_parsers.scss | 215 +++++++++ .../stylesheets/breakpoint/_respond-to.scss | 73 +++ .../stylesheets/breakpoint/_settings.scss | 71 +++ .../breakpoint/parsers/_double.scss | 33 ++ .../breakpoint/parsers/_query.scss | 82 ++++ .../breakpoint/parsers/_resolution.scss | 31 ++ .../breakpoint/parsers/_single.scss | 26 ++ .../breakpoint/parsers/_triple.scss | 36 ++ .../parsers/double/_default-pair.scss | 21 + .../breakpoint/parsers/double/_default.scss | 22 + .../parsers/double/_double-string.scss | 19 + .../parsers/resolution/_resolution.scss | 60 +++ .../breakpoint/parsers/single/_default.scss | 13 + .../breakpoint/parsers/triple/_default.scss | 18 + scss/vendor/sassy-maps/.bower.json | 33 ++ scss/vendor/sassy-maps/CONTRIBUTING.md | 6 + scss/vendor/sassy-maps/README.md | 100 ++++ scss/vendor/sassy-maps/Rakefile | 23 + scss/vendor/sassy-maps/bower.json | 23 + scss/vendor/sassy-maps/examples/example.scss | 46 ++ scss/vendor/sassy-maps/examples/index.html | 24 + scss/vendor/sassy-maps/lib/sassy-maps.rb | 16 + .../sassy-maps/lib/sassy-maps/version.rb | 4 + .../tapout/reporters/navigator_reporter.rb | 16 + scss/vendor/sassy-maps/sache.json | 5 + scss/vendor/sassy-maps/sass/_memo.scss | 31 ++ scss/vendor/sassy-maps/sass/_sassy-maps.scss | 14 + .../sassy-maps/sass/sassy-maps/_map-get.scss | 50 ++ .../sassy-maps/sass/sassy-maps/_map-set.scss | 51 ++ .../sass/sassy-maps/_map-to-string.scss | 3 + scss/vendor/sassy-maps/sassy-maps.gemspec | 28 ++ 134 files changed, 6081 insertions(+) create mode 100644 scss/LICENSE.txt create mode 100644 scss/picnic.scss create mode 100644 scss/plugins/button/_class.scss create mode 100644 scss/plugins/button/_plugin.scss create mode 100644 scss/plugins/button/info.json create mode 100644 scss/plugins/button/readme.md create mode 100644 scss/plugins/button/test.html create mode 100644 scss/plugins/card/_class.scss create mode 100644 scss/plugins/card/_plugin.scss create mode 100644 scss/plugins/card/info.json create mode 100644 scss/plugins/card/readme.md create mode 100644 scss/plugins/card/test.html create mode 100644 scss/plugins/checkbox/_class.scss create mode 100644 scss/plugins/checkbox/_plugin.scss create mode 100644 scss/plugins/checkbox/info.json create mode 100644 scss/plugins/checkbox/readme.md create mode 100644 scss/plugins/checkbox/test.html create mode 100644 scss/plugins/dropimage/_class.scss create mode 100644 scss/plugins/dropimage/_plugin.scss create mode 100644 scss/plugins/dropimage/camera.svg create mode 100644 scss/plugins/dropimage/camera_original.svg create mode 100644 scss/plugins/dropimage/info.json create mode 100644 scss/plugins/dropimage/readme.md create mode 100644 scss/plugins/dropimage/test.html create mode 100644 scss/plugins/fontello/_plugin.scss create mode 100644 scss/plugins/fontello/info.json create mode 100644 scss/plugins/generic/_plugin.scss create mode 100644 scss/plugins/generic/info.json create mode 100644 scss/plugins/grid/_class.scss create mode 100644 scss/plugins/grid/_plugin.scss create mode 100644 scss/plugins/grid/info.json create mode 100644 scss/plugins/grid/readme.md create mode 100644 scss/plugins/grid/test.html create mode 100644 scss/plugins/input/_class.scss create mode 100644 scss/plugins/input/_plugin.scss create mode 100644 scss/plugins/input/info.json create mode 100644 scss/plugins/input/readme.md create mode 100644 scss/plugins/input/test.html create mode 100644 scss/plugins/label/_class.scss create mode 100644 scss/plugins/label/_plugin.scss create mode 100644 scss/plugins/label/info.json create mode 100644 scss/plugins/label/readme.md create mode 100644 scss/plugins/label/test.html create mode 100644 scss/plugins/modal/_plugin.scss create mode 100644 scss/plugins/modal/info.json create mode 100644 scss/plugins/modal/readme.md create mode 100644 scss/plugins/modal/test.html create mode 100644 scss/plugins/nav/_class.scss create mode 100644 scss/plugins/nav/_plugin.scss create mode 100644 scss/plugins/nav/info.json create mode 100644 scss/plugins/nav/readme.md create mode 100644 scss/plugins/nav/test.html create mode 100644 scss/plugins/normalize/_plugin.scss create mode 100644 scss/plugins/normalize/info.json create mode 100644 scss/plugins/radio/_class.scss create mode 100644 scss/plugins/radio/_plugin.scss create mode 100644 scss/plugins/radio/info.json create mode 100644 scss/plugins/radio/readme.md create mode 100644 scss/plugins/radio/test.html create mode 100644 scss/plugins/select/_class.scss create mode 100644 scss/plugins/select/_plugin.scss create mode 100644 scss/plugins/select/arrow.svg create mode 100644 scss/plugins/select/arrow_original.svg create mode 100644 scss/plugins/select/info.json create mode 100644 scss/plugins/select/readme.md create mode 100644 scss/plugins/select/test.html create mode 100644 scss/plugins/stack/_plugin.scss create mode 100644 scss/plugins/stack/info.json create mode 100644 scss/plugins/stack/readme.md create mode 100644 scss/plugins/stack/test.html create mode 100644 scss/plugins/table/_plugin.scss create mode 100644 scss/plugins/table/info.json create mode 100644 scss/plugins/table/readme.md create mode 100644 scss/plugins/table/test.html create mode 100644 scss/plugins/tabs/_class.scss create mode 100644 scss/plugins/tabs/_plugin.scss create mode 100644 scss/plugins/tabs/info.json create mode 100644 scss/plugins/tabs/readme.md create mode 100644 scss/plugins/tabs/test.html create mode 100644 scss/plugins/tooltip/_plugin.scss create mode 100644 scss/plugins/tooltip/description.html create mode 100644 scss/plugins/tooltip/info.json create mode 100644 scss/plugins/tooltip/readme.md create mode 100644 scss/plugins/tooltip/test.html create mode 100644 scss/readme.md create mode 100644 scss/themes/default/_colors.scss create mode 100644 scss/themes/default/_theme.scss create mode 100644 scss/themes/squared/_colors.scss create mode 100644 scss/themes/squared/_plugins.scss create mode 100644 scss/themes/squared/_theme.scss create mode 100644 scss/vendor/compass-breakpoint/.bower.json create mode 100644 scss/vendor/compass-breakpoint/CHANGELOG.md create mode 100644 scss/vendor/compass-breakpoint/CONTRIBUTING.md create mode 100644 scss/vendor/compass-breakpoint/README.md create mode 100644 scss/vendor/compass-breakpoint/bower.json create mode 100644 scss/vendor/compass-breakpoint/eyeglass-exports.js create mode 100644 scss/vendor/compass-breakpoint/package.json create mode 100644 scss/vendor/compass-breakpoint/sache.json create mode 100644 scss/vendor/compass-breakpoint/stylesheets/_breakpoint.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_context.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_helpers.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_legacy-settings.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_no-query.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_parsers.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_respond-to.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/_settings.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/_double.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/_query.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/_resolution.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/_single.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/_triple.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/double/_default-pair.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/double/_default.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/double/_double-string.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/resolution/_resolution.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/single/_default.scss create mode 100644 scss/vendor/compass-breakpoint/stylesheets/breakpoint/parsers/triple/_default.scss create mode 100644 scss/vendor/sassy-maps/.bower.json create mode 100644 scss/vendor/sassy-maps/CONTRIBUTING.md create mode 100644 scss/vendor/sassy-maps/README.md create mode 100644 scss/vendor/sassy-maps/Rakefile create mode 100644 scss/vendor/sassy-maps/bower.json create mode 100644 scss/vendor/sassy-maps/examples/example.scss create mode 100644 scss/vendor/sassy-maps/examples/index.html create mode 100644 scss/vendor/sassy-maps/lib/sassy-maps.rb create mode 100644 scss/vendor/sassy-maps/lib/sassy-maps/version.rb create mode 100644 scss/vendor/sassy-maps/lib/tapout/reporters/navigator_reporter.rb create mode 100644 scss/vendor/sassy-maps/sache.json create mode 100644 scss/vendor/sassy-maps/sass/_memo.scss create mode 100644 scss/vendor/sassy-maps/sass/_sassy-maps.scss create mode 100644 scss/vendor/sassy-maps/sass/sassy-maps/_map-get.scss create mode 100644 scss/vendor/sassy-maps/sass/sassy-maps/_map-set.scss create mode 100644 scss/vendor/sassy-maps/sass/sassy-maps/_map-to-string.scss create mode 100644 scss/vendor/sassy-maps/sassy-maps.gemspec 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

+ +
+
+
+
+
+ +
+

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 `