Browse Source

Initial start of Buttons Computer on its own project.

master
Zed A. Shaw 1 year ago
parent
commit
90fc90ade9
  1. 104
      .gitignore
  2. 112
      README.md
  3. 4
      cypress.json
  4. 5
      cypress/fixtures/example.json
  5. 19
      cypress/integration/spec.js
  6. 17
      cypress/plugins/index.js
  7. 25
      cypress/support/commands.js
  8. 20
      cypress/support/index.js
  9. 20
      ecosystem.config.js
  10. 35
      gulpfile.js
  11. 7448
      package-lock.json
  12. 45
      package.json
  13. 111
      rollup.config.js
  14. 38
      sass/_accordions.scss
  15. 20
      sass/_animations.scss
  16. 47
      sass/_autocomplete.scss
  17. 77
      sass/_avatars.scss
  18. 60
      sass/_badges.scss
  19. 71
      sass/_bars.scss
  20. 40
      sass/_base.scss
  21. 29
      sass/_breadcrumbs.scss
  22. 198
      sass/_buttons.scss
  23. 222
      sass/_calendars.scss
  24. 43
      sass/_cards.scss
  25. 136
      sass/_carousels.scss
  26. 33
      sass/_chips.scss
  27. 31
      sass/_codes.scss
  28. 115
      sass/_comparison-sliders.scss
  29. 36
      sass/_dropdowns.scss
  30. 21
      sass/_empty.scss
  31. 37
      sass/_filters.scss
  32. 557
      sass/_forms.scss
  33. 22
      sass/_hero.scss
  34. 5
      sass/_icons.scss
  35. 34
      sass/_labels.scss
  36. 509
      sass/_layout.scss
  37. 75
      sass/_media.scss
  38. 66
      sass/_menus.scss
  39. 57
      sass/_meters.scss
  40. 10
      sass/_mixins.scss
  41. 87
      sass/_modals.scss
  42. 33
      sass/_navbar.scss
  43. 49
      sass/_navs.scss
  44. 446
      sass/_normalize.scss
  45. 104
      sass/_off-canvas.scss
  46. 60
      sass/_pagination.scss
  47. 23
      sass/_panels.scss
  48. 135
      sass/_parallax.scss
  49. 65
      sass/_popovers.scss
  50. 45
      sass/_progress.scss
  51. 99
      sass/_sliders.scss
  52. 71
      sass/_steps.scss
  53. 57
      sass/_tables.scss
  54. 66
      sass/_tabs.scss
  55. 38
      sass/_tiles.scss
  56. 56
      sass/_timelines.scss
  57. 47
      sass/_toasts.scss
  58. 79
      sass/_tooltips.scss
  59. 165
      sass/_typography.scss
  60. 8
      sass/_utilities.scss
  61. 126
      sass/_variables.scss
  62. 34
      sass/_viewer-360.scss
  63. 315
      sass/icons/_icons-action.scss
  64. 54
      sass/icons/_icons-core.scss
  65. 127
      sass/icons/_icons-navigation.scss
  66. 161
      sass/icons/_icons-object.scss
  67. 6
      sass/mixins/_avatar.scss
  68. 54
      sass/mixins/_button.scss
  69. 8
      sass/mixins/_clearfix.scss
  70. 27
      sass/mixins/_color.scss
  71. 11
      sass/mixins/_label.scss
  72. 65
      sass/mixins/_position.scss
  73. 9
      sass/mixins/_shadow.scss
  74. 6
      sass/mixins/_text.scss
  75. 5
      sass/mixins/_toast.scss
  76. 206
      sass/pattern.scss
  77. 18
      sass/spectre-exp.scss
  78. 10
      sass/spectre-icons.scss
  79. 48
      sass/spectre.scss
  80. 37
      sass/utilities/_colors.scss
  81. 30
      sass/utilities/_cursors.scss
  82. 44
      sass/utilities/_display.scss
  83. 50
      sass/utilities/_divider.scss
  84. 34
      sass/utilities/_loading.scss
  85. 54
      sass/utilities/_position.scss
  86. 8
      sass/utilities/_shapes.scss
  87. 64
      sass/utilities/_text.scss
  88. 5
      src/client.js
  89. 40
      src/components/Icon.svelte
  90. 185
      src/node_modules/buttons.js
  91. 40
      src/routes/_error.svelte
  92. 9
      src/routes/_layout.svelte
  93. 180
      src/routes/index.svelte
  94. 17
      src/server.js
  95. 82
      src/service-worker.js
  96. 38
      src/template.html
  97. 1
      static/css/pattern.min.css
  98. 1
      static/css/spectre-exp.min.css
  99. 1
      static/css/spectre-icons.min.css
  100. 1
      static/css/spectre.min.css

104
.gitignore

@ -1,97 +1,7 @@
# ---> Node
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# FuseBox cache
.fusebox/
# ---> Vim
# Swap
[._]*.s[a-v][a-z]
[._]*.sw[a-p]
[._]s[a-rt-v][a-z]
[._]ss[a-gi-z]
[._]sw[a-p]
# Session
Session.vim
# Temporary
.netrwhist
*~
# Auto-generated tag files
tags
# Persistent undo
[._]*.un~
.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/cypress/screenshots/
/__sapper__/
.*.sw*

112
README.md

@ -1,3 +1,111 @@
# buttons-computer
# sapper-template
The code for the little button clicks only programming language.
The default [Sapper](https://github.com/sveltejs/sapper) template, available for Rollup and webpack.
## Getting started
### Using `degit`
[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the `rollup` or `webpack` branch in `sapper-template`:
```bash
# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
```
### Using GitHub templates
Alternatively, you can use GitHub's template feature with the [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) repositories.
### Running the project
However you get the code, you can install dependencies and run the project in development mode with:
```bash
cd my-app
npm install # or yarn
npm run dev
```
Open up [localhost:3000](http://localhost:3000) and start clicking around.
Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started.
## Structure
Sapper expects to find two directories in the root of your project — `src` and `static`.
### src
The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
#### src/routes
This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
There are three simple rules for naming the files that define your routes:
* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
* The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
### static
The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
In your [service-worker.js](src/service-worker.js) file, you can import these as `files` from the generated manifest...
```js
import { files } from '@sapper/service-worker';
```
...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
## Bundler config
Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
## Production mode and deployment
To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:
```bash
npm install -g vercel
vercel
```
If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).
## Using external components
When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
```bash
npm install -D @sveltejs/svelte-virtual-list
```
## Bugs and feedback
Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).

4
cypress.json

@ -0,0 +1,4 @@
{
"baseUrl": "http://localhost:3000",
"video": false
}

5
cypress/fixtures/example.json

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

19
cypress/integration/spec.js

@ -0,0 +1,19 @@
describe('Sapper template app', () => {
beforeEach(() => {
cy.visit('/')
});
it('has the correct <h1>', () => {
cy.contains('h1', 'Great success!')
});
it('navigates to /about', () => {
cy.get('nav a').contains('about').click();
cy.url().should('include', '/about');
});
it('navigates to /blog', () => {
cy.get('nav a').contains('blog').click();
cy.url().should('include', '/blog');
});
});

17
cypress/plugins/index.js

@ -0,0 +1,17 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}

25
cypress/support/commands.js

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

20
cypress/support/index.js

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

20
ecosystem.config.js

@ -0,0 +1,20 @@
module.exports = {
apps : [
{
name: 'gulp',
script: 'gulp',
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: '1G',
env: {
NODE_ENV: 'development'
},
env_production: {
NODE_ENV: 'production'
}
},
],
};

35
gulpfile.js

@ -0,0 +1,35 @@
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleancss = require('gulp-clean-css');
const csscomb = require('gulp-csscomb');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
let paths = {
source: './sass/*.scss',
};
const styles = () => {
return gulp.src(paths.source)
.pipe(sass({outputStyle: 'compact', precision: 10})
.on('error', sass.logError)
)
.pipe(autoprefixer())
.pipe(csscomb())
.pipe(cleancss())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./static/css/'));
};
const auto = () => {
return gulp.watch(['./**/*.scss'], styles);
}
module.exports = {
styles,
default: auto
};

7448
package-lock.json

File diff suppressed because it is too large

45
package.json

@ -0,0 +1,45 @@
{
"name": "TODO",
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --legacy",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"compression": "^1.7.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-csscomb": "^3.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"pm2": "^4.4.1",
"polka": "next",
"randomcolor": "^0.6.2",
"sirv": "^1.0.0",
"svelte-preprocess": "^4.1.2"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"sapper": "^0.28.0",
"svelte": "^3.17.3",
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-replace": "^2.2.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.0"
}
}

111
rollup.config.js

@ -0,0 +1,111 @@
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import sveltePreprocess from 'svelte-preprocess';
const preprocopts = {};
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) =>
(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning);
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true,
preprocess: sveltePreprocess(preprocopts)
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
babelHelpers: 'runtime',
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
preserveEntrySignatures: false,
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
hydratable: true,
dev,
preprocess: sveltePreprocess(preprocopts)
}),
resolve({
dedupe: ['svelte']
}),
commonjs()
],
external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
preserveEntrySignatures: 'strict',
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
],
preserveEntrySignatures: false,
onwarn,
}
};

38
sass/_accordions.scss

@ -0,0 +1,38 @@
// Accordions
.accordion {
input:checked ~,
&[open] {
& .accordion-header {
.icon {
transform: rotate(90deg);
}
}
& .accordion-body {
max-height: 50rem;
}
}
.accordion-header {
display: block;
padding: $unit-1 $unit-2;
.icon {
transition: transform .25s;
}
}
.accordion-body {
margin-bottom: $layout-spacing;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
}
// Remove default details marker in Webkit
summary.accordion-header {
&::-webkit-details-marker {
display: none;
}
}

20
sass/_animations.scss

@ -0,0 +1,20 @@
// Animations
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-$unit-8);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

47
sass/_autocomplete.scss

@ -0,0 +1,47 @@
// Autocomplete
.form-autocomplete {
position: relative;
.form-autocomplete-input {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
height: auto;
min-height: $unit-8;
padding: $unit-h;
&.is-focused {
@include control-shadow();
border-color: $primary-color;
}
.form-input {
border-color: transparent;
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
width: auto;
}
}
.menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
&.autocomplete-oneline {
.form-autocomplete-input {
flex-wrap: nowrap;
overflow-x: auto;
}
.chip {
flex: 1 0 auto;
}
}
}

77
sass/_avatars.scss

@ -0,0 +1,77 @@
// Avatars
.avatar {
@include avatar-base();
background: $primary-color;
border-radius: 50%;
color: rgba($light-color, .85);
display: inline-block;
font-weight: 300;
line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;
&.avatar-xs {
@include avatar-base($unit-4);
}
&.avatar-sm {
@include avatar-base($unit-6);
}
&.avatar-lg {
@include avatar-base($unit-12);
}
&.avatar-xl {
@include avatar-base($unit-16);
}
img {
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
z-index: $zindex-0;
}
.avatar-icon,
.avatar-presence {
background: $bg-color-light;
bottom: 14.64%;
height: 50%;
padding: $border-width-lg;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
z-index: $zindex-0 + 1;
}
.avatar-presence {
background: $gray-color;
box-shadow: 0 0 0 $border-width-lg $light-color;
border-radius: 50%;
height: .5em;
width: .5em;
&.online {
background: $success-color;
}
&.busy {
background: $error-color;
}
&.away {
background: $warning-color;
}
}
&[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: $zindex-0;
}
}

60
sass/_badges.scss

