From 2615d4bc6405f6bfd5fda99707172703ec3a5b14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 20 Oct 2019 22:11:39 +0200 Subject: [PATCH] adding --- assets/iconmoon/PNG/spaceinvaders.png | Bin 0 -> 145 bytes assets/iconmoon/SVG/spaceinvaders.svg | 5 + assets/iconmoon/demo-external-svg.html | 4 +- assets/iconmoon/demo.html | 12 +-- assets/iconmoon/selection.json | 34 ++++--- assets/iconmoon/style.css | 4 + assets/iconmoon/symbol-defs.svg | 8 +- dist/crispy.css | 2 +- dist/crispy_minimal.css | 2 +- dist/example/index.html | 131 ++++++++++++++++--------- dist/example/styles.css | 2 +- dist/example/symbol-defs.svg | 8 +- src/_core.scss | 2 +- src/_modifiers.scss | 8 +- src/_variables.scss | 2 +- src/components/_field.scss | 4 - src/components/_modal.scss | 2 +- src/example/components/_button.scss | 2 + src/example/components/_nav.scss | 2 + src/example/site/_header.scss | 13 ++- src/example/styles.scss | 33 +++++-- 21 files changed, 171 insertions(+), 109 deletions(-) create mode 100644 assets/iconmoon/PNG/spaceinvaders.png create mode 100644 assets/iconmoon/SVG/spaceinvaders.svg diff --git a/assets/iconmoon/PNG/spaceinvaders.png b/assets/iconmoon/PNG/spaceinvaders.png new file mode 100644 index 0000000000000000000000000000000000000000..93fd7ae9ef7a619f51f02587dd9055cb662f6556 GIT binary patch literal 145 zcmeAS@N?(olHy`uVBq!ia0vp^ia@Nu!3HGf><~N!q#`_B977^n-%c{*Vld!1^5_5Z z+gqDi`9-;X4_q{UFq82}*8#0yVDNPHb6Mw<&;$Ui7csE_ literal 0 HcmV?d00001 diff --git a/assets/iconmoon/SVG/spaceinvaders.svg b/assets/iconmoon/SVG/spaceinvaders.svg new file mode 100644 index 0000000..f8024f0 --- /dev/null +++ b/assets/iconmoon/SVG/spaceinvaders.svg @@ -0,0 +1,5 @@ + + +spaceinvaders + + diff --git a/assets/iconmoon/demo-external-svg.html b/assets/iconmoon/demo-external-svg.html index 4cbb574..4445c5c 100644 --- a/assets/iconmoon/demo-external-svg.html +++ b/assets/iconmoon/demo-external-svg.html @@ -25,12 +25,12 @@

Grid Size: 32

- icon-chronometer + icon-transformers
- icon-transformers + icon-spaceinvaders
diff --git a/assets/iconmoon/demo.html b/assets/iconmoon/demo.html index 43ee213..f1f7bca 100644 --- a/assets/iconmoon/demo.html +++ b/assets/iconmoon/demo.html @@ -29,14 +29,14 @@ - -chronometer - - transformers + +spaceinvaders + + paperplane @@ -77,12 +77,12 @@

Grid Size: 32

- icon-chronometer + icon-transformers
- icon-transformers + icon-spaceinvaders
diff --git a/assets/iconmoon/selection.json b/assets/iconmoon/selection.json index 37b4e79..131a06a 100644 --- a/assets/iconmoon/selection.json +++ b/assets/iconmoon/selection.json @@ -193,52 +193,51 @@ { "icon": { "paths": [ - "M897.728 594.272c0 221.856-179.84 401.728-401.728 401.728-221.856 0-401.728-179.872-401.728-401.728 0-215.104 169.152-390.144 381.664-400.672l0-69.312h-30.112c-17.76 0-32.16-14.4-32.16-32.16s14.4-32.128 32.16-32.128h96.384c17.76 0 32.16 14.368 32.16 32.128s-14.4 32.16-32.16 32.16h-34.112v68.896c216.224 6.4 389.632 183.328 389.632 401.088zM475.936 317.088v-73.312c-99.488 5.632-187.712 52.48-248.512 123.456l52.896 52.896-22.72 22.752-50.080-50.112c-40.768 57.536-65.024 127.584-65.024 203.488 0 3.392 0.48 8.032 0.48 8.032l77.824 0v32.16h-75.52c7.808 65.664 33.824 127.584 72.576 177.088l39.776-39.776 22.72 22.72-41.472 41.504c60.128 63.872 143.616 105.504 237.056 110.784v-87.328h32.128v87.744c95.648-3.264 181.44-44.576 243.168-109.12l-45.568-45.568 22.72-22.72 44.064 44.032c39.68-49.92 66.368-112.672 74.304-179.328h-81.6v-32.16h83.872c0.096-3.328 0.512-4.64 0.512-8.032 0-78.016-25.6-149.792-68.416-208.16l-52.736 52.736-22.72-22.72 55.232-55.2c-62.304-70.496-152.096-116.192-252.8-119.584v73.728l-32.16 0zM510.048 604.32h112.512c8.864 0 16.064 7.232 16.064 16.064 0 8.864-7.2 16.096-16.064 16.096h-128.576c-8.864 0-16.064-7.232-16.064-16.096l0-222.944c0-8.864 7.2-16.064 16.064-16.064s16.064 7.2 16.064 16.064l-0 206.88z" + "M803.68 168.48l1.44-46.56c-86.208-43.136-181.952-68.96-287.136-68.96s-212.896 25.824-299.104 68.96l1.44 46.56 291.68 191.392 291.68-191.392zM512 145.792c60 0 110.336 19.232 110.336 19.232l-110.336 74.144-110.336-74.144c0 0 50.336-19.232 110.336-19.232zM578.336 767.264v-224.64l14.976-193.12-81.312 53.472-79.328-53.472 16.96 193.12v224.64h128.704zM396.48 328.832l-217.248-144.832-1.44-56.352h-127.872l18.976 273.6 155.2 110.912h189.664l-17.28-183.328zM149.92 340.896l205.184 96.576 3.424 31.648-203.424-92-5.184-36.224zM141.28 242.624l203.456 98.272 5.152 34.208-205.152-94.56-3.456-37.92zM137.856 849.568l151.52 77.568v-301.184l-89.472-55.68v-34.496l-87.936-60.352 25.888 374.144zM417.728 799.744v-224.384l-98.272 49.984v325.952l44.288 27.552 60.352-147.136h175.872l60.352 147.136 46.272-27.552-0-325.92-98.272-49.984v224.384l-190.592 0zM453.376 866.24l-44.832 125.824h206.912l-44.8-125.824h-117.28zM610.272 512.128h189.664l155.2-110.912 18.976-273.6h-127.872l-1.472 56.384-217.28 144.832-17.216 183.296zM868.896 377.12l-205.472 96 5.472-35.648 205.184-96.576-5.184 36.224zM879.264 280.544l-205.184 96.576 5.184-36.224 203.456-98.272-3.456 37.92zM912 475.392l-87.904 60.352v34.496l-88.16 55.68v301.184l150.208-77.568 25.856-374.144z" ], "attrs": [], "isMulticolor": false, "isMulticolor2": false, "tags": [ - "chronometer", - "timer", - "clock" + "transformers" ], "grid": 32 }, "attrs": [], "properties": { - "id": 89, - "order": 10, + "id": 165, + "order": 11, "prevSize": 32, - "name": "chronometer" + "name": "transformers" }, "setIdx": 1, "setId": 0, - "iconIdx": 88 + "iconIdx": 164 }, { "icon": { "paths": [ - "M803.68 168.48l1.44-46.56c-86.208-43.136-181.952-68.96-287.136-68.96s-212.896 25.824-299.104 68.96l1.44 46.56 291.68 191.392 291.68-191.392zM512 145.792c60 0 110.336 19.232 110.336 19.232l-110.336 74.144-110.336-74.144c0 0 50.336-19.232 110.336-19.232zM578.336 767.264v-224.64l14.976-193.12-81.312 53.472-79.328-53.472 16.96 193.12v224.64h128.704zM396.48 328.832l-217.248-144.832-1.44-56.352h-127.872l18.976 273.6 155.2 110.912h189.664l-17.28-183.328zM149.92 340.896l205.184 96.576 3.424 31.648-203.424-92-5.184-36.224zM141.28 242.624l203.456 98.272 5.152 34.208-205.152-94.56-3.456-37.92zM137.856 849.568l151.52 77.568v-301.184l-89.472-55.68v-34.496l-87.936-60.352 25.888 374.144zM417.728 799.744v-224.384l-98.272 49.984v325.952l44.288 27.552 60.352-147.136h175.872l60.352 147.136 46.272-27.552-0-325.92-98.272-49.984v224.384l-190.592 0zM453.376 866.24l-44.832 125.824h206.912l-44.8-125.824h-117.28zM610.272 512.128h189.664l155.2-110.912 18.976-273.6h-127.872l-1.472 56.384-217.28 144.832-17.216 183.296zM868.896 377.12l-205.472 96 5.472-35.648 205.184-96.576-5.184 36.224zM879.264 280.544l-205.184 96.576 5.184-36.224 203.456-98.272-3.456 37.92zM912 475.392l-87.904 60.352v34.496l-88.16 55.68v301.184l150.208-77.568 25.856-374.144z" + "M958.816 799.424v-190.304h-93.12v191.008h-97.184v94.496h-225.536v-95.2h225.536l-0-95.104h-479.712v95.136l192.96 0.672v95.136h-193.632v-94.432h-97.152v-192.32h-93.152v190.304h-97.824v-288.128h95.84v-92.512h95.136v-97.824h97.824v-95.808h95.808v96.096l287.456 0.768-0-96.864h95.808v97.152h97.824v95.168h94.496l0 95.136h96.448v287.424h-97.824zM384.608 416.16h-95.808v95.84h95.808v-95.84zM767.872 416.16h-95.808v95.84h95.808v-95.84zM190.976 128.736h97.824v95.808h-97.824v-95.808zM865.696 128.736v95.808h-97.824l-0-95.808h97.824z" ], + "width": 1056, "attrs": [], "isMulticolor": false, "isMulticolor2": false, "tags": [ - "transformers" + "space invaders" ], "grid": 32 }, "attrs": [], "properties": { - "id": 165, - "order": 11, + "id": 167, + "order": 13, "prevSize": 32, - "name": "transformers" + "name": "spaceinvaders" }, "setIdx": 1, "setId": 0, - "iconIdx": 164 + "iconIdx": 166 }, { "icon": { @@ -393,8 +392,11 @@ "color": 0, "bgColor": 16777215, "name": "icomoon", - "classSelector": ".icon" + "classSelector": ".icon", + "height": 32 }, - "historySize": 50 + "historySize": 50, + "gridSize": 16, + "showGrid": false } } \ No newline at end of file diff --git a/assets/iconmoon/style.css b/assets/iconmoon/style.css index 88d42fe..2d83959 100644 --- a/assets/iconmoon/style.css +++ b/assets/iconmoon/style.css @@ -14,3 +14,7 @@ Single-colored icons can be modified like so: color: red; } ========================================== */ + +.icon-spaceinvaders { + width: 1.03125em; +} diff --git a/assets/iconmoon/symbol-defs.svg b/assets/iconmoon/symbol-defs.svg index 8712c1f..5c6750b 100644 --- a/assets/iconmoon/symbol-defs.svg +++ b/assets/iconmoon/symbol-defs.svg @@ -19,14 +19,14 @@ - -chronometer - - transformers + +spaceinvaders + + paperplane diff --git a/dist/crispy.css b/dist/crispy.css index be3358e..8fefe36 100644 --- a/dist/crispy.css +++ b/dist/crispy.css @@ -1 +1 @@ -html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 .625em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .625em 1.25em}ol ol,ul ul{margin-top:.3125em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .625em}figcaption{margin:.625em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.625em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-bold{font-weight:bolder!important}.text-weight-medium{font-weight:medium!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-medium{font-size:1.125rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!important}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:10px!important}.margin-left-1{margin-left:10px!important}.margin-bottom-1{margin-bottom:10px!important}.margin-right-1{margin-right:10px!important}.padding-top-1{padding-top:10px!important}.padding-left-1{padding-left:10px!important}.padding-bottom-1{padding-bottom:10px!important}.padding-right-1{padding-right:10px!important}.margin-top-2{margin-top:20px!important}.margin-left-2{margin-left:20px!important}.margin-bottom-2{margin-bottom:20px!important}.margin-right-2{margin-right:20px!important}.padding-top-2{padding-top:20px!important}.padding-left-2{padding-left:20px!important}.padding-bottom-2{padding-bottom:20px!important}.padding-right-2{padding-right:20px!important}.margin-top-3{margin-top:30px!important}.margin-left-3{margin-left:30px!important}.margin-bottom-3{margin-bottom:30px!important}.margin-right-3{margin-right:30px!important}.padding-top-3{padding-top:30px!important}.padding-left-3{padding-left:30px!important}.padding-bottom-3{padding-bottom:30px!important}.padding-right-3{padding-right:30px!important}.margin-top-4{margin-top:40px!important}.margin-left-4{margin-left:40px!important}.margin-bottom-4{margin-bottom:40px!important}.margin-right-4{margin-right:40px!important}.padding-top-4{padding-top:40px!important}.padding-left-4{padding-left:40px!important}.padding-bottom-4{padding-bottom:40px!important}.padding-right-4{padding-right:40px!important}.margin-top-5{margin-top:50px!important}.margin-left-5{margin-left:50px!important}.margin-bottom-5{margin-bottom:50px!important}.margin-right-5{margin-right:50px!important}.padding-top-5{padding-top:50px!important}.padding-left-5{padding-left:50px!important}.padding-bottom-5{padding-bottom:50px!important}.padding-right-5{padding-right:50px!important}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.5625em}.button--wide{width:100%}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{font-family:monospace,monospace;white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.625em 1.25em;border:1px solid #dfdfdf;background-color:#f9f9f9;margin:0 0 .625em;font-size:16px}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .625em;content:"/"}.group--separate .group__item:last-child:after{display:none}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.618;margin:0 0 .3125em}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2.25rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.25rem}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.5em;height:1.5em;vertical-align:middle;overflow:hidden;line-height:1.618}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;max-width:500px;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.field{margin:0 0 .625em}.field .icon{vertical-align:top}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.375em .5em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #b3b2af}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:10px 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.625em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.panel{background-color:#f9f9f9}.panel__inner{padding:.9375em 1.25em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f5f5f5}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.625em .5em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px} \ No newline at end of file +html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:.3125em 0 .9375em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .9375em 1.875em}ol ol,ul ul{margin-top:.46875em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .9375em}figcaption{margin:.9375em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.9375em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-medium{font-weight:medium!important}.text-weight-bold{font-weight:bolder!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-medium{font-size:1.125rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!important}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:15px!important}.margin-left-1{margin-left:15px!important}.margin-bottom-1{margin-bottom:15px!important}.margin-right-1{margin-right:15px!important}.padding-top-1{padding-top:15px!important}.padding-left-1{padding-left:15px!important}.padding-bottom-1{padding-bottom:15px!important}.padding-right-1{padding-right:15px!important}.margin-top-2{margin-top:30px!important}.margin-left-2{margin-left:30px!important}.margin-bottom-2{margin-bottom:30px!important}.margin-right-2{margin-right:30px!important}.padding-top-2{padding-top:30px!important}.padding-left-2{padding-left:30px!important}.padding-bottom-2{padding-bottom:30px!important}.padding-right-2{padding-right:30px!important}.margin-top-3{margin-top:45px!important}.margin-left-3{margin-left:45px!important}.margin-bottom-3{margin-bottom:45px!important}.margin-right-3{margin-right:45px!important}.padding-top-3{padding-top:45px!important}.padding-left-3{padding-left:45px!important}.padding-bottom-3{padding-bottom:45px!important}.padding-right-3{padding-right:45px!important}.margin-top-4{margin-top:60px!important}.margin-left-4{margin-left:60px!important}.margin-bottom-4{margin-bottom:60px!important}.margin-right-4{margin-right:60px!important}.padding-top-4{padding-top:60px!important}.padding-left-4{padding-left:60px!important}.padding-bottom-4{padding-bottom:60px!important}.padding-right-4{padding-right:60px!important}.margin-top-5{margin-top:75px!important}.margin-left-5{margin-left:75px!important}.margin-bottom-5{margin-bottom:75px!important}.margin-right-5{margin-right:75px!important}.padding-top-5{padding-top:75px!important}.padding-left-5{padding-left:75px!important}.padding-bottom-5{padding-bottom:75px!important}.padding-right-5{padding-right:75px!important}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.5625em}.button--wide{width:100%}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{font-family:monospace,monospace;white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.625em 1.25em;border:1px solid #dfdfdf;background-color:#f9f9f9;font-size:16px}.code,.field{margin:0 0 .9375em}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.375em .5em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #b3b2af}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:15px 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.625em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .9375em;content:"/"}.group--separate .group__item:last-child:after{display:none}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.618;margin:0 0 .3125em}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2.25rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.25rem}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.5em;height:1.5em;vertical-align:middle;overflow:hidden;line-height:1.618}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;max-width:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f9f9f9}.panel__inner{padding:.9375em 1.25em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f5f5f5}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.625em .5em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px} \ No newline at end of file diff --git a/dist/crispy_minimal.css b/dist/crispy_minimal.css index c000ca1..cc994fb 100644 --- a/dist/crispy_minimal.css +++ b/dist/crispy_minimal.css @@ -1 +1 @@ -html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 .625em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .625em 1.25em}ol ol,ul ul{margin-top:.3125em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .625em}figcaption{margin:.625em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.625em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-bold{font-weight:bolder!important}.text-weight-medium{font-weight:medium!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-medium{font-size:1.125rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!important}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:10px!important}.margin-left-1{margin-left:10px!important}.margin-bottom-1{margin-bottom:10px!important}.margin-right-1{margin-right:10px!important}.padding-top-1{padding-top:10px!important}.padding-left-1{padding-left:10px!important}.padding-bottom-1{padding-bottom:10px!important}.padding-right-1{padding-right:10px!important}.margin-top-2{margin-top:20px!important}.margin-left-2{margin-left:20px!important}.margin-bottom-2{margin-bottom:20px!important}.margin-right-2{margin-right:20px!important}.padding-top-2{padding-top:20px!important}.padding-left-2{padding-left:20px!important}.padding-bottom-2{padding-bottom:20px!important}.padding-right-2{padding-right:20px!important}.margin-top-3{margin-top:30px!important}.margin-left-3{margin-left:30px!important}.margin-bottom-3{margin-bottom:30px!important}.margin-right-3{margin-right:30px!important}.padding-top-3{padding-top:30px!important}.padding-left-3{padding-left:30px!important}.padding-bottom-3{padding-bottom:30px!important}.padding-right-3{padding-right:30px!important}.margin-top-4{margin-top:40px!important}.margin-left-4{margin-left:40px!important}.margin-bottom-4{margin-bottom:40px!important}.margin-right-4{margin-right:40px!important}.padding-top-4{padding-top:40px!important}.padding-left-4{padding-left:40px!important}.padding-bottom-4{padding-bottom:40px!important}.padding-right-4{padding-right:40px!important}.margin-top-5{margin-top:50px!important}.margin-left-5{margin-left:50px!important}.margin-bottom-5{margin-bottom:50px!important}.margin-right-5{margin-right:50px!important}.padding-top-5{padding-top:50px!important}.padding-left-5{padding-left:50px!important}.padding-bottom-5{padding-bottom:50px!important}.padding-right-5{padding-right:50px!important} \ No newline at end of file +html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:.3125em 0 .9375em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .9375em 1.875em}ol ol,ul ul{margin-top:.46875em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .9375em}figcaption{margin:.9375em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.9375em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-medium{font-weight:medium!important}.text-weight-bold{font-weight:bolder!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-medium{font-size:1.125rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!important}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:15px!important}.margin-left-1{margin-left:15px!important}.margin-bottom-1{margin-bottom:15px!important}.margin-right-1{margin-right:15px!important}.padding-top-1{padding-top:15px!important}.padding-left-1{padding-left:15px!important}.padding-bottom-1{padding-bottom:15px!important}.padding-right-1{padding-right:15px!important}.margin-top-2{margin-top:30px!important}.margin-left-2{margin-left:30px!important}.margin-bottom-2{margin-bottom:30px!important}.margin-right-2{margin-right:30px!important}.padding-top-2{padding-top:30px!important}.padding-left-2{padding-left:30px!important}.padding-bottom-2{padding-bottom:30px!important}.padding-right-2{padding-right:30px!important}.margin-top-3{margin-top:45px!important}.margin-left-3{margin-left:45px!important}.margin-bottom-3{margin-bottom:45px!important}.margin-right-3{margin-right:45px!important}.padding-top-3{padding-top:45px!important}.padding-left-3{padding-left:45px!important}.padding-bottom-3{padding-bottom:45px!important}.padding-right-3{padding-right:45px!important}.margin-top-4{margin-top:60px!important}.margin-left-4{margin-left:60px!important}.margin-bottom-4{margin-bottom:60px!important}.margin-right-4{margin-right:60px!important}.padding-top-4{padding-top:60px!important}.padding-left-4{padding-left:60px!important}.padding-bottom-4{padding-bottom:60px!important}.padding-right-4{padding-right:60px!important}.margin-top-5{margin-top:75px!important}.margin-left-5{margin-left:75px!important}.margin-bottom-5{margin-bottom:75px!important}.margin-right-5{margin-right:75px!important}.padding-top-5{padding-top:75px!important}.padding-left-5{padding-left:75px!important}.padding-bottom-5{padding-bottom:75px!important}.padding-right-5{padding-right:75px!important} \ No newline at end of file diff --git a/dist/example/index.html b/dist/example/index.html index 627bc27..07b4e2a 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -22,7 +22,7 @@ - Crispy 2.0 + Crispy 2.0-BETA

@@ -50,13 +50,13 @@

- + Modifiziers, Mixins and Functions

- A small amount of Usefull Helpers to support your Work. That make it easer to create new Styles. + A small amount of Usefull modifiers to support your Work. That make it easer to create new Styles. Modifiziers are helping to reduce code.

@@ -97,6 +97,7 @@

How it works

+

SCSS

@import
     "crispy";

Now include Mixins you need. Components and Modifiziers only works if you include them,

@@ -121,13 +122,24 @@ "variables", "crispy"; +

If you need all, mixins will be included,

+ 
@import
+    "all";
+ +

Only need Core and Modifiziers?

+ 
@import
+    "minimal";
+ +

CSS

+

For using CSS you can use crispy.css for all Styles or crispy_mininmal.css without Components.

+

Example

You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

Site

- Contains header, footer, partials that are used on a site or webapp. Header and footer are not classical components, there often more complex and have a special brand. + Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.

Templates

@@ -306,11 +318,11 @@ ) !default;

Heading h1

-

Heading h1

-

Heading h1

-

Heading h1

-
Heading h1
-
Heading h1
+

Heading h2

+

Heading h3

+

Heading h4

+
Heading h5
+
Heading h6

@@ -324,6 +336,9 @@

Icon

+

+ To change Size you can use "text-size-*" that you find in the modifiers. +

Html:

<svg class="icon text-size-small">
     <use xlink:href="symbol-defs.svg#icon-minus"></use>
@@ -331,19 +346,33 @@
                 

                     

                         
                         
                         
                         
                         
+                    

+                

+                

+                    To change Color you can use "icon-color-*".
+                

+                
Html:

+                
<svg class="icon text-size-small">
+    <use xlink:href="symbol-defs.svg#icon-minus"></use>
+</svg>

+                

+                    

+                        
                     

                 

@@ -482,8 +511,8 @@
- - - +

- Margin + Margin & Padding

- margin-top and -bottom from $crispy__margin as px. + Adding margin-top, -left, -bottom and -right and the same for padding.

+

Sass:

+ 
+$crispy__spacing: 15px;
+$crispy__spacing__steps: 5;
+
+ +

Html:

<div class="panel margin-bottom-0">margin-bottom-0</div>
 <div class="margin-bottom-1">margin-bottom-1</div>
 <div class="margin-bottom-2">margin-bottom-2</div>
@@ -690,7 +726,7 @@ toRem(10px 10px 0 0);
                 
margin-bottom-4

                 
margin-bottom-5

 
-				
+				
 				

                     Media
                 

@@ -721,7 +757,7 @@ toRem(10px 10px 0 0);
- +

Text

@@ -730,7 +766,9 @@ toRem(10px 10px 0 0); <div class="text-right"></div> <div class="text-justify"></div> <div class="text-italic"></div> +<div class="text-light"></div> <div class="text-normal"></div> +<div class="text-medium"></div> <div class="text-bold"></div> <div class="text-uppercase"></div> <div class="text-lowercase"></div> @@ -741,12 +779,21 @@ toRem(10px 10px 0 0); Also there are classes for,

- + +

+ Visibility +

+ 
<div class="hidden"></div>
+<div class="visible"></div>
+<div class="visible visible--inline"></div>
+<div class="visible visible--inline-block"></div>
+ +

Width

@@ -770,7 +817,8 @@ toRem(10px 10px 0 0); Media Queries

- These @mixins were used with the Breakpoints from the Reflex Grid. + These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. + Reflex-Grid is also used as grid for this Site.