mirror of
https://github.com/papercss/papercss
synced 2024-06-22 07:26:30 +02:00
Merge branch 'koester-sass-port' into develop
This commit is contained in:
rhyneav
commit
e68cb6e90f
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
/node_modules
|
||||
npm-debug.log
|
||||
/dist
|
||||
/tests/node_modules
|
||||
/tests/node_modules
|
||||
.DS_Store
|
||||
|
|
|
|||
12
README.md
12
README.md
|
|
@ -40,9 +40,11 @@ There are several options available:
|
|||
|
||||
## Content of the framework
|
||||
|
||||
We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`). You can also use single components that are build into `papercss/dist/components`.
|
||||
We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`).
|
||||
|
||||
You can also play with original, source files, written in LESS, in `src/`.
|
||||
You can choose which components you may want to use. Only the components that get imported in `src/styles.scss` will be compoiled into `dist/paper.css`.
|
||||
|
||||
You can also play with original, source files, written in SCSS, in `src/`.
|
||||
|
||||
## Documentation
|
||||
|
||||
|
|
@ -52,11 +54,11 @@ You can also view the develop branch at [develop.getpapercss.com](https://develo
|
|||
|
||||
## Customizing
|
||||
|
||||
You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.less` files in `src/`.
|
||||
You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.scss` files in `src/`.
|
||||
|
||||
The main places you might want to make changes would be `colors.less` or `fonts.less`, where you can specify new colors or fonts for your CSS build.
|
||||
The main place you might want to make changes would be `core/_config.scss`, where you can specify new colors or fonts for your CSS build.
|
||||
|
||||
After you make changes, be sure to build the new CSS files. Do so by running `npm run build` and get them from the `dist/` folder.
|
||||
After you make changes, be sure to build the new CSS files. Do so by running `gulp build` and get them from the `dist/` folder.
|
||||
|
||||
## Contributing
|
||||
|
||||
|
|
|
|||
39
gulpfile.js
39
gulpfile.js
|
|
@ -1,8 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp'),
|
||||
connect = require('gulp-connect'),
|
||||
less = require('gulp-less'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rename = require('gulp-rename');
|
||||
connect = require('gulp-connect'),
|
||||
sass = require('gulp-sass'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rename = require('gulp-rename');
|
||||
|
||||
gulp.task('webserver', function() {
|
||||
connect.server({
|
||||
|
|
@ -10,32 +12,25 @@ gulp.task('webserver', function() {
|
|||
});
|
||||
});
|
||||
|
||||
gulp.task('less', function() {
|
||||
gulp.src('src/styles.less')
|
||||
.pipe(less())
|
||||
gulp.task('sass', function() {
|
||||
gulp.src('src/**/*.scss')
|
||||
.pipe(sass.sync().on('error', sass.logError))
|
||||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(rename('paper.css'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(connect.reload());
|
||||
});
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('src/*.less', ['less']);
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch('src/**/*.scss', ['sass']);
|
||||
});
|
||||
|
||||
gulp.task('minify-css', () => {
|
||||
gulp.src('dist/paper.css')
|
||||
.pipe(cleanCSS())
|
||||
.pipe(rename('paper.min.css'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
||||
.pipe(rename('paper.min.css'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
gulp.task('components', () => {
|
||||
gulp.src('src/*.less')
|
||||
.pipe(less())
|
||||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(gulp.dest('dist/components'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['less', 'webserver', 'watch']);
|
||||
gulp.task('build', ['components', 'less', 'minify-css']);
|
||||
gulp.task('default', ['sass', 'webserver', 'watch']);
|
||||
gulp.task('build', ['sass', 'minify-css']);
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
<li><a href="#article">Article</a></li>
|
||||
<li><a href="#collapsible">Collapsibles</a></li>
|
||||
<li><a href="#modals">Modals</a></li>
|
||||
<li><a href="#collapsible">Collapsibles</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="to-top">
|
||||
|
|
@ -1274,7 +1275,6 @@
|
|||
</div>
|
||||
</div></code></pre>
|
||||
|
||||
|
||||
<h4>Accordions</h4>
|
||||
<p>Use <code>input type="radio"</code> when you want to keep only one element collapsed at a time.</p>
|
||||
<div class="row">
|
||||
|
|
@ -1380,7 +1380,6 @@
|
|||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Modal with title, text and links</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<a href="#modal-2" class="paper-btn margin">Another Modal!</a>
|
||||
|
|
|
|||
2556
package-lock.json
generated
2556
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.3.1",
|
||||
"version": "1.4.0",
|
||||
"description": "The less formal CSS framework.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
@ -23,15 +23,13 @@
|
|||
"gulp": "3.9.1",
|
||||
"gulp-clean-css": "3.9.0",
|
||||
"gulp-connect": "5.0.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"less": "2.7.2"
|
||||
"gulp-rename": "1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browserify": "^14.1.0",
|
||||
"chai": "^4.1.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"http-server": "^0.9.0",
|
||||
"install": "0.10.1",
|
||||
"jake": "^8.0.15",
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
|
||||
.alert{
|
||||
.border;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.make-alert-color-classes(@a: length(@colors)) when (@a > 0) {
|
||||
.make-alert-color-classes(@a - 1);
|
||||
@color: extract(@colors, @a);
|
||||
.alert-@{color} {
|
||||
border-color: @@color;
|
||||
color: @@color;
|
||||
background-color: ~"@{@{color}-light}";
|
||||
}
|
||||
}
|
||||
|
||||
.make-alert-color-classes();
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
article {
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 15px;
|
||||
color: @muted;
|
||||
|
||||
a {
|
||||
color: @muted-text;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
color: @light-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +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;
|
||||
}
|
||||
|
||||
.make-badge-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-badge-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.badge.@{color} {
|
||||
background-color: @@color;
|
||||
}
|
||||
}
|
||||
|
||||
.make-badge-color-classes();
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
@import './colors.less';
|
||||
|
||||
.border {
|
||||
border: 2px solid @primary;
|
||||
}
|
||||
.border, .border-1, .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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.child-borders > * {
|
||||
border: 2px solid @primary;
|
||||
}
|
||||
.border-white {
|
||||
border-color: @white;
|
||||
}
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
.border-thick {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.make-border-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-border-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.border-@{color} {
|
||||
border-color: @@color;
|
||||
}
|
||||
}
|
||||
|
||||
.make-border-color-classes();
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
@import './colors.less';
|
||||
@import './shadows.less';
|
||||
@import './borders.less';
|
||||
@import './forms.less'; // .disabled
|
||||
|
||||
button, .paper-btn, [type="button"] {
|
||||
.shadow;
|
||||
align-self:center;
|
||||
background:transparent;
|
||||
transition:all .5s ease, background-color .1s ease;
|
||||
color: @primary;
|
||||
display: inline;
|
||||
outline:none;
|
||||
border:solid 2px @primary;
|
||||
.border;
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
&.btn-large {
|
||||
.shadow-large;
|
||||
font-size:2rem;
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
&.btn-small {
|
||||
.shadow-small;
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
}
|
||||
&:focus{
|
||||
border: 2px solid @secondary;
|
||||
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
}
|
||||
&:active {
|
||||
border-color: hsla(0,0%,0%,.2);
|
||||
transition: none;
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-image:
|
||||
linear-gradient(5deg, transparent 65%, @secondary 80%, transparent 90%),
|
||||
linear-gradient(165deg, transparent 5%, @secondary 15%, transparent 25%),
|
||||
linear-gradient(165deg, transparent 45%, @secondary 55%, transparent 65%),
|
||||
linear-gradient(15deg, transparent 25%, @secondary 35%, transparent 50%);
|
||||
background-repeat:repeat-x;
|
||||
background-size: 4px 3px;
|
||||
background-position:0 90%;
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
|
||||
.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-button-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;
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
@primary: #41403E;
|
||||
@secondary: #0071DE;
|
||||
|
||||
@success: #86a361;
|
||||
@warning: #ddcd45;
|
||||
@danger: #a7342d;
|
||||
@muted: #868e96;
|
||||
|
||||
@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%);
|
||||
|
||||
@white-dark: rgba(0, 0, 0, 0.03);
|
||||
@light-dark: rgba(0, 0, 0, 0.7);
|
||||
@white: rgba(255, 255, 255, 1);
|
||||
@main-background: rgba(255, 255, 255, 1);
|
||||
|
||||
@primary-text: #FFF;
|
||||
@secondary-text: @primary;
|
||||
@success-text: @primary;
|
||||
@warning-text: @primary;
|
||||
@danger-text: @primary;
|
||||
@muted-text: @primary;
|
||||
|
||||
@colors: primary, secondary, success, warning, danger, muted;
|
||||
|
||||
.make-text-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-text-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.text-@{color} {
|
||||
color: @@color;
|
||||
}
|
||||
.background-@{color}{
|
||||
background-color: ~"@{@{color}-light}";
|
||||
}
|
||||
}
|
||||
|
||||
.make-text-color-classes();
|
||||
53
src/components/_accordion.scss
Normal file
53
src/components/_accordion.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@mixin transition($transition){
|
||||
-webkit-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
-moz-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
-o-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
transition: max-height $transition, padding $transition, opacity $transition;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:nth-of-type(1) {
|
||||
border-top: 1px solid $muted-light;
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0rem 0.75rem;
|
||||
margin:0;
|
||||
background-color: lighten($white-dark,80%);
|
||||
border-bottom: 1px solid $muted-light;
|
||||
@include transition(#{"0.25s ease"});
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
border-bottom: 1px solid $muted-light;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
}
|
||||
input:checked+label {
|
||||
color: $primary;
|
||||
}
|
||||
input[id ^="collapsible"]:checked ~ div.collapsible-body {
|
||||
opacity: 1;
|
||||
max-height: 960px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
15
src/components/_alerts.scss
Normal file
15
src/components/_alerts.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.alert {
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
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;
|
||||
}
|
||||
}
|
||||
39
src/components/_article.scss
Normal file
39
src/components/_article.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
article {
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 15px;
|
||||
color: $muted;
|
||||
|
||||
a {
|
||||
color: $muted-text;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
color: $light-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px 0px;
|
||||
}
|
||||
|
||||
button {
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 2rem;
|
||||
|
||||
@include resp(xs) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
21
src/components/_badges.scss
Normal file
21
src/components/_badges.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.badge {
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
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;
|
||||
}
|
||||
}
|
||||
93
src/components/_buttons.scss
Normal file
93
src/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
button,
|
||||
.paper-btn,
|
||||
[type="button"] {
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
transition: all .5s ease, background-color .1s ease;
|
||||
color: $primary;
|
||||
display: inline;
|
||||
outline: none;
|
||||
border: 2px solid $primary;
|
||||
@include border-style();
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
@include shadow();
|
||||
|
||||
@include resp(520px) {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
@include shadow(large);
|
||||
font-size: 2rem;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
&.btn-small {
|
||||
@include shadow(small);
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
-moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: hsla(0, 0%, 0%, .2);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 4px 3px;
|
||||
background-position: 0 90%;
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,27 @@
|
|||
@import './colors.less';
|
||||
@import './shadows.less';
|
||||
|
||||
.card {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
|
||||
@include shadow;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid @muted-light;
|
||||
border: 2px solid $muted-light;
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
padding: .75rem 1.25rem;
|
||||
background-color: @white-dark;
|
||||
background-color: $white-dark;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 2px solid @muted-light;
|
||||
border-bottom: 2px solid $muted-light;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 2px solid @muted-light;
|
||||
border-top: 2px solid $muted-light;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
|
|
@ -35,7 +34,7 @@
|
|||
}
|
||||
|
||||
.card-subtitle, h5 {
|
||||
.text-secondary;
|
||||
@extend .text-secondary;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
114
src/components/_forms.scss
Normal file
114
src/components/_forms.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
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;
|
||||
|
||||
/* the basic, unchecked style */
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
display: block;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset.form-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,37 +1,20 @@
|
|||
@import './colors.less';
|
||||
@import './container.less';
|
||||
@import './utilities.less';
|
||||
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y);
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
}
|
||||
|
||||
.modal{
|
||||
|
||||
&: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;
|
||||
}
|
||||
.modal-body{
|
||||
.translate(0, 0);
|
||||
@include translate(0, 0);
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,33 +22,32 @@
|
|||
.modal-body{
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
background: @white;
|
||||
border: 2px solid @muted-light;
|
||||
background: $white;
|
||||
border: 2px solid $muted-light;
|
||||
word-wrap: break-word;
|
||||
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%;
|
||||
}
|
||||
.translate(0, -500%);
|
||||
.transition-transform(~"0.3s ease-out");
|
||||
@include translate(0, -500%);
|
||||
@include transition-transform(0.3s ease-out);
|
||||
}
|
||||
|
||||
.btn-close{
|
||||
color: @primary-light;
|
||||
color: $primary-light;
|
||||
font-size: 30px;
|
||||
text-decoration: none;
|
||||
position: absolute; right: 0; top: 0;
|
||||
.margin;
|
||||
@extend .margin;
|
||||
background: inherit;
|
||||
&:hover{
|
||||
color: @muted;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-title, h4 {
|
||||
|
|
@ -74,8 +56,7 @@
|
|||
}
|
||||
|
||||
.modal-subtitle, h5 {
|
||||
.text-secondary;
|
||||
|
||||
@extend .text-secondary;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -92,6 +73,6 @@
|
|||
|
||||
a button {
|
||||
text-decoration: none;
|
||||
background: @white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
|
||||
// Core popovers
|
||||
[popover-top],
|
||||
[popover-right],
|
||||
|
|
@ -11,14 +8,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%;
|
||||
|
|
@ -27,24 +24,25 @@
|
|||
min-width: 80px;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
color: @white;
|
||||
background: @light-dark;
|
||||
color: $white;
|
||||
background: $light-dark;
|
||||
transition: opacity .25s ease-out;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
.border;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 +52,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 +69,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;
|
||||
35
src/components/_tabs.scss
Normal file
35
src/components/_tabs.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
padding: 0.75rem 0 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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,58 +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%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
37
src/content/_code.scss
Normal file
37
src/content/_code.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
39
src/content/_fonts.scss
Normal file
39
src/content/_fonts.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
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;
|
||||
}
|
||||
28
src/content/_images.scss
Normal file
28
src/content/_images.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
img {
|
||||
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;
|
||||
}
|
||||
}
|
||||
44
src/content/_lists.scss
Normal file
44
src/content/_lists.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
37
src/content/_tables.scss
Normal file
37
src/content/_tables.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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%;
|
||||
}
|
||||
tbody tr td {
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten($primary, 25%);
|
||||
}
|
||||
}
|
||||
207
src/core/_config.scss
Normal file
207
src/core/_config.scss
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
/**
|
||||
Global PaperCSS Config
|
||||
*/
|
||||
|
||||
// Imports
|
||||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
// Set theme colors
|
||||
$primary: #41403E !default;
|
||||
$secondary: #0071DE !default;
|
||||
|
||||
$success: #86a361 !default;
|
||||
$warning: #ddcd45 !default;
|
||||
$danger: #a7342d !default;
|
||||
$muted: #868e96 !default;
|
||||
|
||||
$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) !default;
|
||||
$light-dark: rgba(black, 0.7) !default;
|
||||
$white: rgba(white, 1) !default;
|
||||
$main-background: rgba(white, 1) !default;
|
||||
|
||||
$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) !default;
|
||||
$shadow-color-hover: hsla(0,0,0%,.3) !default;
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
.background-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Font settings
|
||||
$global-font-size: 20px !default;
|
||||
$header-font: 'Patrick Hand SC' !default;
|
||||
$body-font: 'Neucha' !default;
|
||||
$font-color: $primary !default;
|
||||
|
||||
// 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 !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; }
|
||||
@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";}
|
||||
}
|
||||
|
||||
/**
|
||||
Useful helper mixins
|
||||
*/
|
||||
@mixin hr-after() {
|
||||
text-align: center;
|
||||
color: lighten($primary, 30%);
|
||||
display: block;
|
||||
content: "~~~";
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@mixin li-bullet($char) {
|
||||
li:before {
|
||||
content: $char;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-transform($transition) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y);
|
||||
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;
|
||||
@include translate(0, 2px);
|
||||
} @else if $type == small {
|
||||
transition: all .5s ease;
|
||||
box-shadow: $shadow-small;
|
||||
} @else if $type == regular {
|
||||
transition: all .5s ease;
|
||||
box-shadow: $shadow-regular;
|
||||
} @else if $type == large {
|
||||
transition: all .5s ease;
|
||||
box-shadow: $shadow-large;
|
||||
} @else {
|
||||
@error "@mixin shadow(input) does not exist"
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
120
src/flexbox.less
120
src/flexbox.less
|
|
@ -1,120 +0,0 @@
|
|||
@columnNames: col, sm, md, lg;
|
||||
@columnSizes: 0px, 768px, 992px, 1200px;
|
||||
|
||||
@numberOfColumns: 12;
|
||||
|
||||
.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) {
|
||||
@percent: (@p * 100% / @n);
|
||||
.@{name}-@{p} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
|
||||
.make-column-class(@name, @size, @n, (@p + 1));
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) {
|
||||
@columnName: extract(@columnNames, @j);
|
||||
@columnSize: extract(@columnSizes, @j);
|
||||
@media (min-width: @columnSize) {
|
||||
.make-column-class(@columnName, @columnSize, @n);
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j + 1);
|
||||
}
|
||||
|
||||
.center-all() {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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
|
||||
.col-size(100%);
|
||||
}
|
||||
}
|
||||
.col-fill {
|
||||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
.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.less
105
src/forms.less
|
|
@ -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,26 +0,0 @@
|
|||
@import './colors.less';
|
||||
@import './borders.less';
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
47
src/layout/_container.scss
Normal file
47
src/layout/_container.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
.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(xs) {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
124
src/layout/_flexbox.scss
Normal file
124
src/layout/_flexbox.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
$numberOfColumns: 12;
|
||||
|
||||
@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;
|
||||
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(sm) {
|
||||
@include col-size(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.col-fill {
|
||||
width: auto;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
@include resp(md) {
|
||||
width: 85%;
|
||||
}
|
||||
@include resp(xs) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.li-bullet(@char) {
|
||||
li:before {
|
||||
content: @char;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
li {
|
||||
text-indent: -7px;
|
||||
}
|
||||
li:before {
|
||||
position: relative;
|
||||
left: -7px;
|
||||
}
|
||||
.li-bullet("-");
|
||||
ul {
|
||||
.li-bullet("+");
|
||||
ul {
|
||||
.li-bullet("~");
|
||||
ul {
|
||||
.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,23 +0,0 @@
|
|||
@import (less) "./reset.less";
|
||||
@import (less) "./boxreset.less";
|
||||
@import (less) "./colors.less";
|
||||
@import (less) "./fonts.less";
|
||||
@import (less) "./borders.less";
|
||||
@import (less) "./shadows.less";
|
||||
@import (less) "./flexbox.less";
|
||||
@import (less) "./container.less";
|
||||
@import (less) "./buttons.less";
|
||||
@import (less) "./forms.less";
|
||||
@import (less) "./lists.less";
|
||||
@import (less) "./code.less";
|
||||
@import (less) "./tables.less";
|
||||
@import (less) "./images.less";
|
||||
@import (less) "./utilities.less";
|
||||
@import (less) "./popovers.less";
|
||||
@import (less) "./cards.less";
|
||||
@import (less) "./badges.less";
|
||||
@import (less) "./alerts.less";
|
||||
@import (less) "./tabs.less";
|
||||
@import (less) "./article.less";
|
||||
@import (less) "./accordion.less";
|
||||
@import (less) "./modals.less";
|
||||
37
src/styles.scss
Normal file
37
src/styles.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@charset 'UTF-8';
|
||||
|
||||
/* PaperCSS core */
|
||||
@import 'core/config';
|
||||
@import 'core/reset';
|
||||
|
||||
/* Layout styling */
|
||||
@import 'layout/container';
|
||||
@import 'layout/flexbox';
|
||||
|
||||
/* Content styling */
|
||||
@import 'content/code';
|
||||
@import 'content/fonts';
|
||||
@import 'content/images';
|
||||
@import 'content/lists';
|
||||
@import 'content/tables';
|
||||
|
||||
/* Utilities */
|
||||
@import 'utilities/borders';
|
||||
@import 'utilities/shadows';
|
||||
|
||||
/* Components */
|
||||
@import 'components/accordion';
|
||||
@import 'components/alerts';
|
||||
@import 'components/article';
|
||||
@import 'components/badges';
|
||||
@import 'components/buttons';
|
||||
@import 'components/cards';
|
||||
@import 'components/forms';
|
||||
@import 'components/modals';
|
||||
@import 'components/popovers';
|
||||
@import 'components/tabs';
|
||||
@import 'components/utilities';
|
||||
|
||||
// @media print {
|
||||
// @import 'layout/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,40 +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;
|
||||
}
|
||||
|
||||
.loop(@num) when (@num > 0) {
|
||||
.loop((@num - 1));
|
||||
input[id = ~"tab@{num}"]:checked~div[id = ~"content@{num}"]{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
61
src/utilities/_borders.scss
Normal file
61
src/utilities/_borders.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
.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>* {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.border-thick {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
@each $colorName, $color in $colors {
|
||||
.border-#{$colorName} {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
28
src/utilities/_shadows.scss
Normal file
28
src/utilities/_shadows.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.shadow {
|
||||
@include shadow();
|
||||
|
||||
&.shadow-large {
|
||||
@include shadow(large);
|
||||
}
|
||||
|
||||
&.shadow-small {
|
||||
@include shadow(small);
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.child-shadows > * {
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
.child-shadows-hover > * {
|
||||
@include shadow();
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue