mirror of
https://github.com/papercss/papercss
synced 2024-05-22 23:52:16 +02:00
Fixed broken components
This commit is contained in:
koester
parent
4f793519ff
commit
1212a2db8d
|
|
@ -1,5 +1,6 @@
|
|||
.alert {
|
||||
@include border;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -21,5 +21,26 @@ article {
|
|||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include resp(xs) {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 2rem;
|
||||
|
||||
@include resp(xs) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.badge {
|
||||
@include border;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
|
|
|
|||
|
|
@ -1,60 +1,37 @@
|
|||
@mixin border($style: 1, $color: $primary) {
|
||||
border: 2px solid $color;
|
||||
|
||||
@if $style == 1 {
|
||||
.border-#{$style},
|
||||
.child-borders>*:nth-child(6n+1) {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
}
|
||||
}
|
||||
@if $style == 2 {
|
||||
.border-2,
|
||||
.child-borders>*:nth-child(6n+2) {
|
||||
border-top-left-radius: 125px 25px;
|
||||
border-top-right-radius: 10px 205px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 185px 25px;
|
||||
}
|
||||
}
|
||||
@if $style == 3 {
|
||||
.border-3,
|
||||
.child-borders>*:nth-child(6n+3) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 255px 15px;
|
||||
border-bottom-left-radius: 225px 15px;
|
||||
border-bottom-right-radius: 15px 255px;
|
||||
}
|
||||
}
|
||||
@if $style == 4 {
|
||||
.border-4,
|
||||
.child-borders>*:nth-child(6n+4) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 25px 150px;
|
||||
border-bottom-left-radius: 25px 115px;
|
||||
border-bottom-right-radius: 155px 25px;
|
||||
}
|
||||
}
|
||||
@if $style == 5 {
|
||||
.border-5,
|
||||
.child-borders>*:nth-child(6n+5) {
|
||||
border-top-left-radius: 250px 15px;
|
||||
border-top-right-radius: 25px 80px;
|
||||
border-bottom-left-radius: 20px 115px;
|
||||
border-bottom-right-radius: 15px 105px;
|
||||
}
|
||||
}
|
||||
@if $style == 6 {
|
||||
.border-6,
|
||||
.child-borders>*:nth-child(6n+6) {
|
||||
border-top-left-radius: 28px 125px;
|
||||
border-top-right-radius: 100px 30px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
}
|
||||
}
|
||||
.border {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
.border,
|
||||
.border-1,
|
||||
.child-borders>*:nth-child(6n+1) {
|
||||
@include border-style(1);
|
||||
}
|
||||
|
||||
.border-2,
|
||||
.child-borders>*:nth-child(6n+2) {
|
||||
@include border-style(2);
|
||||
}
|
||||
|
||||
.border-3,
|
||||
.child-borders>*:nth-child(6n+3) {
|
||||
@include border-style(3);
|
||||
}
|
||||
|
||||
.border-4,
|
||||
.child-borders>*:nth-child(6n+4) {
|
||||
@include border-style(4);
|
||||
}
|
||||
|
||||
.border-5,
|
||||
.child-borders>*:nth-child(6n+5) {
|
||||
@include border-style(5);
|
||||
}
|
||||
|
||||
.border-6,
|
||||
.child-borders>*:nth-child(6n+6) {
|
||||
@include border-style(6);
|
||||
}
|
||||
|
||||
.child-borders>* {
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
// Why is box sizing not the default?
|
||||
// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
|
@ -7,13 +7,20 @@ button,
|
|||
color: $primary;
|
||||
display: inline;
|
||||
outline: none;
|
||||
border: solid 2px $primary;
|
||||
@include border();
|
||||
border: 2px solid $primary;
|
||||
@include border-style();
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
@include shadow();
|
||||
|
||||
@include resp(520px) {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
@include shadow(large);
|
||||
font-size: 2rem;
|
||||
|
|
@ -49,7 +56,8 @@ button,
|
|||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
@extend .disabled;
|
||||
cursor: not-allowed;
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,53 @@
|
|||
// Global PaperCSS Config
|
||||
/**
|
||||
Global PaperCSS Config
|
||||
*/
|
||||
|
||||
// Imports
|
||||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
// Set Colors
|
||||
$primary: #41403E;
|
||||
$secondary: #0071DE;
|
||||
// Set theme colors
|
||||
$primary: #41403E !default;
|
||||
$secondary: #0071DE !default;
|
||||
|
||||
$success: #86a361;
|
||||
$warning: #ddcd45;
|
||||
$danger: #a7342d;
|
||||
$muted: #868e96;
|
||||
$success: #86a361 !default;
|
||||
$warning: #ddcd45 !default;
|
||||
$danger: #a7342d !default;
|
||||
$muted: #868e96 !default;
|
||||
|
||||
$primary-light: lighten($primary, 50%);
|
||||
$secondary-light: lighten($secondary, 50%);
|
||||
$success-light: lighten($success, 30%);
|
||||
$warning-light: lighten($warning, 30%);
|
||||
$danger-light: lighten($danger, 45%);
|
||||
$muted-light: lighten($muted, 35%);
|
||||
$primary-light: lighten($primary, 50%) !default;
|
||||
$secondary-light: lighten($secondary, 50%) !default;
|
||||
$success-light: lighten($success, 30%) !default;
|
||||
$warning-light: lighten($warning, 30%) !default;
|
||||
$danger-light: lighten($danger, 45%) !default;
|
||||
$muted-light: lighten($muted, 35%) !default;
|
||||
|
||||
$white-dark: rgba(black, 0.03);
|
||||
$light-dark: rgba(black, 0.7);
|
||||
$white: rgba(white, 1);
|
||||
$main-background: rgba(white, 1);
|
||||
$white-dark: rgba(black, 0.03) !default;
|
||||
$light-dark: rgba(black, 0.7) !default;
|
||||
$white: rgba(white, 1) !default;
|
||||
$main-background: rgba(white, 1) !default;
|
||||
|
||||
$primary-text: #FFF;
|
||||
$secondary-text: $primary;
|
||||
$success-text: $primary;
|
||||
$warning-text: $primary;
|
||||
$danger-text: $primary;
|
||||
$muted-text: $primary;
|
||||
$primary-text: #FFF !default;
|
||||
$secondary-text: $primary !default;
|
||||
$success-text: $primary !default;
|
||||
$warning-text: $primary !default;
|
||||
$danger-text: $primary !default;
|
||||
$muted-text: $primary !default;
|
||||
|
||||
$shadow-color-regular: hsla(0,0,0%,.2);
|
||||
$shadow-color-hover: hsla(0,0,0%,.3);
|
||||
$shadow-color-regular: hsla(0,0,0%,.2) !default;
|
||||
$shadow-color-hover: hsla(0,0,0%,.3) !default;
|
||||
|
||||
|
||||
// Set class names to generate the css classes on build
|
||||
// Map to set your color names
|
||||
$colors: (primary, $primary, $primary-light, $primary-text),
|
||||
(secondary, $secondary, $secondary-light, $secondary-text),
|
||||
(success, $success, $success-light, $success-text),
|
||||
(warning, $warning, $warning-light, $warning-text),
|
||||
(danger, $danger, $danger-light, $danger-text),
|
||||
(muted, $muted, $muted-light, $muted-text);
|
||||
|
||||
/**
|
||||
This Loop will generate the various .text- and .background- classes
|
||||
based on the $colors map above.
|
||||
*/
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.text-#{$colorName} {
|
||||
color: $color;
|
||||
|
|
@ -51,26 +57,75 @@ $colors: (primary, $primary, $primary-light, $primary-text),
|
|||
}
|
||||
}
|
||||
|
||||
// Set Fonts
|
||||
$global-font-size: 20px;
|
||||
$header-font: 'Patrick Hand SC';
|
||||
$body-font: 'Neucha';
|
||||
$font-color: $primary;
|
||||
// Font settings
|
||||
$global-font-size: 20px !default;
|
||||
$header-font: 'Patrick Hand SC' !default;
|
||||
$body-font: 'Neucha' !default;
|
||||
$font-color: $primary !default;
|
||||
|
||||
// Sizes for responsive breakpoints
|
||||
$large-screen: 1200px;
|
||||
$medium-screen: 992px;
|
||||
$small-screen: 768px;
|
||||
$xsmall-screen: 480px;
|
||||
// Responsive breakpoints
|
||||
$large-screen: 1200px !default;
|
||||
$medium-screen: 992px !default;
|
||||
$small-screen: 768px !default;
|
||||
$xsmall-screen: 480px !default;
|
||||
|
||||
// Sizes for shadows
|
||||
$shadow-small: 10px 19px 17px -13px $shadow-color-regular;
|
||||
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular;
|
||||
$shadow-large: 20px 38px 34px -26px $shadow-color-regular;
|
||||
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover;
|
||||
$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
|
||||
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
|
||||
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
|
||||
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
||||
|
||||
|
||||
// Mixins
|
||||
/**
|
||||
Assign a border style to a component selector.
|
||||
@param integer
|
||||
@default 1
|
||||
*/
|
||||
@mixin border-style($style: 1) {
|
||||
@if $style==1 {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
}
|
||||
@if $style==2 {
|
||||
border-top-left-radius: 125px 25px;
|
||||
border-top-right-radius: 10px 205px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 185px 25px;
|
||||
}
|
||||
@if $style==3 {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 255px 15px;
|
||||
border-bottom-left-radius: 225px 15px;
|
||||
border-bottom-right-radius: 15px 255px;
|
||||
}
|
||||
@if $style==4 {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 25px 150px;
|
||||
border-bottom-left-radius: 25px 115px;
|
||||
border-bottom-right-radius: 155px 25px;
|
||||
}
|
||||
@if $style==5 {
|
||||
border-top-left-radius: 250px 15px;
|
||||
border-top-right-radius: 25px 80px;
|
||||
border-bottom-left-radius: 20px 115px;
|
||||
border-bottom-right-radius: 15px 105px;
|
||||
}
|
||||
@if $style==6 {
|
||||
border-top-left-radius: 28px 125px;
|
||||
border-top-right-radius: 100px 30px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Mixin for setting responsive breakpoints
|
||||
@param string | integer
|
||||
@default null
|
||||
*/
|
||||
@mixin resp($max:null, $min:null) {
|
||||
@if $max == large or $max == lg { $max: $large-screen; }
|
||||
@if $max == medium or $max == md { $max: $medium-screen; }
|
||||
|
|
@ -82,6 +137,9 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover;
|
|||
@else { @error "no matching size found";}
|
||||
}
|
||||
|
||||
/**
|
||||
Useful helper mixins
|
||||
*/
|
||||
@mixin hr-after() {
|
||||
text-align: center;
|
||||
color: lighten($primary, 30%);
|
||||
|
|
@ -106,20 +164,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover;
|
|||
max-width: $percent;
|
||||
}
|
||||
|
||||
@mixin make-column($columns) {
|
||||
@each $breakpoint, $columnName in $columns {
|
||||
// @todo: fix failing resp() mixin here
|
||||
@media only screen and (max-width: $breakpoint) {
|
||||
@for $i from 1 through $numberOfColumns {
|
||||
.#{$columnName}-#{$i} {
|
||||
flex: 0 0 $i * 100% / $numberOfColumns;
|
||||
max-width: $i * 100% / $numberOfColumns;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin li-bullet($char) {
|
||||
li:before {
|
||||
content: $char;
|
||||
|
|
@ -139,6 +183,11 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover;
|
|||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
/**
|
||||
Set the shadow type for a component
|
||||
@param string
|
||||
@default regular
|
||||
*/
|
||||
@mixin shadow($type: regular) {
|
||||
@if $type == hover {
|
||||
box-shadow: $shadow-hover;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ hr {
|
|||
-webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
@include resp(xsmall) {
|
||||
@include resp(xs) {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
$columns: (0, col),
|
||||
($large-screen, lg),
|
||||
($medium-screen, md),
|
||||
($small-screen, sm),
|
||||
($xsmall-screen, xs);
|
||||
|
||||
$numberOfColumns: 12;
|
||||
|
||||
@include make-column($columns);
|
||||
@mixin create-flex-classes($colName, $breakpoint: 0px) {
|
||||
@include resp($min: $breakpoint) {
|
||||
@for $i from 1 through $numberOfColumns {
|
||||
.#{$colName}-#{$i} {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 $i * 100% / $numberOfColumns;
|
||||
-ms-flex: 0 0 $i * 100% / $numberOfColumns;
|
||||
flex: 0 0 $i * 100% / $numberOfColumns;
|
||||
max-width: $i * 100% / $numberOfColumns;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: auto;
|
||||
|
|
@ -21,6 +27,7 @@ $numberOfColumns: 12;
|
|||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&.flex-right {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
|
|
@ -66,8 +73,8 @@ $numberOfColumns: 12;
|
|||
|
||||
.col {
|
||||
padding: 1rem;
|
||||
@include resp(small) {
|
||||
// Stack for mobile
|
||||
|
||||
@include resp(sm) {
|
||||
@include col-size(100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -77,6 +84,12 @@ $numberOfColumns: 12;
|
|||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
@include create-flex-classes(col);
|
||||
@include create-flex-classes(xs, $xsmall-screen);
|
||||
@include create-flex-classes(sm, $small-screen);
|
||||
@include create-flex-classes(md, $medium-screen);
|
||||
@include create-flex-classes(lg, $large-screen);
|
||||
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
|
|
@ -95,3 +108,17 @@ $numberOfColumns: 12;
|
|||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
@include resp(md) {
|
||||
width: 85%;
|
||||
}
|
||||
@include resp(xs) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,10 +45,11 @@ input, select, textarea {
|
|||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
/* the basic, unchecked style */
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
|
|
@ -57,45 +58,52 @@ input, select, textarea {
|
|||
position: absolute;
|
||||
width: 1px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
input + span {
|
||||
display: block;
|
||||
}
|
||||
/* the basic, unchecked style */
|
||||
input + span:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid $primary;
|
||||
margin-right: 0.75em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
input[type="radio"] + span:before {
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem .6rem;
|
||||
border-bottom-right-radius: 1rem .9rem;
|
||||
border-bottom-left-radius: .7rem 1rem;
|
||||
}
|
||||
input[type="checkbox"] + span:before {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
}
|
||||
& + span {
|
||||
display: block;
|
||||
|
||||
/* the checked style using the :checked pseudo class */
|
||||
input[type="radio"]:checked + span:before {
|
||||
$escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='${secondary}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>");
|
||||
$radio-fill: "data:image/svg+xml,${escaped-svg}";
|
||||
background: url($radio-fill) left center no-repeat;
|
||||
}
|
||||
input[type="checkbox"]:checked + span:before {
|
||||
$escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='${secondary}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>");
|
||||
$check-fill: "data:image/svg+xml,${escaped-svg}";
|
||||
background: url($check-fill) left center no-repeat;
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid $primary;
|
||||
margin-right: 0.75em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* radio styles */
|
||||
&[type="radio"] {
|
||||
& + span:before {
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem .6rem;
|
||||
border-bottom-right-radius: 1rem .9rem;
|
||||
border-bottom-left-radius: .7rem 1rem;
|
||||
}
|
||||
|
||||
&:checked + span:before {
|
||||
$radio-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'#{$secondary}'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E";
|
||||
background: url($radio-fill) left center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* checkbox styles */
|
||||
&[type="checkbox"] {
|
||||
& + span:before {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked + span:before {
|
||||
$check-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'#{$secondary}'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E";
|
||||
background: url($check-fill) left center no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
@include border;
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0rem;
|
||||
}
|
||||
&.float-right {
|
||||
float: right;
|
||||
margin: 1rem 0rem 1rem 1rem;
|
||||
}
|
||||
&.no-responsive {
|
||||
max-width: initial;
|
||||
height: initial;
|
||||
display: initial;
|
||||
}
|
||||
&.no-border {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border: 2px solid $primary;
|
||||
@include border-style();
|
||||
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0rem;
|
||||
}
|
||||
|
||||
&.float-right {
|
||||
float: right;
|
||||
margin: 1rem 0rem 1rem 1rem;
|
||||
}
|
||||
|
||||
&.no-responsive {
|
||||
max-width: initial;
|
||||
height: initial;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
background: $light-dark;
|
||||
transition: opacity .25s ease-out;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
@include border;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -188,3 +188,12 @@ template {
|
|||
[hidden] {
|
||||
display: none
|
||||
}
|
||||
|
||||
// Why is box sizing not the default?
|
||||
// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,28 @@
|
|||
.shadow {
|
||||
@include shadow();
|
||||
|
||||
&.shadow-large {
|
||||
@include shadow(large);
|
||||
}
|
||||
|
||||
&.shadow-small {
|
||||
@include shadow(small);
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.child-shadows > * {
|
||||
box-shadow: $shadow-regular;
|
||||
transition: all .5s ease;
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
.child-shadows-hover > * {
|
||||
@include shadow();
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
@include shadow(hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,18 +2,22 @@ table {
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
thead tr th {
|
||||
vertical-align: bottom;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
border-top: 1px dashed lighten($primary, 60%);
|
||||
}
|
||||
|
||||
@include resp(xsmall) {
|
||||
thead tr th {
|
||||
padding: 2%;
|
||||
|
|
@ -22,9 +26,11 @@ table {
|
|||
padding: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten($primary, 25%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,17 @@
|
|||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
color: $primary;
|
||||
border-bottom: solid 3px $secondary;
|
||||
}
|
||||
|
||||
@for $num from 1 through 5 {
|
||||
&[id="tab#{$num}"]:checked~div[id="content#{$num}"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -15,20 +26,10 @@
|
|||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $primary-light;
|
||||
|
||||
&:hover {
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
color: $primary;
|
||||
border-bottom: solid 3px $secondary;
|
||||
}
|
||||
|
||||
@for $num from 1 through 5 {
|
||||
input[id="tabs#{$num}"]:checked~div[id="content#{$num}"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
@charset 'UTF-8';
|
||||
|
||||
@media screen {
|
||||
// Settings && Mixins
|
||||
@import 'components/config';
|
||||
/* Variables & Mixins */
|
||||
@import 'components/config';
|
||||
|
||||
// Individual Components
|
||||
@import 'components/reset';
|
||||
@import 'components/boxreset';
|
||||
@import 'components/borders';
|
||||
@import 'components/fonts';
|
||||
@import 'components/shadows';
|
||||
@import 'components/forms';
|
||||
@import 'components/container';
|
||||
@import 'components/flexbox';
|
||||
@import 'components/buttons';
|
||||
@import 'components/lists';
|
||||
@import 'components/code';
|
||||
@import 'components/tables';
|
||||
@import 'components/images';
|
||||
@import 'components/utilities';
|
||||
@import 'components/popovers';
|
||||
@import 'components/cards';
|
||||
@import 'components/badges';
|
||||
@import 'components/alerts';
|
||||
@import 'components/tabs';
|
||||
@import 'components/article';
|
||||
@import 'components/modals';
|
||||
}
|
||||
/* normalize.css v7.0.0 & box reset */
|
||||
@import 'components/reset';
|
||||
|
||||
/* Components */
|
||||
@import 'components/flexbox';
|
||||
@import 'components/borders';
|
||||
@import 'components/fonts';
|
||||
@import 'components/shadows';
|
||||
@import 'components/forms';
|
||||
@import 'components/container';
|
||||
@import 'components/buttons';
|
||||
@import 'components/lists';
|
||||
@import 'components/code';
|
||||
@import 'components/tables';
|
||||
@import 'components/images';
|
||||
@import 'components/utilities';
|
||||
@import 'components/popovers';
|
||||
@import 'components/cards';
|
||||
@import 'components/badges';
|
||||
@import 'components/alerts';
|
||||
@import 'components/tabs';
|
||||
@import 'components/article';
|
||||
@import 'components/modals';
|
||||
|
||||
// @todo: Add print styles? ;)
|
||||
// @media print {
|
||||
// @import 'components/print';
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in a new issue