mirror of
https://github.com/papercss/papercss
synced 2024-05-23 08:02:19 +02:00
scss components
This commit is contained in:
koester
parent
2e03d07e3e
commit
621db8f23c
|
|
@ -1,22 +0,0 @@
|
|||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
.alert {
|
||||
@extend .border;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@mixin make-alert-color-classes($a: length($colors)) when ($a > 0)
|
||||
{
|
||||
@include make-alert-color-classes($a - 1);
|
||||
$color: extract($colors, $a);
|
||||
.alert-${color} {
|
||||
border-color: $$color;
|
||||
color: $$color;
|
||||
background-color: #{"${${color}-light}"};
|
||||
}
|
||||
}
|
||||
|
||||
@include make-alert-color-classes();
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
|
||||
.badge {
|
||||
.border;
|
||||
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
background-color: $muted;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@mixin make-badge-color-classes($i: length($colors)) when ($i > 0)
|
||||
{
|
||||
@include make-badge-color-classes($i - 1);
|
||||
$color: extract($colors, $i);
|
||||
.badge.${color} {
|
||||
background-color: $$color;
|
||||
}
|
||||
}
|
||||
|
||||
@include make-badge-color-classes();
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: $secondary;
|
||||
background-color: lighten($primary, 70%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: lighten($primary, 73%);
|
||||
border: 1px solid lighten($primary, 50%);
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
pre code{
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
white-space:pre;
|
||||
}
|
||||
17
src/components/_alerts.scss
Normal file
17
src/components/_alerts.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
.alert {
|
||||
@extend .border;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.alert-#{$colorName} {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: $color-light;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './colors.less';
|
||||
@import 'colors';
|
||||
|
||||
article {
|
||||
.article-title {
|
||||
23
src/components/_badges.scss
Normal file
23
src/components/_badges.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
.badge {
|
||||
@extend .border;
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
background-color: $muted;
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@each $colorName, $color in $colors {
|
||||
.badge.#{$colorName} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './colors.less';
|
||||
@import 'colors';
|
||||
|
||||
.border {
|
||||
border: 2px solid $primary;
|
||||
|
|
@ -55,13 +55,8 @@
|
|||
border-width: 5px;
|
||||
}
|
||||
|
||||
@mixin make-border-color-classes($i: length($colors)) when ($i > 0)
|
||||
{
|
||||
@include make-border-color-classes($i - 1);
|
||||
$color: extract($colors, $i);
|
||||
.border-${color} {
|
||||
border-color: $$color;
|
||||
}
|
||||
@each $colorName, $color in $colors {
|
||||
.border-#{$colorName} {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@include make-border-color-classes();
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
@import './colors.less';
|
||||
@import './shadows.less';
|
||||
@import './borders.less';
|
||||
@import './forms.less'; // .disabled
|
||||
@import 'colors';
|
||||
@import 'shadows';
|
||||
@import 'borders';
|
||||
@import 'forms'; // .disabled
|
||||
|
||||
button, .paper-btn, [type="button"] {
|
||||
.shadow;
|
||||
@extend .shadow;
|
||||
align-self:center;
|
||||
background:transparent;
|
||||
transition:all .5s ease, background-color .1s ease;
|
||||
|
|
@ -12,19 +12,19 @@ button, .paper-btn, [type="button"] {
|
|||
display: inline;
|
||||
outline:none;
|
||||
border:solid 2px $primary;
|
||||
.border;
|
||||
@extend .border;
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
@extend .shadow;
|
||||
@extend .shadow-hover;
|
||||
&.btn-large {
|
||||
.shadow-large;
|
||||
@extend .shadow-large;
|
||||
font-size:2rem;
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
&.btn-small {
|
||||
.shadow-small;
|
||||
@extend .shadow-small;
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ button, .paper-btn, [type="button"] {
|
|||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
@extend .shadow-hover;
|
||||
}
|
||||
&:focus{
|
||||
border: 2px solid $secondary;
|
||||
|
|
@ -46,7 +46,7 @@ button, .paper-btn, [type="button"] {
|
|||
transition: none;
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
.disabled;
|
||||
@extend .disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,19 +66,18 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
@mixin make-button-color-classes($i: length($colors)) when ($i > 0)
|
||||
{
|
||||
@include make-button-color-classes($i - 1);
|
||||
$color: extract($colors, $i);
|
||||
button.btn-${color}, .paper-btn.btn-${color}, [type="button"].btn-${color} {
|
||||
border-color: $$color;
|
||||
background-color: #{"${${color}-light}"};
|
||||
color: #{"${${color}-text}"};
|
||||
&:hover:active{
|
||||
$darkcolour: #{"${color}-light"};
|
||||
background-color: darken($$darkcolour, 10%);
|
||||
}
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
.alert-#{$colorName} {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: $color-light;
|
||||
}
|
||||
button.btn-#{$colorName}, .paper-btn.btn-#{$colorName}, [type="button"].btn-#{$colorName} {
|
||||
border-color: $color;
|
||||
background-color: $color-light;
|
||||
color: $color-text;
|
||||
&:hover:active {
|
||||
background-color: darken($color-light, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include make-button-color-classes();
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
@import './colors.less';
|
||||
@import './shadows.less';
|
||||
@import 'colors';
|
||||
@import 'shadows';
|
||||
|
||||
.card {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
|
||||
@extend .shadow;
|
||||
@extend .shadow-hover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -35,7 +34,7 @@
|
|||
}
|
||||
|
||||
.card-subtitle, h5 {
|
||||
.text-secondary;
|
||||
@extend .text-secondary;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
39
src/components/_code.scss
Normal file
39
src/components/_code.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
@import 'colors';
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: $secondary;
|
||||
background-color: lighten($primary, 70%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: lighten($primary, 73%);
|
||||
border: 1px solid lighten($primary, 50%);
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
white-space:pre;
|
||||
}
|
||||
}
|
||||
0
src/components/_colors.scss
Normal file
0
src/components/_colors.scss
Normal file
|
|
@ -1,3 +1,6 @@
|
|||
// Global PaperCSS Config
|
||||
|
||||
// Set Colors
|
||||
$primary: #41403E;
|
||||
$secondary: #0071DE;
|
||||
|
||||
|
|
@ -25,18 +28,25 @@ $warning-text: $primary;
|
|||
$danger-text: $primary;
|
||||
$muted-text: $primary;
|
||||
|
||||
$colors: (primary, $primary, $primary-light),
|
||||
(secondary, $secondary, $secondary-light),
|
||||
(success, $success, $success-light),
|
||||
(warning, $warning, $warning-light),
|
||||
(danger, $danger, $danger-light),
|
||||
(muted, $muted, $muted-light);
|
||||
// Set class names to generate the css classes on build
|
||||
$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);
|
||||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.text-#{$colorName} {
|
||||
color: #{$color};
|
||||
color: $color;
|
||||
}
|
||||
.background-#{$colorName} {
|
||||
background-color: #{$color-light};
|
||||
background-color: $color-light;
|
||||
}
|
||||
}
|
||||
COLORS
|
||||
BORDERS
|
||||
SHADOWS
|
||||
BORDERS
|
||||
|
||||
// Grid Breakpoints && Class Names
|
||||
74
src/components/_container.scss
Normal file
74
src/components/_container.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
@import 'colors';
|
||||
|
||||
// Sizes
|
||||
$large-screen: 1200px;
|
||||
$medium-screen: 992px;
|
||||
$small-screen: 768px;
|
||||
$xsmall-screen: 480px;
|
||||
|
||||
@mixin resp($max:null, $min:null) {
|
||||
@if $max == large or $max == lg { $max: $large-screen; }
|
||||
@if $max == medium or $max == md { $max: $medium-screen; }
|
||||
@if $max == small or $max == sm { $max: $small-screen; }
|
||||
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
|
||||
@if ($min != null and $max != null) {@media only screen and (max-width: $max) and (min-width: $min) { @content; }}
|
||||
@else if($max != null and $min == null){@media only screen and (max-width: $max) { @content; }}
|
||||
@else if($min != null and $max == null){@media only screen and (min-width: $min) { @content; }}
|
||||
@else { @error "no matching size found";}
|
||||
}
|
||||
@mixin hr-after() {
|
||||
text-align: center;
|
||||
color: lighten($primary, 30%);
|
||||
display: block;
|
||||
content: "~~~";
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@include resp(medium) {
|
||||
width: 85%;
|
||||
}
|
||||
@include resp(xsmall) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:after {
|
||||
@include hr-after;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
|
||||
&:after {
|
||||
@include hr-after;
|
||||
top: -.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.paper {
|
||||
border: 1px solid $primary-light;
|
||||
background-color: $main-background;
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
-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) {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
129
src/components/_flexbox.scss
Normal file
129
src/components/_flexbox.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
@import 'container';
|
||||
|
||||
$columns: (0, col),
|
||||
($large-screen, lg),
|
||||
($medium-screen, md),
|
||||
($small-screen, sm),
|
||||
($xsmall-screen, xs);
|
||||
|
||||
$numberOfColumns: 12;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include make-column($columns);
|
||||
|
||||
/* Unused mixin
|
||||
@mixin center-all() {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
} */
|
||||
|
||||
@mixin col-size($percent) {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 $percent;
|
||||
-ms-flex: 0 0 $percent;
|
||||
flex: 0 0 $percent;
|
||||
max-width: $percent;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-flow: row wrap;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 1rem;
|
||||
&.flex-right {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.flex-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.flex-edges {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.flex-spaces {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
&.flex-top {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&.flex-middle {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.flex-bottom {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
padding: 1rem;
|
||||
@include resp(small) {
|
||||
// Stack for mobile
|
||||
@include col-size(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.col-fill {
|
||||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
48
src/components/_fonts.scss
Normal file
48
src/components/_fonts.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@import 'colors';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
$global-font-size: 20px;
|
||||
$header-font: 'Patrick Hand SC';
|
||||
$body-font: 'Neucha';
|
||||
$font-color: $primary;
|
||||
|
||||
html {
|
||||
font-size: $global-font-size;
|
||||
font-family: $body-font, sans-serif;
|
||||
color: $font-color;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
|
||||
font-family: $body-font, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $header-font, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: .8rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
108
src/components/_forms.scss
Normal file
108
src/components/_forms.scss
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
@import 'colors';
|
||||
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:$primary;
|
||||
outline:none;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
font-size: 1rem;
|
||||
padding: .5rem .5rem;
|
||||
border: 2px solid $primary;
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
@extend .disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled{
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
> label, legend {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
textarea.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset.form-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
@import 'borders';
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.border;
|
||||
@extend .border;
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0rem;
|
||||
48
src/components/_lists.scss
Normal file
48
src/components/_lists.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
ol {
|
||||
list-style-type: decimal;
|
||||
ol {
|
||||
list-style-type: upper-alpha;
|
||||
ol {
|
||||
list-style-type: upper-roman;
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin li-bullet($char) {
|
||||
li:before {
|
||||
content: $char;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
li {
|
||||
text-indent: -7px;
|
||||
&:before {
|
||||
position: relative;
|
||||
left: -7px;
|
||||
}
|
||||
}
|
||||
@include li-bullet("-");
|
||||
ul {
|
||||
@include li-bullet("+");
|
||||
ul {
|
||||
@include li-bullet("~");
|
||||
ul {
|
||||
@include li-bullet("⤍");
|
||||
ul {
|
||||
@include li-bullet("⁎");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.inline li{
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
@import './colors.less';
|
||||
@import './container.less';
|
||||
@import './utilities.less';
|
||||
@import 'colors';
|
||||
@import 'container';
|
||||
@import 'utilities';
|
||||
|
||||
@mixin translate($x; $y)
|
||||
{
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin transition-transform($transition)
|
||||
{
|
||||
@mixin transition-transform($transition) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
|
|
@ -21,14 +19,13 @@
|
|||
&:before{
|
||||
content: "";
|
||||
display: none;
|
||||
background: rgba(0,0,0,.6);
|
||||
background: rgba(black,.6);
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:target{
|
||||
|
||||
&:before{
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -47,14 +44,14 @@
|
|||
position: fixed;
|
||||
z-index: 11;
|
||||
max-width: 960px;
|
||||
@media $medium-screen {
|
||||
@include resp(medium) {
|
||||
max-width: 85%;
|
||||
}
|
||||
@media $xsmall-screen {
|
||||
@include resp(xsmall) {
|
||||
max-width: 90%;
|
||||
}
|
||||
@include translate(0, -500%);
|
||||
@include transition-transform(#{"0.3s ease-out"});
|
||||
@include transition-transform(0.3s ease-out);
|
||||
}
|
||||
|
||||
.btn-close{
|
||||
|
|
@ -62,12 +59,11 @@
|
|||
font-size: 30px;
|
||||
text-decoration: none;
|
||||
position: absolute; right: 0; top: 0;
|
||||
.margin;
|
||||
@extend .margin;
|
||||
background: inherit;
|
||||
&:hover{
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-title, h4 {
|
||||
|
|
@ -76,8 +72,7 @@
|
|||
}
|
||||
|
||||
.modal-subtitle, h5 {
|
||||
.text-secondary;
|
||||
|
||||
@extend .text-secondary;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
// Core popovers
|
||||
[popover-top],
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
|
||||
// Popover hover trigger
|
||||
&:hover {
|
||||
&::after {
|
||||
&:after {
|
||||
transition: opacity .2s ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Creating popover::after element
|
||||
&::after {
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
|
|
@ -31,20 +31,20 @@
|
|||
background: $light-dark;
|
||||
transition: opacity .25s ease-out;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
.border;
|
||||
@extend .border;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover positioning: left, right, top, bottom
|
||||
[popover-left] {
|
||||
&::before {
|
||||
&:before {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-left: -12px;
|
||||
transform: translatey(-50%) rotate(-90deg);
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
content: attr(popover-left);
|
||||
left: 0;
|
||||
top: 50%;
|
||||
|
|
@ -54,14 +54,14 @@
|
|||
}
|
||||
|
||||
[popover-right] {
|
||||
&::before {
|
||||
&:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-left: 1px;
|
||||
transform: translatey(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
content: attr(popover-right);
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
|
|
@ -71,24 +71,24 @@
|
|||
}
|
||||
|
||||
[popover-top] {
|
||||
&::before {
|
||||
&:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
content: attr(popover-top);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
[popover-bottom] {
|
||||
&::before {
|
||||
&:before {
|
||||
top:100%;
|
||||
margin-top: 8px;
|
||||
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
content: attr(popover-bottom);
|
||||
top: 100%;
|
||||
margin-top: 8px;
|
||||
39
src/components/_shadows.scss
Normal file
39
src/components/_shadows.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
$shadow-color-regular: hsla(0,0,0%,.2);
|
||||
$shadow-color-hover: hsla(0,0,0%,.3);
|
||||
|
||||
$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 {
|
||||
-webkit-box-shadow: $shadow-regular;
|
||||
-moz-box-shadow: $shadow-regular;
|
||||
box-shadow: $shadow-regular;
|
||||
transition: all .5s ease;
|
||||
&.shadow-large {
|
||||
-webkit-box-shadow: $shadow-large;
|
||||
-moz-box-shadow: $shadow-large;
|
||||
box-shadow: $shadow-large;
|
||||
}
|
||||
&.shadow-small {
|
||||
-webkit-box-shadow: $shadow-small;
|
||||
-moz-box-shadow: $shadow-small;
|
||||
box-shadow: $shadow-small;
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover{
|
||||
-webkit-box-shadow: $shadow-hover;
|
||||
-moz-box-shadow: $shadow-hover;
|
||||
box-shadow: $shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-shadows > * {
|
||||
@extend .shadow;
|
||||
}
|
||||
.child-shadows-hover > * {
|
||||
@extend .shadow;
|
||||
@extend .shadow-hover;
|
||||
}
|
||||
33
src/components/_tables.scss
Normal file
33
src/components/_tables.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
@import 'colors';
|
||||
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
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%;
|
||||
}
|
||||
tbody tr td {
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten($primary, 25%);
|
||||
}
|
||||
}
|
||||
36
src/components/_tabs.scss
Normal file
36
src/components/_tabs.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
@import 'colors';
|
||||
|
||||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
padding: 0.75rem 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
137
src/components/_utilities.scss
Normal file
137
src/components/_utilities.scss
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
$base: 1rem;
|
||||
$large: 2rem;
|
||||
$small: .5rem;
|
||||
|
||||
.margin {
|
||||
margin: $base;
|
||||
|
||||
&-top {
|
||||
margin-top: $base;
|
||||
&-large {
|
||||
margin-top: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-top: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
margin-right: $base;
|
||||
&-large {
|
||||
margin-right: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-right: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-bottom: $base;
|
||||
&-large {
|
||||
margin-bottom: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-bottom: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
margin-left: $base;
|
||||
&-large {
|
||||
margin-left: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-left: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
margin: $large;
|
||||
}
|
||||
&-small {
|
||||
margin: $small;
|
||||
}
|
||||
&-none {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: $base;
|
||||
|
||||
&-top {
|
||||
padding-top: $base;
|
||||
&-large {
|
||||
padding-top: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-top: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
padding-right: $base;
|
||||
&-large {
|
||||
padding-right: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-right: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
padding-bottom: $base;
|
||||
&-large {
|
||||
padding-bottom: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-bottom: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
padding-left: $base;
|
||||
&-large {
|
||||
padding-left: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-left: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
padding: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
$large-screen: #{"screen and (max-width: 1200px)"};
|
||||
$medium-screen: #{"screen and (max-width: 992px)"};
|
||||
$small-screen: #{"screen and (max-width: 768px)"};
|
||||
$xsmall-screen: #{"screen and (max-width: 480px)"};
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@media $medium-screen {
|
||||
width: 85%;
|
||||
}
|
||||
@media $xsmall-screen {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@mixin hr-after()
|
||||
{
|
||||
text-align: center;
|
||||
color: lighten($primary, 30%);
|
||||
display: block;
|
||||
content: "~~~";
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.section:after {
|
||||
.hr-after;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
}
|
||||
hr:after {
|
||||
.hr-after;
|
||||
top: -.75rem;
|
||||
}
|
||||
.paper {
|
||||
border: 1px solid $primary-light;
|
||||
background-color: $main-background;
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
-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);
|
||||
@media $xsmall-screen {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
124
src/flexbox.scss
124
src/flexbox.scss
|
|
@ -1,124 +0,0 @@
|
|||
$columnNames: col, sm, md, lg;
|
||||
$columnSizes: 0px, 768px, 992px, 1200px;
|
||||
|
||||
$numberOfColumns: 12;
|
||||
|
||||
@mixin make-column-class($name, $size, $n, $p: 1) when ($p =< $n)
|
||||
{
|
||||
$percent: ($p * 100% / $n);
|
||||
.${name}-${p} {
|
||||
@include col-size($percent);
|
||||
}
|
||||
|
||||
@include make-column-class($name, $size, $n, ($p + 1));
|
||||
}
|
||||
|
||||
@mixin make-column-classes($n, $j: 1) when ($j =< length($columnNames))
|
||||
{
|
||||
$columnName: extract($columnNames, $j);
|
||||
$columnSize: extract($columnSizes, $j);
|
||||
@media (min-width: $columnSize) {
|
||||
@include make-column-class($columnName, $columnSize, $n);
|
||||
}
|
||||
|
||||
@include make-column-classes($n, $j + 1);
|
||||
}
|
||||
|
||||
@mixin center-all()
|
||||
{
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@mixin col-size($percent)
|
||||
{
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 $percent;
|
||||
-ms-flex: 0 0 $percent;
|
||||
flex: 0 0 $percent;
|
||||
max-width: $percent;
|
||||
}
|
||||
.row {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-flow: row wrap;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 1rem;
|
||||
&.flex-right {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.flex-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.flex-edges {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.flex-spaces {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
&.flex-top {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&.flex-middle {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.flex-bottom {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.col {
|
||||
padding: 1rem;
|
||||
@media (max-width: 767px) {
|
||||
// Stack for mobile
|
||||
@include col-size(100%);
|
||||
}
|
||||
}
|
||||
.col-fill {
|
||||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
@include make-column-classes($numberOfColumns);
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.align-middle {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
.align-bottom {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
$global-font-size: 20px;
|
||||
$header-font: 'Patrick Hand SC';
|
||||
$body-font: 'Neucha';
|
||||
$font-color: $primary;
|
||||
|
||||
html {
|
||||
font-size: $global-font-size;
|
||||
font-family: $body-font, sans-serif;
|
||||
color: $font-color;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
|
||||
font-family: $body-font, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $header-font, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: .8rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
105
src/forms.scss
105
src/forms.scss
|
|
@ -1,105 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:$primary;
|
||||
outline:none;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
font-size: 1rem;
|
||||
padding: .5rem .5rem;
|
||||
border: 2px solid $primary;
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled{
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
> label, legend {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
textarea.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
cursor: pointer;
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset.form-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
ol {
|
||||
list-style-type: decimal;
|
||||
ol {
|
||||
list-style-type: upper-alpha;
|
||||
ol {
|
||||
list-style-type: upper-roman;
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin li-bullet($char)
|
||||
{
|
||||
li:before {
|
||||
content: $char;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
li {
|
||||
text-indent: -7px;
|
||||
}
|
||||
li:before {
|
||||
position: relative;
|
||||
left: -7px;
|
||||
}
|
||||
@include li-bullet("-");
|
||||
ul {
|
||||
@include li-bullet("+");
|
||||
ul {
|
||||
@include li-bullet("~");
|
||||
ul {
|
||||
@include li-bullet("⤍");
|
||||
ul {
|
||||
.li-bullet("⁎")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.inline li{
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
$shadow-color-regular: hsla(0,0%,0%,.2);
|
||||
$shadow-color-hover: hsla(0,0%,0%,.3);
|
||||
|
||||
$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 {
|
||||
-webkit-box-shadow: $shadow-regular;
|
||||
-moz-box-shadow: $shadow-regular;
|
||||
box-shadow: $shadow-regular;
|
||||
transition: all .5s ease;
|
||||
&.shadow-large {
|
||||
-webkit-box-shadow: $shadow-large;
|
||||
-moz-box-shadow: $shadow-large;
|
||||
box-shadow: $shadow-large;
|
||||
}
|
||||
&.shadow-small {
|
||||
-webkit-box-shadow: $shadow-small;
|
||||
-moz-box-shadow: $shadow-small;
|
||||
box-shadow: $shadow-small;
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover{
|
||||
-webkit-box-shadow: $shadow-hover;
|
||||
-moz-box-shadow: $shadow-hover;
|
||||
box-shadow: $shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-shadows > * {
|
||||
.shadow;
|
||||
}
|
||||
.child-shadows-hover > * {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
}
|
||||
|
|
@ -1,28 +1,31 @@
|
|||
@charset 'UTF-8';
|
||||
|
||||
@media screen {
|
||||
@import 'reset';
|
||||
@import 'boxreset';
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'borders';
|
||||
@import 'shadows';
|
||||
@import 'flexbox';
|
||||
@import 'container';
|
||||
@import 'buttons';
|
||||
@import 'forms';
|
||||
@import 'lists';
|
||||
@import 'code';
|
||||
@import 'tables';
|
||||
@import 'images';
|
||||
@import 'utilities';
|
||||
@import 'popovers';
|
||||
@import 'cards';
|
||||
@import 'badges';
|
||||
@import 'alerts';
|
||||
@import 'tabs';
|
||||
@import 'article';
|
||||
@import 'modals';
|
||||
@import 'components/reset';
|
||||
@import 'components/boxreset';
|
||||
@import 'components/colors';
|
||||
@import 'components/fonts';
|
||||
@import 'components/borders';
|
||||
@import 'components/shadows';
|
||||
@import 'components/flexbox';
|
||||
@import 'components/container';
|
||||
@import 'components/buttons';
|
||||
@import 'components/forms';
|
||||
@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 'print';
|
||||
// @import 'components/print';
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
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%);
|
||||
}
|
||||
@media screen and (max-width:480px) {
|
||||
thead tr th {
|
||||
padding: 2%;
|
||||
}
|
||||
tbody tr td {
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten($primary, 25%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
padding: 0.75rem 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $primary-light;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
color: $primary;
|
||||
border-bottom: solid 3px $secondary;
|
||||
}
|
||||
|
||||
@mixin loop($num) when ($num > 0)
|
||||
{
|
||||
@include loop(($num - 1));
|
||||
input[id = #{"tab${num}"]:checked~div[id = ~"content${num}"}]{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
@include loop(5);
|
||||
}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
$base: 1rem;
|
||||
$large: 2rem;
|
||||
$small: .5rem;
|
||||
|
||||
.margin {
|
||||
margin: $base;
|
||||
&-top {
|
||||
margin-top: $base;
|
||||
&-large {
|
||||
margin-top: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-top: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
margin-right: $base;
|
||||
&-large {
|
||||
margin-right: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-right: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
margin-bottom: $base;
|
||||
&-large {
|
||||
margin-bottom: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-bottom: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
margin-left: $base;
|
||||
&-large {
|
||||
margin-left: $large;
|
||||
}
|
||||
&-small {
|
||||
margin-left: $small;
|
||||
}
|
||||
&-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&-large {
|
||||
margin: $large;
|
||||
}
|
||||
&-small {
|
||||
margin: $small;
|
||||
}
|
||||
&-none {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.padding {
|
||||
padding: $base;
|
||||
&-top {
|
||||
padding-top: $base;
|
||||
&-large {
|
||||
padding-top: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-top: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
padding-right: $base;
|
||||
&-large {
|
||||
padding-right: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-right: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
padding-bottom: $base;
|
||||
&-large {
|
||||
padding-bottom: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-bottom: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
padding-left: $base;
|
||||
&-large {
|
||||
padding-left: $large;
|
||||
}
|
||||
&-small {
|
||||
padding-left: $small;
|
||||
}
|
||||
&-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&-large {
|
||||
padding: $large;
|
||||
}
|
||||
&-small {
|
||||
padding: $small;
|
||||
}
|
||||
&-none {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue