mirror of
https://github.com/papercss/papercss
synced 2024-06-19 22:25:10 +02:00
Merge branch 'release-1.5.0'
This commit is contained in:
rhyneav
commit
d7187ffa65
15
.stylelintrc.json
Normal file
15
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"extends": "stylelint-config-sass-guidelines",
|
||||
"plugins": [
|
||||
"stylelint-scss"
|
||||
],
|
||||
"rules": {
|
||||
"max-nesting-depth": 5,
|
||||
"property-no-vendor-prefix": null,
|
||||
"value-no-vendor-prefix": null,
|
||||
"selector-no-qualifying-type": null,
|
||||
"selector-max-compound-selectors": null,
|
||||
"scss/selector-no-redundant-nesting-selector": null,
|
||||
"scss/at-extend-no-missing-placeholder": null
|
||||
}
|
||||
}
|
||||
13
.travis.yml
13
.travis.yml
|
|
@ -14,7 +14,14 @@ addons:
|
|||
packages:
|
||||
- google-chrome-stable fluxbox
|
||||
|
||||
before_install:
|
||||
- npm install -g npm@5.10.0
|
||||
|
||||
install:
|
||||
- npm ci
|
||||
|
||||
before_script:
|
||||
- npm run stylelint
|
||||
- "sh -e /etc/init.d/xvfb start"
|
||||
- sleep 3
|
||||
- fluxbox >/dev/null 2>&1 &
|
||||
|
|
@ -24,9 +31,3 @@ before_script:
|
|||
- gulp build
|
||||
|
||||
script: "./jake.sh loose=true capture=Firefox"
|
||||
|
||||
before_install:
|
||||
- npm i -g npm@latest
|
||||
|
||||
install:
|
||||
- npm ci
|
||||
|
|
|
|||
|
|
@ -73,7 +73,9 @@ Once you are ready to contribute, here the workflow you should follow:
|
|||
- Change your current branch to `develop`: `git checkout develop`
|
||||
- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
|
||||
- Start the local web-server: `gulp` or `npm start`
|
||||
- Once done commit and push your changes to your fork.
|
||||
- Write some code!
|
||||
- Check to make sure your code is following style rules with `npm run stylelint`
|
||||
- Once done commit and push your changes to your fork. The linter is also run as a precommit hook.
|
||||
- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done, it will help reviewers **a lot**!
|
||||
- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone in terms of features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@ weight: -270
|
|||
|
||||
#### Download
|
||||
|
||||
Download the latest version (1.4.1) using either of the links below. Or
|
||||
Download the latest version (1.5.0) using either of the links below. Or
|
||||
download an older release via Github.
|
||||
|
||||
<div class="row flex-spaces text-center">
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.4.1/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.4.1/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.5.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.5.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
|
||||
</div>
|
||||
|
||||
#### NPM
|
||||
|
||||
PaperCSS is available on NPM as of version 1.4.1. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||
PaperCSS is available on NPM, current version 1.5.0. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||
|
||||
* node_modules/papercss/dist/paper.css
|
||||
* node_modules/papercss/dist/paper.min.css
|
||||
|
|
@ -27,8 +27,8 @@ PaperCSS is available on NPM as of version 1.4.1. Install with <code>npm install
|
|||
Don't want to download it? That's cool. You can just link to PaperCSS via
|
||||
[unpkg's CDN](https://unpkg.com/#/). You can use either:
|
||||
|
||||
* [https://unpkg.com/papercss@1.4.1/dist/paper.css](https://unpkg.com/papercss@1.4.1/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.4.1/dist/paper.min.css](https://unpkg.com/papercss@1.4.1/dist/paper.min.css)
|
||||
* [https://unpkg.com/papercss@1.5.0/dist/paper.css](https://unpkg.com/papercss@1.5.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.5.0/dist/paper.min.css](https://unpkg.com/papercss@1.5.0/dist/paper.min.css)
|
||||
|
||||
Here's a quck snippet to get started with PaperCSS:
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ Here's a quck snippet to get started with PaperCSS:
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.4.1/dist/paper.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.5.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
131
docs/content/docs/components/navbar.md
Normal file
131
docs/content/docs/components/navbar.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
title: Navbar
|
||||
description: PaperCSS Navbar
|
||||
---
|
||||
|
||||
<nav class="border fixed split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="/">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible0" type="checkbox" name="collapsible0">
|
||||
<button>
|
||||
<label for="collapsible0">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
</button>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="/docs/">Documentation</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="https://github.com/rhyneav/papercss" target="_blank">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="border split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||
<button>
|
||||
<label for="collapsible1">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
</button>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
#### Code:
|
||||
|
||||
Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the whole page. It's also mobile responsive and will show a hamburger menu on small screens. No JavaScript required!
|
||||
|
||||
```html
|
||||
<nav class="border fixed split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||
<button>
|
||||
<label for="collapsible1">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
</button>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Not Split Navbar
|
||||
|
||||
<nav class="border">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||
<button>
|
||||
<label for="collapsible2">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
</button>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<nav class="border fixed">
|
||||
<div class="nav-brand">
|
||||
<h4><a href="#">Get PaperCSS</a></h4>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||
<button>
|
||||
<label for="collapsible2">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
</button>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
12
gulpfile.js
12
gulpfile.js
|
|
@ -6,7 +6,8 @@ const gulp = require('gulp'),
|
|||
rename = require('gulp-rename'),
|
||||
exec = require('child_process').execFile,
|
||||
optional = require('optional'),
|
||||
hugo = optional('hugo-bin')
|
||||
hugo = optional('hugo-bin'),
|
||||
gulpStylelint = require('gulp-stylelint');
|
||||
|
||||
gulp.task('sass', function() {
|
||||
gulp.src('src/**/*.scss')
|
||||
|
|
@ -53,6 +54,15 @@ gulp.task('minify-css', () => {
|
|||
.pipe(gulp.dest('docs/static/assets'));
|
||||
});
|
||||
|
||||
gulp.task('lint-css', function() {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(gulpStylelint({
|
||||
reporters: [
|
||||
{formatter: 'string', console: true}
|
||||
]
|
||||
}));
|
||||
})
|
||||
|
||||
gulp.task('default', ['sass','watch','hugo-server']);
|
||||
gulp.task('build', ['sass','minify-css','hugo-build']);
|
||||
gulp.task('postinstall', ['sass','minify-css']);
|
||||
|
|
|
|||
8432
package-lock.json
generated
8432
package-lock.json
generated
File diff suppressed because it is too large
Load diff
28
package.json
28
package.json
|
|
@ -1,24 +1,25 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.4.1",
|
||||
"version": "1.5.0",
|
||||
"description": "The less formal CSS framework.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node node_modules/gulp/bin/gulp.js",
|
||||
"build": "node node_modules/gulp/bin/gulp.js build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "gulp postinstall"
|
||||
"postinstall": "gulp postinstall",
|
||||
"stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rhyneav/papercss.git"
|
||||
"url": "git+https://github.com/papercss/papercss.git"
|
||||
},
|
||||
"author": "Rhyne Vlaservich <rhyneav@gmail.com>",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rhyneav/papercss/issues"
|
||||
"url": "https://github.com/papercss/papercss/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rhyneav/papercss#readme",
|
||||
"homepage": "https://www.getpapercss.com",
|
||||
"dependencies": {
|
||||
"gulp": "3.9.1",
|
||||
"gulp-clean-css": "3.9.0",
|
||||
|
|
@ -31,11 +32,13 @@
|
|||
"devDependencies": {
|
||||
"browserify": "^14.1.0",
|
||||
"chai": "^4.1.2",
|
||||
"http-server": "^0.9.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-stylelint": "6.0.0",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"http-server": "^0.9.0",
|
||||
"hugo-bin": "^0.17.0",
|
||||
"install": "0.10.1",
|
||||
"jake": "^8.0.15",
|
||||
|
|
@ -50,9 +53,10 @@
|
|||
"karma-requirejs": "^1.1.0",
|
||||
"mocha": "^4.0.1",
|
||||
"nodemon": "^1.11.0",
|
||||
"npm": "5.3.0",
|
||||
"npm": "^5.3.0",
|
||||
"object-merge": "^2.5.1",
|
||||
"os": "^0.1.1",
|
||||
"pre-commit": "^1.2.2",
|
||||
"procfile": "^0.1.1",
|
||||
"quixote": "^0.14.0",
|
||||
"request": "^2.83.0",
|
||||
|
|
@ -61,6 +65,14 @@
|
|||
"shelljs": "^0.7.6",
|
||||
"simplebuild-jshint": "^1.3.0",
|
||||
"simplebuild-karma": "^1.0.0",
|
||||
"stylelint": "8.4.0",
|
||||
"stylelint-config-sass-guidelines": "4.0.1",
|
||||
"stylelint-config-standard": "18.0.0",
|
||||
"stylelint-order": "0.8.0",
|
||||
"stylelint-scss": "2.2.0",
|
||||
"webpack-dev-server": "2.7.1"
|
||||
}
|
||||
},
|
||||
"pre-commit": [
|
||||
"stylelint"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
}
|
||||
|
||||
.collapsible-body {
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0rem 0.75rem;
|
||||
margin: 0;
|
||||
@include transition;
|
||||
background-color: lighten($white-dark, 80%);
|
||||
border-bottom: 1px solid $muted-light;
|
||||
@include transition;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -24,22 +24,22 @@
|
|||
color: $primary;
|
||||
}
|
||||
|
||||
&[id^="collapsible"]:checked~div.collapsible-body {
|
||||
opacity: 1;
|
||||
max-height: 960px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
&[id^='collapsible']:checked~div.collapsible-body {
|
||||
margin: 0;
|
||||
max-height: 960px;
|
||||
opacity: 1;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $muted;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.alert {
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.alert-#{$colorName} {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
article {
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 15px;
|
||||
color: $muted;
|
||||
.article-meta {
|
||||
color: $muted;
|
||||
font-size: 15px;
|
||||
|
||||
a {
|
||||
color: $muted-text;
|
||||
background-image: none;
|
||||
a {
|
||||
background-image: none;
|
||||
color: $muted-text;
|
||||
|
||||
&:hover {
|
||||
color: $light-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $light-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px 0px;
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px;
|
||||
}
|
||||
|
||||
button {
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 2rem;
|
||||
|
||||
@include resp(xs) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
.badge {
|
||||
@include border-style();
|
||||
background-color: $muted;
|
||||
border: 2px solid $primary;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 0.25em 0.4em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
background-color: $muted;
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@each $colorName, $color in $colors {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
button,
|
||||
.paper-btn,
|
||||
[type="button"] {
|
||||
[type='button'] {
|
||||
@include border-style();
|
||||
@include shadow();
|
||||
@include transition();
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
@include transition();
|
||||
color: $primary;
|
||||
display: inline;
|
||||
outline: none;
|
||||
border: 2px solid $primary;
|
||||
@include border-style();
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
@include shadow();
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 0.75rem;
|
||||
|
||||
@include resp(520px) {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
@include shadow(large);
|
||||
font-size: 2rem;
|
||||
padding: 1rem 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&.btn-small {
|
||||
@include shadow(small);
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
&.btn-block {
|
||||
|
|
@ -44,47 +44,52 @@ button,
|
|||
|
||||
&: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);
|
||||
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
-moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: hsla(0, 0%, 0%, .2);
|
||||
border-color: hsla(0, 0%, 0%, 0.2);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5
|
||||
opacity: 0.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-position: 0 90%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 4px 3px;
|
||||
background-position: 0 90%;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
.alert-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: $color-light;
|
||||
}
|
||||
button.btn-#{$colorName}, .paper-btn.btn-#{$colorName}, [type="button"].btn-#{$colorName} {
|
||||
border-color: $color;
|
||||
|
||||
button.btn-#{$colorName},
|
||||
.paper-btn.btn-#{$colorName},
|
||||
[type='button'].btn-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color-text;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
&:active {
|
||||
background-color: darken($color-light, 10%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.card {
|
||||
@include shadow;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
border: 2px solid $muted-light;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid $muted-light;
|
||||
backface-visibility: hidden;
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
padding: .75rem 1.25rem;
|
||||
background-color: $white-dark;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
@ -30,21 +30,23 @@
|
|||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
|
||||
.card-title, h4 {
|
||||
margin-top: 0;
|
||||
.card-title,
|
||||
h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-subtitle, h5 {
|
||||
@extend .text-secondary;
|
||||
|
||||
margin-top: 0;
|
||||
.card-subtitle,
|
||||
h5 {
|
||||
color: $secondary;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-text, p {
|
||||
margin-top: 0;
|
||||
.card-text,
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-link + .card-link,
|
||||
|
|
|
|||
|
|
@ -1,105 +1,114 @@
|
|||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:$primary;
|
||||
outline:none;
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background: transparent;
|
||||
border: 2px solid $primary;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
color: $primary;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
padding: .5rem .5rem;
|
||||
border: 2px solid $primary;
|
||||
outline: none;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
border: 2px solid $secondary;
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
@extend .disabled;
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
@extend .disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled{
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
> label, legend {
|
||||
|
||||
> label,
|
||||
legend {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
max-width: 100%;
|
||||
textarea {
|
||||
max-height: 90vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
textarea.no-resize{
|
||||
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;
|
||||
.paper-radio,
|
||||
.paper-check {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
/* the basic, unchecked style */
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
display: none;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
border: 2px solid $primary;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid $primary;
|
||||
margin-right: 0.75em;
|
||||
position: relative;
|
||||
vertical-align: -0.25em;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* radio styles */
|
||||
&[type="radio"] {
|
||||
& + span:before {
|
||||
&[type='radio'] {
|
||||
& + span::before {
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem .6rem;
|
||||
border-bottom-right-radius: 1rem .9rem;
|
||||
border-bottom-left-radius: .7rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
}
|
||||
|
||||
&:checked + span:before {
|
||||
&: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 {
|
||||
&[type='checkbox'] {
|
||||
& + span::before {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
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 {
|
||||
&: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;
|
||||
}
|
||||
|
|
@ -109,6 +118,6 @@ input, select, textarea {
|
|||
}
|
||||
|
||||
fieldset.form-group {
|
||||
border: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
.modal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
background: rgba(black, 0.6);
|
||||
z-index: 12;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
@include transition(opacity);
|
||||
background: rgba(#000, 0.6);
|
||||
bottom: 0;
|
||||
flex: 1 1 auto;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
z-index: 12;
|
||||
|
||||
// modal background
|
||||
&-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
@include transition;
|
||||
@include translate(-50%, -50%);
|
||||
backface-visibility: hidden;
|
||||
background: $white;
|
||||
border: 2px solid $muted-light;
|
||||
left: 50%;
|
||||
padding: 1.25rem;
|
||||
backface-visibility: hidden;
|
||||
@include translate(-50%, -50%);
|
||||
@include transition;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@include resp(sm) {
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
cursor: pointer;
|
||||
@include transition;
|
||||
color: $primary-light;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
text-decoration: none;
|
||||
height: 1.1rem;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
text-decoration: none;
|
||||
top: 1rem;
|
||||
@include transition;
|
||||
width: 1.1rem;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -61,21 +61,21 @@
|
|||
|
||||
h4,
|
||||
.modal-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h5,
|
||||
.modal-subtitle {
|
||||
@extend .text-secondary;
|
||||
margin-top: 0;
|
||||
color: $secondary;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
.modal-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-link+.modal-link,
|
||||
|
|
@ -84,24 +84,25 @@
|
|||
}
|
||||
|
||||
.paper-btn {
|
||||
text-decoration: none;
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal-link, a {
|
||||
text-decoration: none;
|
||||
.modal-link,
|
||||
a {
|
||||
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-position: 0 90%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 4px 3px;
|
||||
background-position: 0 90%;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
151
src/components/_navbar.scss
Normal file
151
src/components/_navbar.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
nav {
|
||||
background-color: $main-background;
|
||||
display: flex;
|
||||
padding: 0.3rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
background-color: $primary;
|
||||
border-bottom: 5px solid $primary;
|
||||
border-bottom-left-radius: 15px 5px;
|
||||
border-bottom-right-radius: 15px 3px;
|
||||
color: $primary;
|
||||
margin: 6px 0;
|
||||
transition: 0.4s;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.collapsible input[id^=collapsible]:checked + button {
|
||||
.bar1 {
|
||||
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
|
||||
transform: rotate(-45deg) translate(-9px, 7px);
|
||||
}
|
||||
|
||||
.bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bar3 {
|
||||
-webkit-transform: rotate(45deg) translate(-8px, -9px);
|
||||
transform: rotate(45deg) translate(-8px, -9px);
|
||||
}
|
||||
}
|
||||
|
||||
&.split-nav {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
ul.inline {
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.inline li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: none;
|
||||
border-bottom: 5px solid $primary;
|
||||
border-bottom-left-radius: 15px 3px;
|
||||
border-bottom-right-radius: 15px 5px;
|
||||
color: $primary;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 5px solid $primary-light;
|
||||
}
|
||||
|
||||
ul.inline li a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
ul.inline li::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
ul {
|
||||
@include resp(medium) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6, {
|
||||
margin: 0;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
|
||||
margin: 0;
|
||||
max-height: 960px;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapsible:nth-of-type(1),
|
||||
.collapsible .collapsible-body {
|
||||
border: 0;
|
||||
|
||||
@include resp(null, $small-screen + 1px) {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
div.collapsible-body {
|
||||
padding: none;
|
||||
}
|
||||
|
||||
.collapsible label {
|
||||
border-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapsible > button {
|
||||
background-color: $main-background;
|
||||
display: none;
|
||||
font-size: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
padding: 0.25rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,94 +2,94 @@
|
|||
[popover-top],
|
||||
[popover-right],
|
||||
[popover-bottom],
|
||||
[popover-left]{
|
||||
position: relative;
|
||||
[popover-left] {
|
||||
margin: 24px;
|
||||
position: relative;
|
||||
|
||||
// Popover hover trigger
|
||||
&:hover {
|
||||
&:after {
|
||||
transition: opacity .2s ease-out;
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Creating popover::after element
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
&::after {
|
||||
@include border-style();
|
||||
@include transition(opacity);
|
||||
background: $light-dark;
|
||||
border: 2px solid $primary;
|
||||
color: $white;
|
||||
font-size: 0.7em;
|
||||
left: 50%;
|
||||
min-width: 80px;
|
||||
opacity: 0;
|
||||
padding: 4px 2px;
|
||||
min-width: 80px;
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
background: $light-dark;
|
||||
@include transition(opacity);
|
||||
top: -6px;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover positioning: left, right, top, bottom
|
||||
[popover-left] {
|
||||
&:before {
|
||||
&::before {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: attr(popover-left);
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-left: -8px;
|
||||
top: 50%;
|
||||
transform: translateX(-100%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover-right] {
|
||||
&:before {
|
||||
&::before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-left: 1px;
|
||||
top: 50%;
|
||||
transform: translatey(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: attr(popover-right);
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-left: 8px;
|
||||
top: 50%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover-top] {
|
||||
&:before {
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: attr(popover-top);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
[popover-bottom] {
|
||||
&:before {
|
||||
top:100%;
|
||||
&::before {
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: attr(popover-bottom);
|
||||
top: 100%;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,24 +8,24 @@
|
|||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
color: $primary;
|
||||
border-bottom: solid 3px $secondary;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
@for $num from 1 through 5 {
|
||||
&[id="tab#{$num}"]:checked~div[id="content#{$num}"] {
|
||||
&[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;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $muted;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
$base: 1rem;
|
||||
$large: 2rem;
|
||||
$small: .5rem;
|
||||
$small: 0.5rem;
|
||||
|
||||
.margin {
|
||||
margin: $base;
|
||||
|
||||
&-top {
|
||||
margin-top: $base;
|
||||
|
||||
&-large {
|
||||
margin-top: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-top: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -20,12 +23,15 @@ $small: .5rem;
|
|||
|
||||
&-right {
|
||||
margin-right: $base;
|
||||
|
||||
&-large {
|
||||
margin-right: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -33,12 +39,15 @@ $small: .5rem;
|
|||
|
||||
&-bottom {
|
||||
margin-bottom: $base;
|
||||
|
||||
&-large {
|
||||
margin-bottom: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-bottom: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -46,12 +55,15 @@ $small: .5rem;
|
|||
|
||||
&-left {
|
||||
margin-left: $base;
|
||||
|
||||
&-large {
|
||||
margin-left: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-left: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -60,9 +72,11 @@ $small: .5rem;
|
|||
&-large {
|
||||
margin: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -73,12 +87,15 @@ $small: .5rem;
|
|||
|
||||
&-top {
|
||||
padding-top: $base;
|
||||
|
||||
&-large {
|
||||
padding-top: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-top: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -86,12 +103,15 @@ $small: .5rem;
|
|||
|
||||
&-right {
|
||||
padding-right: $base;
|
||||
|
||||
&-large {
|
||||
padding-right: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-right: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
@ -99,12 +119,15 @@ $small: .5rem;
|
|||
|
||||
&-bottom {
|
||||
padding-bottom: $base;
|
||||
|
||||
&-large {
|
||||
padding-bottom: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-bottom: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -112,12 +135,15 @@ $small: .5rem;
|
|||
|
||||
&-left {
|
||||
padding-left: $base;
|
||||
|
||||
&-large {
|
||||
padding-left: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-left: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,39 @@
|
|||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: $secondary;
|
||||
background-color: lighten($primary, 70%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
color: $secondary;
|
||||
font-size: 80%;
|
||||
color: $white;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: $primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: $white;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: lighten($primary, 73%);
|
||||
border: 1px solid lighten($primary, 50%);
|
||||
border-radius: 3px;
|
||||
color: $primary;
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
white-space: pre;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
white-space:pre;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,67 @@
|
|||
html {
|
||||
font-size: $global-font-size;
|
||||
font-family: $body-font, sans-serif;
|
||||
color: $font-color;
|
||||
font-family: $body-font, sans-serif;
|
||||
font-size: $global-font-size;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
|
||||
|
||||
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 {
|
||||
|
||||
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;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border: 2px solid $primary;
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0rem;
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
&.float-right {
|
||||
float: right;
|
||||
margin: 1rem 0rem 1rem 1rem;
|
||||
margin: 1rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&.no-responsive {
|
||||
max-width: initial;
|
||||
height: initial;
|
||||
display: initial;
|
||||
height: initial;
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -15,28 +19,35 @@ ol {
|
|||
}
|
||||
|
||||
ul {
|
||||
@include li-bullet('-');
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
text-indent: -7px;
|
||||
&:before {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
left: -7px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@include li-bullet("-");
|
||||
|
||||
ul {
|
||||
@include li-bullet("+");
|
||||
@include li-bullet('+');
|
||||
|
||||
ul {
|
||||
@include li-bullet("~");
|
||||
@include li-bullet('~');
|
||||
|
||||
ul {
|
||||
@include li-bullet("⤍");
|
||||
@include li-bullet('⤍');
|
||||
|
||||
ul {
|
||||
@include li-bullet("⁎");
|
||||
@include li-bullet('⁎');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inline li {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
|
|
|
|||
|
|
@ -1,32 +1,33 @@
|
|||
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%);
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
@include resp(xsmall) {
|
||||
thead tr th {
|
||||
padding: 2%;
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
padding: 2%;
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
border-top: 1px dashed lighten($primary, 60%);
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
// Set theme colors
|
||||
$primary: #41403E !default;
|
||||
$secondary: #0071DE !default;
|
||||
$primary: #41403e !default;
|
||||
$secondary: #0071de !default;
|
||||
|
||||
$success: #86a361 !default;
|
||||
$warning: #ddcd45 !default;
|
||||
|
|
@ -21,29 +21,32 @@ $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;
|
||||
$white-dark: rgba(#000, 0.03) !default;
|
||||
$light-dark: rgba(#000, 0.7) !default;
|
||||
$white: rgba(#fff, 1) !default;
|
||||
$main-background: rgba(#fff, 1) !default;
|
||||
|
||||
$primary-text: #FFF !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;
|
||||
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
||||
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
||||
|
||||
|
||||
// Map to set your color names
|
||||
/* stylelint-disable */
|
||||
$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);
|
||||
/* stylelint-enable */
|
||||
|
||||
/**
|
||||
This Loop will generate the various .text- and .background- classes
|
||||
based on the $colors map above.
|
||||
|
|
@ -52,6 +55,7 @@ $colors: (primary, $primary, $primary-light, $primary-text),
|
|||
.text-#{$colorName} {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.background-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
|
@ -84,40 +88,40 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
*/
|
||||
@mixin border-style($style: 1) {
|
||||
@if $style==1 {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
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-bottom-left-radius: 185px 25px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
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;
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 255px 15px;
|
||||
}
|
||||
@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;
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 25px 150px;
|
||||
}
|
||||
@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;
|
||||
border-top-left-radius: 250px 15px;
|
||||
border-top-right-radius: 25px 80px;
|
||||
}
|
||||
@if $style==6 {
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-top-left-radius: 28px 125px;
|
||||
border-top-right-radius: 100px 30px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,26 +131,27 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
@default null
|
||||
*/
|
||||
@mixin resp($max:null, $min:null) {
|
||||
@if $max == large or $max == lg { $max: $large-screen; }
|
||||
@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";}
|
||||
|
||||
@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%);
|
||||
content: '~~~';
|
||||
display: block;
|
||||
content: "~~~";
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@mixin center-all() {
|
||||
|
|
@ -165,7 +170,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
}
|
||||
|
||||
@mixin li-bullet($char) {
|
||||
li:before {
|
||||
li::before {
|
||||
content: $char;
|
||||
}
|
||||
}
|
||||
|
|
@ -194,7 +199,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
@param string
|
||||
@default all | 235ms | ease-in-out | 0
|
||||
*/
|
||||
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay:0s){
|
||||
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
|
||||
-webkit-transition: $name $duration $animation $delay;
|
||||
-moz-transition: $name $duration $animation $delay;
|
||||
-o-transition: $name $duration $animation $delay;
|
||||
|
|
@ -208,8 +213,8 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
*/
|
||||
@mixin shadow($type: regular) {
|
||||
@if $type == hover {
|
||||
box-shadow: $shadow-hover;
|
||||
@include translate(0, 2px, 0, true);
|
||||
box-shadow: $shadow-hover;
|
||||
} @else if $type == small {
|
||||
@include transition($animation: ease);
|
||||
box-shadow: $shadow-small;
|
||||
|
|
@ -220,6 +225,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
@include transition($animation: ease);
|
||||
box-shadow: $shadow-large;
|
||||
} @else {
|
||||
@error "wrong $type. available types: small | regular | large | hover"
|
||||
@error 'wrong $type. available types: small | regular | large | hover';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* stylelint-disable */
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
|
|
@ -197,3 +199,4 @@ html {
|
|||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
@include resp(medium) {
|
||||
width: 85%;
|
||||
width: 85%;
|
||||
}
|
||||
@include resp(xsmall) {
|
||||
width: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include hr-after;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,25 +24,25 @@
|
|||
hr {
|
||||
border: 0;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include hr-after;
|
||||
top: -.75rem;
|
||||
top: -0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.paper {
|
||||
border: 1px solid $primary-light;
|
||||
background-color: $main-background;
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid $primary-light;
|
||||
-moz-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
||||
-webkit-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
||||
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
||||
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);
|
||||
margin-top: 1rem;
|
||||
padding: 2rem;
|
||||
@include resp(xs) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,79 @@
|
|||
$numberOfColumns: 12;
|
||||
$number-columns: 12;
|
||||
|
||||
@mixin create-flex-classes($colName, $breakpoint: 0px) {
|
||||
@mixin create-flex-classes($colName, $breakpoint: 0) {
|
||||
@include resp($min: $breakpoint) {
|
||||
@for $i from 1 through $numberOfColumns {
|
||||
@for $i from 1 through $number-columns {
|
||||
.#{$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;
|
||||
-webkit-flex: 0 0 $i * 100% / $number-columns;
|
||||
-ms-flex: 0 0 $i * 100% / $number-columns;
|
||||
flex: 0 0 $i * 100% / $number-columns;
|
||||
max-width: $i * 100% / $number-columns;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
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;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&.flex-right {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.flex-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.flex-edges {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.flex-spaces {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&.flex-top {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
}
|
||||
|
||||
&.flex-middle {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
}
|
||||
|
||||
&.flex-bottom {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,8 +86,8 @@ $numberOfColumns: 12;
|
|||
}
|
||||
|
||||
.col-fill {
|
||||
flex: 1 1 0;
|
||||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
@include create-flex-classes(col);
|
||||
|
|
@ -92,28 +98,28 @@ $numberOfColumns: 12;
|
|||
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
-webkit-align-self: center;
|
||||
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;
|
||||
-ms-flex-item-align: end;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
@include resp(md) {
|
||||
width: 85%;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
@import 'components/popovers';
|
||||
@import 'components/tabs';
|
||||
@import 'components/utilities';
|
||||
@import 'components/navbar';
|
||||
|
||||
// @media print {
|
||||
// @import 'layout/print';
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
&.shadow-small {
|
||||
@include shadow(small);
|
||||
}
|
||||
|
||||
&.shadow-hover {
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
|
|
|
|||
Loading…
Reference in a new issue