104 changed files with 1 additions and 14782 deletions
@ -1,7 +1,3 @@ |
|||
.DS_Store |
|||
/node_modules/ |
|||
/src/node_modules/@sapper/ |
|||
yarn-error.log |
|||
/cypress/screenshots/ |
|||
/__sapper__/ |
|||
node_modules |
|||
.*.sw* |
|||
|
|||
@ -1,113 +0,0 @@ |
|||
const { ButtonMachine } = require('../../src/node_modules/buttons'); |
|||
|
|||
const run_code = (expecting, code, debug=false) => { |
|||
let machine = new ButtonMachine(code); |
|||
|
|||
machine.run(debug); |
|||
|
|||
expect(machine.stack_top).toBe(expecting); |
|||
|
|||
return machine; |
|||
} |
|||
|
|||
it('Can do addition', () => { |
|||
run_code(3, [ |
|||
['PUSH', 1], |
|||
['PUSH', 2], |
|||
['ADD'], |
|||
]) |
|||
}); |
|||
|
|||
it('Can do subtraction', () => { |
|||
run_code(1, [ |
|||
['PUSH', 2], |
|||
['PUSH', 1], |
|||
['SUB'], |
|||
]) |
|||
}) |
|||
|
|||
it('Can do multiplication', () => { |
|||
run_code(20, [ |
|||
['PUSH', 10], |
|||
['PUSH', 2], |
|||
['MUL'], |
|||
]) |
|||
}) |
|||
|
|||
it('Can do division', () => { |
|||
run_code(5, [ |
|||
['PUSH', 10], |
|||
['PUSH', 2], |
|||
['DIV'], |
|||
]) |
|||
}) |
|||
|
|||
it('Can do modulus', () => { |
|||
run_code(0, [ |
|||
['PUSH', 10], |
|||
['PUSH', 2], |
|||
['MOD'], |
|||
]) |
|||
}) |
|||
|
|||
it('Can loop until the end of clicks', () => { |
|||
run_code(43, [ |
|||
['PUSH', 1], |
|||
['PUSH', 1], |
|||
['ADD'], |
|||
['JUMP', 1] |
|||
]); |
|||
}); |
|||
|
|||
|
|||
it('Can do zero test for jump', () => { |
|||
run_code(0, [ |
|||
['PUSH', 20], // start at 20
|
|||
['PUSH', 1], // decrement by 1
|
|||
['SUB'], |
|||
['JZ', 5], // if we're at 0 jumps to the end
|
|||
['JUMP', 1] // the previous test fails so it jumps to loop again
|
|||
]); |
|||
}); |
|||
|
|||
|
|||
it('Can do NOT zero test for jump', () => { |
|||
run_code(-19, [ |
|||
['PUSH', -20], // start at 20
|
|||
['PUSH', 1], // decrement by 1
|
|||
['ADD'], |
|||
['JNZ', 5], // if we're at 0 jumps to the end
|
|||
['JUMP', 1] // the previous test fails so it jumps to loop again
|
|||
]); |
|||
}); |
|||
|
|||
it('Can store and restor', () => { |
|||
run_code(150, [ |
|||
['PUSH', 100], // start with 100
|
|||
['STOR', 'AX'], // put it in the regA register
|
|||
['PUSH', 50], // push 50 on too
|
|||
['ADD'], // add those for 150
|
|||
['RSTOR', 'AX'],// recover the original 100
|
|||
['SUB'] // sub and should be 150
|
|||
]); |
|||
}); |
|||
|
|||
it('Halts on bad registers', () => { |
|||
run_code(0, [ |
|||
['PUSH', 0], |
|||
['STOR', 'AX'], |
|||
['RSTOR', 'BAD NAME'], // should cause a halt here
|
|||
['PUSH', 100], |
|||
['ADD'] |
|||
]); |
|||
}); |
|||
|
|||
it('Can halt on purpose', () => { |
|||
let machine = run_code(0, [ |
|||
['PUSH', 0], |
|||
['HALT', 'Done on purpose.'] |
|||
]); |
|||
|
|||
expect(machine.halted).toBe(true); |
|||
expect(machine.error).toBe('Done on purpose.'); |
|||
}); |
|||
@ -1,4 +0,0 @@ |
|||
{ |
|||
"baseUrl": "http://localhost:3000", |
|||
"video": false |
|||
} |
|||
@ -1,5 +0,0 @@ |
|||
{ |
|||
"name": "Using fixtures to represent data", |
|||
"email": "hello@cypress.io", |
|||
"body": "Fixtures are a great way to mock data for responses to routes" |
|||
} |
|||
@ -1,19 +0,0 @@ |
|||
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'); |
|||
}); |
|||
}); |
|||
@ -1,17 +0,0 @@ |
|||
// ***********************************************************
|
|||
// 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
|
|||
} |
|||
@ -1,25 +0,0 @@ |
|||
// ***********************************************
|
|||
// 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) => { ... })
|
|||
@ -1,20 +0,0 @@ |
|||
// ***********************************************************
|
|||
// 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')
|
|||
@ -1,20 +0,0 @@ |
|||
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' |
|||
} |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
|
|||
@ -1,35 +0,0 @@ |
|||
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 |
|||
}; |
|||
|
|||
File diff suppressed because it is too large
@ -1,45 +0,0 @@ |
|||
{ |
|||
"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": { |
|||
"@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", |
|||
"npm-run-all": "^4.1.5", |
|||
"rollup": "^2.3.4", |
|||
"rollup-plugin-svelte": "^6.0.0", |
|||
"rollup-plugin-terser": "^7.0.0", |
|||
"sapper": "^0.28.0", |
|||
"svelte": "^3.17.3" |
|||
} |
|||
} |
|||
@ -1,111 +0,0 @@ |
|||
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, |
|||
} |
|||
}; |
|||
@ -1,38 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
// 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); |
|||
} |
|||
} |
|||
@ -1,47 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,77 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
@ -1,60 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,71 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,40 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,198 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,222 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,43 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,136 +0,0 @@ |
|||
// 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%); |
|||
} |
|||
} |
|||
@ -1,33 +0,0 @@ |
|||
// 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); |
|||
} |
|||
} |
|||
@ -1,31 +0,0 @@ |
|||
// 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%; |
|||
} |
|||
} |
|||
@ -1,115 +0,0 @@ |
|||
// 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; |
|||
} |
|||
} |
|||
|
|||
.comparison-after { |
|||
max-width: 100%; |
|||
min-width: 0; |
|||
z-index: 2; |
|||
|
|||
&::before { |
|||
background: transparent; |
|||
content: ""; |
|||
cursor: default; |
|||
height: 100%; |
|||
left: 0; |
|||
position: absolute; |
|||
right: $unit-4; |
|||
top: 0; |
|||
z-index: $zindex-0; |
|||
} |
|||
|
|||
&::after { |
|||
background: currentColor; |
|||
border-radius: 50%; |
|||
box-shadow: 0 -5px, 0 5px; |
|||
color: $light-color; |
|||
content: ""; |
|||
height: 3px; |
|||
position: absolute; |
|||
right: $unit-2; |
|||
top: 50%; |
|||
transform: translate(50%, -50%); |
|||
width: 3px; |
|||
} |
|||
|
|||
.comparison-label { |
|||
left: $unit-4; |
|||
} |
|||
} |
|||
|
|||
.comparison-resizer { |
|||
animation: first-run 1.5s 1 ease-in-out; |
|||
cursor: ew-resize; |
|||