@ -0,0 +1,60 @@
// Badges
.badge {
position: relative;
white-space: nowrap;
&[data-badge],
&:not([data-badge]) {
&::after {
background: $primary-color;
background-clip: padding-box;
border-radius: .5rem;
box-shadow: 0 0 0 .1rem $bg-color-light;
color: $light-color;
content: attr(data-badge);
display: inline-block;
transform: translate(-.05rem, -.5rem);
}
}
&[data-badge] {
&::after {
font-size: $font-size-sm;
height: .9rem;
line-height: 1;
min-width: .9rem;
padding: .1rem .2rem;
text-align: center;
white-space: nowrap;
}
}
&:not([data-badge]),
&[data-badge=""] {
&::after {
height: 6px;
min-width: 6px;
padding: 0;
width: 6px;
}
}
// Badges for Buttons
&.btn {
&::after {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
// Badges for Avatars
&.avatar {
&::after {
position: absolute;
top: 14.64%;
right: 14.64%;
transform: translate(50%, -50%);
z-index: $zindex-1;
}
}
}

71
sass/_bars.scss

@ -0,0 +1,71 @@
// Bars
.bar {
background: $bg-color-dark;
border-radius: $border-radius;
display: flex;
flex-wrap: nowrap;
height: $unit-4;
width: 100%;
&.bar-sm {
height: $unit-1;
}
// TODO: attr() support
.bar-item {
background: $primary-color;
color: $light-color;
display: block;
font-size: $font-size-sm;
flex-shrink: 0;
line-height: $unit-4;
height: 100%;
position: relative;
text-align: center;
width: 0;
&:first-child {
border-bottom-left-radius: $border-radius;
border-top-left-radius: $border-radius;
}
&:last-child {
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
flex-shrink: 1;
}
}
}
// Slider bar
.bar-slider {
height: $border-width-lg;
margin: $layout-spacing 0;
position: relative;
.bar-item {
left: 0;
padding: 0;
position: absolute;
&:not(:last-child):first-child {
background: $bg-color-dark;
z-index: $zindex-0;
}
}
.bar-slider-btn {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
padding: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: $unit-3;
&:active {
box-shadow: 0 0 0 .1rem $primary-color;
}
}
}

40
sass/_base.scss

@ -0,0 +1,40 @@
// Base
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: $html-font-size;
line-height: $html-line-height;
-webkit-tap-highlight-color: transparent;
}
body {
background: $body-bg;
color: $body-font-color;
font-family: $body-font-family;
font-size: $font-size;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
a {
color: $link-color;
outline: none;
text-decoration: underline;
&:focus {
@include control-shadow();
}
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
text-decoration: underline;
}
}

29
sass/_breadcrumbs.scss

@ -0,0 +1,29 @@
// Breadcrumbs
.breadcrumb {
list-style: none;
margin: $unit-1 0;
padding: $unit-1 0;
.breadcrumb-item {
color: $gray-color-dark;
display: inline-block;
margin: 0;
padding: $unit-1 0;
&:not(:last-child) {
margin-right: $unit-1;
a {
color: $gray-color-dark;
}
}
&:not(:first-child) {
&::before {
color: $gray-color-dark;
content: "/";
padding-right: $unit-2;
}
}
}
}

198
sass/_buttons.scss

@ -0,0 +1,198 @@
// Buttons
.btn {
appearance: none;
background: $bg-color-light;
border: $border-width solid $primary-color;
border-radius: $border-radius;
color: $primary-color;
cursor: pointer;
display: inline-block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color;
border-color: $primary-color-dark;
color: $light-color;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
text-decoration: none;
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
&[disabled],
&:disabled,
&.disabled {
cursor: default;
opacity: .5;
pointer-events: none;
}
// Button Primary
&.btn-primary {
background: $primary-color;
border-color: $primary-color-dark;
color: $light-color;
&:focus,
&:hover {
background: darken($primary-color-dark, 2%);
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
&:active,
&.active {
background: darken($primary-color-dark, 4%);
border-color: darken($primary-color-dark, 7%);
color: $light-color;
}
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
// Button Colors
&.btn-success {
@include button-variant($success-color);
}
&.btn-warning {
@include button-variant($warning-color);
}
&.btn-error {
@include button-variant($error-color);
}
// Button Link
&.btn-link {
background: transparent;
border-color: transparent;
color: $link-color;
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
}
}
// Button Sizes
&.btn-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.btn-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
// Button Block
&.btn-block {
display: block;
width: 100%;
}
// Button Action
&.btn-action {
width: $control-size;
padding-left: 0;
padding-right: 0;
&.btn-sm {
width: $control-size-sm;
}
&.btn-lg {
width: $control-size-lg;
}
}
// Button Clear
&.btn-clear {
background: transparent;
border: 0;
color: currentColor;
height: $unit-5;
line-height: $unit-4;
margin-left: $unit-1;
margin-right: -2px;
opacity: 1;
padding: $unit-h;
text-decoration: none;
width: $unit-5;
&:focus,
&:hover {
background: rgba($bg-color, .5);
opacity: .95;
}
&::before {
content: "\2715";
}
}
}
// Button groups
.btn-group {
display: inline-flex;
flex-wrap: wrap;
.btn {
flex: 1 0 auto;
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -$border-width;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -$border-width;
}
&:focus,
&:hover,
&:active,
&.active {
z-index: $zindex-0;
}
}
&.btn-group-block {
display: flex;
.btn {
flex: 1 0 0;
}
}
}

222
sass/_calendars.scss

@ -0,0 +1,222 @@
// Calendars
.calendar {
border: $border-width solid $border-color;
border-radius: $border-radius;
display: block;
min-width: 280px;
.calendar-nav {
align-items: center;
background: $bg-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
display: flex;
font-size: $font-size-lg;
padding: $layout-spacing;
}
.calendar-header,
.calendar-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: $layout-spacing 0;
.calendar-date {
flex: 0 0 14.28%; // 7 calendar-items each row
max-width: 14.28%;
}
}
.calendar-header {
background: $bg-color;
border-bottom: $border-width solid $border-color;
color: $gray-color;
font-size: $font-size-sm;
text-align: center;
}
.calendar-body {
color: $gray-color-dark;
}
.calendar-date {
border: 0;
padding: $unit-1;
.date-item {
appearance: none;
background: transparent;
border: $border-width solid transparent;
border-radius: 50%;
color: $gray-color-dark;
cursor: pointer;
font-size: $font-size-sm;
height: $unit-7;
line-height: $unit-5;
outline: none;
padding: $unit-h;
position: relative;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
vertical-align: middle;
white-space: nowrap;
width: $unit-7;
&.date-today {
border-color: $secondary-color-dark;
color: $primary-color;
}
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color-light;
border-color: $secondary-color-dark;
color: $primary-color;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
// Calendar badge support
&.badge {
&::after {
position: absolute;
top: 3px;
right: 3px;
transform: translate(50%, -50%);
}
}
}
.date-item,
.calendar-event {
&:disabled,
&.disabled {
cursor: default;
opacity: .25;
pointer-events: none;
}
}
&.prev-month,
&.next-month {
.date-item,
.calendar-event {
opacity: .25;
}
}
}
.calendar-range {
position: relative;
&::before {
background: $secondary-color;
content: "";
height: $unit-7;
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&.range-start {
&::before {
left: 50%;
}
}
&.range-end {
&::before {
right: 50%;
}
}
&.range-start,
&.range-end {
.date-item {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
}
.date-item {
color: $primary-color;
}
}
// Calendars size
&.calendar-lg {
.calendar-body {
padding: 0;
.calendar-date {
border-bottom: $border-width solid $border-color;
border-right: $border-width solid $border-color;
display: flex;
flex-direction: column;
height: 5.5rem;
padding: 0;
&:nth-child(7n) {
border-right: 0;
}
&:nth-last-child(-n+7) {
border-bottom: 0;
}
}
}
.date-item {
align-self: flex-end;
height: $unit-7;
margin-right: $layout-spacing-sm;
margin-top: $layout-spacing-sm;
}
.calendar-range {
&::before {
top: 19px;
}
&.range-start {
&::before {
left: auto;
width: 19px;
}
}
&.range-end {
&::before {
right: 19px;
}
}
}
.calendar-events {
flex-grow: 1;
line-height: 1;
overflow-y: auto;
padding: $layout-spacing-sm;
}
.calendar-event {
border-radius: $border-radius;
font-size: $font-size-sm;
display: block;
margin: $unit-h auto;
overflow: hidden;
padding: 3px 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

43
sass/_cards.scss

@ -0,0 +1,43 @@
// Cards
.card {
background: $bg-color-light;
border: $border-width solid $border-color;
border-radius: $border-radius;
display: flex;
flex-direction: column;
.card-header,
.card-body,
.card-footer {
padding: $layout-spacing-lg;
padding-bottom: 0;
&:last-child {
padding-bottom: $layout-spacing-lg;
}
}
.card-body {
flex: 1 1 auto;
}
.card-image {
padding-top: $layout-spacing-lg;
&:first-child {
padding-top: 0;
img {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
&:last-child {
img {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
}
}

136
sass/_carousels.scss

@ -0,0 +1,136 @@
// Carousels
// The number of carousel images
$carousel-number: 8;
%carousel-image-checked {
animation: carousel-slidein .75s ease-in-out 1;
opacity: 1;
z-index: $zindex-1;
}
%carousel-nav-checked {
color: $gray-color-light;
}
.carousel {
background: $bg-color;
display: block;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
z-index: $zindex-0;
.carousel-container {
height: 100%;
left: 0;
position: relative;
&::before {
content: "";
display: block;
padding-bottom: 56.25%;
}
.carousel-item {
animation: carousel-slideout 1s ease-in-out 1;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
&:hover {
.item-prev,
.item-next {
opacity: 1;
}
}
}
.item-prev,
.item-next {
background: rgba($gray-color-light, .25);
border-color: rgba($gray-color-light, .5);
color: $gray-color-light;
opacity: 0;
position: absolute;
top: 50%;
transition: all .4s;
transform: translateY(-50%);
z-index: $zindex-1;
}
.item-prev {
left: 1rem;
}
.item-next {
right: 1rem;
}
}
.carousel-locator {
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
@extend %carousel-image-checked;
}
}
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
@extend %carousel-nav-checked;
}
}
}
.carousel-nav {
bottom: $layout-spacing;
display: flex;
justify-content: center;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 10rem;
z-index: $zindex-1;
.nav-item {
color: rgba($gray-color-light, .5);
display: block;
flex: 1 0 auto;
height: $unit-8;
margin: $unit-1;
max-width: 2.5rem;
position: relative;
&::before {
background: currentColor;
content: "";
display: block;
height: $unit-h;
position: absolute;
top: .5rem;
width: 100%;
}
}
}
}
@keyframes carousel-slidein {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes carousel-slideout {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-50%);
}
}

33
sass/_chips.scss

@ -0,0 +1,33 @@
// Chips
.chip {
align-items: center;
background: $bg-color-dark;
border-radius: 5rem;
display: inline-flex;
font-size: 90%;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
max-width: $control-width-sm;
overflow: hidden;
padding: $unit-1 $unit-2;
text-decoration: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
&.active {
background: $primary-color;
color: $light-color;
}
.avatar {
margin-left: -$unit-2;
margin-right: $unit-1;
}
.btn-clear {
border-radius: 50%;
transform: scale(.75);
}
}

31
sass/_codes.scss

@ -0,0 +1,31 @@
// Codes
code {
@include label-base();
@include label-variant($code-color, $black);
font-size: 85%;
}
pre {
border-radius: $border-radius;
color: $white;
position: relative;
background-color: $black;
&::before {
color: $gray-color;
content: attr(data-lang);
font-size: $font-size-sm;
position: absolute;
right: $layout-spacing;
top: $unit-h;
}
code {
color: inherit;
display: block;
line-height: 1.5;
overflow-x: auto;
padding: 1rem;
width: 100%;
}
}

115
sass/_comparison-sliders.scss

@ -0,0 +1,115 @@
// Image comparison slider
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
.comparison-slider {
height: 50vh;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
.comparison-before,
.comparison-after {
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
img {
height: 100%;
object-fit: cover;
object-position: left center;
position: absolute;
width: 100%;
}
}
.comparison-before {
width: 100%;
z-index: 1;
.comparison-label {
right: $unit-4;
}
}