parent
182d9143ad
commit
17cbaa7455
@ -1,7 +1,3 @@ |
|||||||
.DS_Store |
.DS_Store |
||||||
/node_modules/ |
node_modules |
||||||
/src/node_modules/@sapper/ |
|
||||||
yarn-error.log |
|
||||||
/cypress/screenshots/ |
|
||||||
/__sapper__/ |
|
||||||
.*.sw* |
.*.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
Load Diff
@ -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; |
|
||||||
height: $unit-4; |
|
||||||
left: 0; |
|
||||||
max-width: 100%; |
|
||||||
min-width: $unit-4; |
|
||||||
opacity: 0; |
|
||||||
outline: none; |
|
||||||
position: relative; |
|
||||||
resize: horizontal; |
|
||||||
top: 50%; |
|
||||||
transform: translateY(-50%) scaleY(30); |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.comparison-label { |
|
||||||
background: rgba($dark-color, .5); |
|
||||||
bottom: $unit-4; |
|
||||||
color: $light-color; |
|
||||||
padding: $unit-1 $unit-2; |
|
||||||
position: absolute; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes first-run { |
|
||||||
0% { |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
25% { |
|
||||||
width: $unit-12; |
|
||||||
} |
|
||||||
50% { |
|
||||||
width: $unit-4; |
|
||||||
} |
|
||||||
75% { |
|
||||||
width: $unit-6; |
|
||||||
} |
|
||||||
100% { |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,36 +0,0 @@ |
|||||||
// Dropdown |
|
||||||
.dropdown { |
|
||||||
display: inline-block; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.menu { |
|
||||||
animation: slide-down .15s ease 1; |
|
||||||
display: none; |
|
||||||
left: 0; |
|
||||||
max-height: 50vh; |
|
||||||
overflow-y: auto; |
|
||||||
position: absolute; |
|
||||||
top: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
&.dropdown-right { |
|
||||||
.menu { |
|
||||||
left: auto; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.active .menu, |
|
||||||
.dropdown-toggle:focus + .menu, |
|
||||||
.menu:hover { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
// Fix dropdown-toggle border radius in button groups |
|
||||||
.btn-group { |
|
||||||
.dropdown-toggle:nth-last-child(2) { |
|
||||||
border-bottom-right-radius: $border-radius; |
|
||||||
border-top-right-radius: $border-radius; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,21 +0,0 @@ |
|||||||
// Empty states (or Blank slates) |
|
||||||
.empty { |
|
||||||
background: $bg-color; |
|
||||||
border-radius: $border-radius; |
|
||||||
color: $gray-color-dark; |
|
||||||
text-align: center; |
|
||||||
padding: $unit-16 $unit-8; |
|
||||||
|
|
||||||
.empty-icon { |
|
||||||
margin-bottom: $layout-spacing-lg; |
|
||||||
} |
|
||||||
|
|
||||||
.empty-title, |
|
||||||
.empty-subtitle { |
|
||||||
margin: $layout-spacing auto; |
|
||||||
} |
|
||||||
|
|
||||||
.empty-action { |
|
||||||
margin-top: $layout-spacing-lg; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
// Filters |
|
||||||
// The number of filter options |
|
||||||
$filter-number: 8 !default; |
|
||||||
|
|
||||||
%filter-checked-nav { |
|
||||||
background: $primary-color; |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
|
|
||||||
%filter-checked-body { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.filter { |
|
||||||
.filter-nav { |
|
||||||
margin: $layout-spacing 0; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-body { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-tag { |
|
||||||
@for $i from 0 through ($filter-number) { |
|
||||||
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] { |
|
||||||
@extend %filter-checked-nav; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@for $i from 1 through ($filter-number) { |
|
||||||
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) { |
|
||||||
@extend %filter-checked-body; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,557 +0,0 @@ |
|||||||
// Forms |
|
||||||
.form-group { |
|
||||||
&:not(:last-child) { |
|
||||||
margin-bottom: $layout-spacing; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
fieldset { |
|
||||||
margin-bottom: $layout-spacing-lg; |
|
||||||
} |
|
||||||
|
|
||||||
legend { |
|
||||||
font-size: $font-size-lg; |
|
||||||
font-weight: 500; |
|
||||||
margin-bottom: $layout-spacing-lg; |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Label |
|
||||||
.form-label { |
|
||||||
display: block; |
|
||||||
line-height: $line-height; |
|
||||||
padding: $control-padding-y + $border-width 0; |
|
||||||
margin-top: $layout-spacing-sm; |
|
||||||
|
|
||||||
&.label-sm { |
|
||||||
font-size: $font-size-sm; |
|
||||||
padding: $control-padding-y-sm + $border-width 0; |
|
||||||
} |
|
||||||
|
|
||||||
&.label-lg { |
|
||||||
font-size: $font-size-lg; |
|
||||||
padding: $control-padding-y-lg + $border-width 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Input |
|
||||||
.form-input { |
|
||||||
appearance: none; |
|
||||||
background: $bg-color-light; |
|
||||||
background-image: none; |
|
||||||
border: $border-width solid $border-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
color: $body-font-color; |
|
||||||
display: block; |
|
||||||
font-size: $font-size; |
|
||||||
height: $control-size; |
|
||||||
line-height: $line-height; |
|
||||||
max-width: 100%; |
|
||||||
outline: none; |
|
||||||
padding: $control-padding-y $control-padding-x; |
|
||||||
position: relative; |
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s; |
|
||||||
width: 100%; |
|
||||||
&:focus { |
|
||||||
@include control-shadow(); |
|
||||||
border-color: $primary-color; |
|
||||||
} |
|
||||||
&::placeholder { |
|
||||||
color: $gray-color; |
|
||||||
} |
|
||||||
|
|
||||||
// Input sizes |
|
||||||
&.input-sm { |
|
||||||
font-size: $font-size-sm; |
|
||||||
height: $control-size-sm; |
|
||||||
padding: $control-padding-y-sm $control-padding-x-sm; |
|
||||||
} |
|
||||||
|
|
||||||
&.input-lg { |
|
||||||
font-size: $font-size-lg; |
|
||||||
height: $control-size-lg; |
|
||||||
padding: $control-padding-y-lg $control-padding-x-lg; |
|
||||||
} |
|
||||||
|
|
||||||
&.input-inline { |
|
||||||
display: inline-block; |
|
||||||
vertical-align: middle; |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
|
|
||||||
// Input types |
|
||||||
&[type="file"] { |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Textarea |
|
||||||
textarea.form-input { |
|
||||||
&, |
|
||||||
&.input-lg, |
|
||||||
&.input-sm { |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Input hint |
|
||||||
.form-input-hint { |
|
||||||
color: $gray-color; |
|
||||||
font-size: $font-size-sm; |
|
||||||
margin-top: $unit-1; |
|
||||||
|
|
||||||
.has-success &, |
|
||||||
.is-success + & { |
|
||||||
color: $success-color; |
|
||||||
} |
|
||||||
|
|
||||||
.has-error &, |
|
||||||
.is-error + & { |
|
||||||
color: $error-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Select |
|
||||||
.form-select { |
|
||||||
appearance: none; |
|
||||||
border: $border-width solid $border-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
color: inherit; |
|
||||||
font-size: $font-size; |
|
||||||
height: $control-size; |
|
||||||
line-height: $line-height; |
|
||||||
outline: none; |
|
||||||
padding: $control-padding-y $control-padding-x; |
|
||||||
vertical-align: middle; |
|
||||||
width: 100%; |
|
||||||
background: $bg-color-light; |
|
||||||
&:focus { |
|
||||||
@include control-shadow(); |
|
||||||
border-color: $primary-color; |
|
||||||
} |
|
||||||
&::-ms-expand { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
// Select sizes |
|
||||||
&.select-sm { |
|
||||||
font-size: $font-size-sm; |
|
||||||
height: $control-size-sm; |
|
||||||
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm; |
|
||||||
} |
|
||||||
|
|
||||||
&.select-lg { |
|
||||||
font-size: $font-size-lg; |
|
||||||
height: $control-size-lg; |
|
||||||
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg; |
|
||||||
} |
|
||||||
|
|
||||||
// Multiple select |
|
||||||
&[size], |
|
||||||
&[multiple] { |
|
||||||
height: auto; |
|
||||||
padding: $control-padding-y $control-padding-x; |
|
||||||
|
|
||||||
option { |
|
||||||
padding: $unit-h $unit-1; |
|
||||||
} |
|
||||||
} |
|
||||||
&:not([multiple]):not([size]) { |
|
||||||
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem; |
|
||||||
padding-right: $control-icon-size + $control-padding-x; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form Icons |
|
||||||
.has-icon-left, |
|
||||||
.has-icon-right { |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.form-icon { |
|
||||||
height: $control-icon-size; |
|
||||||
margin: 0 $control-padding-y; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
transform: translateY(-50%); |
|
||||||
width: $control-icon-size; |
|
||||||
z-index: $zindex-0 + 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.has-icon-left { |
|
||||||
.form-icon { |
|
||||||
left: $border-width; |
|
||||||
} |
|
||||||
|
|
||||||
.form-input { |
|
||||||
padding-left: $control-icon-size + $control-padding-y * 2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.has-icon-right { |
|
||||||
.form-icon { |
|
||||||
right: $border-width; |
|
||||||
} |
|
||||||
|
|
||||||
.form-input { |
|
||||||
padding-right: $control-icon-size + $control-padding-y * 2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Checkbox and Radio |
|
||||||
.form-checkbox, |
|
||||||
.form-radio, |
|
||||||
.form-switch { |
|
||||||
display: block; |
|
||||||
line-height: $line-height; |
|
||||||
margin: ($control-size - $control-size-sm) 0; |
|
||||||
min-height: $control-size-sm; |
|
||||||
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x); |
|
||||||
position: relative; |
|
||||||
|
|
||||||
input { |
|
||||||
clip: rect(0, 0, 0, 0); |
|
||||||
height: 1px; |
|
||||||
margin: -1px; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
width: 1px; |
|
||||||
&:focus + .form-icon { |
|
||||||
@include control-shadow(); |
|
||||||
border-color: $primary-color; |
|
||||||
} |
|
||||||
&:checked + .form-icon { |
|
||||||
background: $primary-color; |
|
||||||
border-color: $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-icon { |
|
||||||
border: $border-width solid $border-color-dark; |
|
||||||
cursor: pointer; |
|
||||||
display: inline-block; |
|
||||||
position: absolute; |
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s; |
|
||||||
} |
|
||||||
|
|
||||||
// Input checkbox, radio and switch sizes |
|
||||||
&.input-sm { |
|
||||||
font-size: $font-size-sm; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&.input-lg { |
|
||||||
font-size: $font-size-lg; |
|
||||||
margin: ($control-size-lg - $control-size-sm) / 2 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-checkbox, |
|
||||||
.form-radio { |
|
||||||
.form-icon { |
|
||||||
background: $bg-color-light; |
|
||||||
height: $control-icon-size; |
|
||||||
left: 0; |
|
||||||
top: ($control-size-sm - $control-icon-size) / 2; |
|
||||||
width: $control-icon-size; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:active + .form-icon { |
|
||||||
background: $bg-color-dark; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.form-checkbox { |
|
||||||
.form-icon { |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:checked + .form-icon { |
|
||||||
&::before { |
|
||||||
background-clip: padding-box; |
|
||||||
border: $border-width solid $light-color; |
|
||||||
border-left-width: 0; |
|
||||||
border-top-width: 0; |
|
||||||
content: ""; |
|
||||||
height: 9px; |
|
||||||
left: 50%; |
|
||||||
margin-left: -3px; |
|
||||||
margin-top: -6px; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
transform: rotate(45deg); |
|
||||||
width: 6px; |
|
||||||
} |
|
||||||
} |
|
||||||
&:indeterminate + .form-icon { |
|
||||||
background: $primary-color; |
|
||||||
border-color: $primary-color; |
|
||||||
&::before { |
|
||||||
background: $bg-color-light; |
|
||||||
content: ""; |
|
||||||
height: 2px; |
|
||||||
left: 50%; |
|
||||||
margin-left: -5px; |
|
||||||
margin-top: -1px; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
width: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.form-radio { |
|
||||||
.form-icon { |
|
||||||
border-radius: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:checked + .form-icon { |
|
||||||
&::before { |
|
||||||
background: $bg-color-light; |
|
||||||
border-radius: 50%; |
|
||||||
content: ""; |
|
||||||
height: 6px; |
|
||||||
left: 50%; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
width: 6px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Switch |
|
||||||
.form-switch { |
|
||||||
padding-left: ($unit-8 + $control-padding-x); |
|
||||||
|
|
||||||
.form-icon { |
|
||||||
background: $gray-color; |
|
||||||
background-clip: padding-box; |
|
||||||
border-radius: $unit-2 + $border-width; |
|
||||||
height: $unit-4 + $border-width * 2; |
|
||||||
left: 0; |
|
||||||
top: ($control-size-sm - $unit-4) / 2 - $border-width; |
|
||||||
width: $unit-8; |
|
||||||
&::before { |
|
||||||
background: $bg-color-light; |
|
||||||
border-radius: 50%; |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
height: $unit-4; |
|
||||||
left: 0; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s; |
|
||||||
width: $unit-4; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:checked + .form-icon { |
|
||||||
&::before { |
|
||||||
left: 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
&:active + .form-icon { |
|
||||||
&::before { |
|
||||||
background: $bg-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form element: Input groups |
|
||||||
.input-group { |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.input-group-addon { |
|
||||||
background: $bg-color; |
|
||||||
border: $border-width solid $border-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
line-height: $line-height; |
|
||||||
padding: $control-padding-y $control-padding-x; |
|
||||||
white-space: nowrap; |
|
||||||
|
|
||||||
&.addon-sm { |
|
||||||
font-size: $font-size-sm; |
|
||||||
padding: $control-padding-y-sm $control-padding-x-sm; |
|
||||||
} |
|
||||||
|
|
||||||
&.addon-lg { |
|
||||||
font-size: $font-size-lg; |
|
||||||
padding: $control-padding-y-lg $control-padding-x-lg; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-input, |
|
||||||
.form-select { |
|
||||||
flex: 1 1 auto; |
|
||||||
width: 1%; |
|
||||||
} |
|
||||||
|
|
||||||
.input-group-btn { |
|
||||||
z-index: $zindex-0; |
|
||||||
} |
|
||||||
|
|
||||||
.form-input, |
|
||||||
.form-select, |
|
||||||
.input-group-addon, |
|
||||||
.input-group-btn { |
|
||||||
&: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 { |
|
||||||
z-index: $zindex-0 + 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-select { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
|
|
||||||
&.input-inline { |
|
||||||
display: inline-flex; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form validation states |
|
||||||
.form-input, |
|
||||||
.form-select { |
|
||||||
.has-success &, |
|
||||||
&.is-success { |
|
||||||
background: lighten($success-color, 53%); |
|
||||||
border-color: $success-color; |
|
||||||
&:focus { |
|
||||||
@include control-shadow($success-color); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.has-error &, |
|
||||||
&.is-error { |
|
||||||
background: lighten($error-color, 53%); |
|
||||||
border-color: $error-color; |
|
||||||
&:focus { |
|
||||||
@include control-shadow($error-color); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-checkbox, |
|
||||||
.form-radio, |
|
||||||
.form-switch { |
|
||||||
.has-error &, |
|
||||||
&.is-error { |
|
||||||
.form-icon { |
|
||||||
border-color: $error-color; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:checked + .form-icon { |
|
||||||
background: $error-color; |
|
||||||
border-color: $error-color; |
|
||||||
} |
|
||||||
|
|
||||||
&:focus + .form-icon { |
|
||||||
@include control-shadow($error-color); |
|
||||||
border-color: $error-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-checkbox { |
|
||||||
.has-error &, |
|
||||||
&.is-error { |
|
||||||
input { |
|
||||||
&:indeterminate + .form-icon { |
|
||||||
background: $error-color; |
|
||||||
border-color: $error-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// validation based on :placeholder-shown (Edge doesn't support it yet) |
|
||||||
.form-input { |
|
||||||
&:not(:placeholder-shown) { |
|
||||||
&:invalid { |
|
||||||
border-color: $error-color; |
|
||||||
&:focus { |
|
||||||
@include control-shadow($error-color); |
|
||||||
background: lighten($error-color, 53%); |
|
||||||
} |
|
||||||
|
|
||||||
& + .form-input-hint { |
|
||||||
color: $error-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form disabled and readonly |
|
||||||
.form-input, |
|
||||||
.form-select { |
|
||||||
&:disabled, |
|
||||||
&.disabled { |
|
||||||
background-color: $bg-color-dark; |
|
||||||
cursor: not-allowed; |
|
||||||
opacity: .5; |
|
||||||
color: $black !important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-input { |
|
||||||
&[readonly] { |
|
||||||
background-color: $bg-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
&:disabled, |
|
||||||
&.disabled { |
|
||||||
& + .form-icon { |
|
||||||
background: $bg-color-dark; |
|
||||||
cursor: not-allowed; |
|
||||||
opacity: .5; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-switch { |
|
||||||
input { |
|
||||||
&:disabled, |
|
||||||
&.disabled { |
|
||||||
& + .form-icon::before { |
|
||||||
background: $bg-color-light; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form horizontal |
|
||||||
.form-horizontal { |
|
||||||
padding: $layout-spacing 0; |
|
||||||
|
|
||||||
.form-group { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Form inline |
|
||||||
.form-inline { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
// Hero |
|
||||||
.hero { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
padding-bottom: 4rem; |
|
||||||
padding-top: 4rem; |
|
||||||
|
|
||||||
&.hero-sm { |
|
||||||
padding-bottom: 2rem; |
|
||||||
padding-top: 2rem; |
|
||||||
} |
|
||||||
|
|
||||||
&.hero-lg { |
|
||||||
padding-bottom: 6rem; |
|
||||||
padding-top: 6rem; |
|
||||||
} |
|
||||||
|
|
||||||
.hero-body { |
|
||||||
padding: $layout-spacing; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
// CSS Icons |
|
||||||
@import "icons/icons-core"; |
|
||||||
@import "icons/icons-navigation"; |
|
||||||
@import "icons/icons-action"; |
|
||||||
@import "icons/icons-object"; |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
// Labels |
|
||||||
.label { |
|
||||||
@include label-base(); |
|
||||||
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark); |
|
||||||
display: inline-block; |
|
||||||
|
|
||||||
// Label rounded |
|
||||||
&.label-rounded { |
|
||||||
border-radius: 5rem; |
|
||||||
padding-left: .4rem; |
|
||||||
padding-right: .4rem; |
|
||||||
} |
|
||||||
|
|
||||||
// Label colors |
|
||||||
&.label-primary { |
|
||||||
@include label-variant($light-color, $primary-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.label-secondary { |
|
||||||
@include label-variant($primary-color, $secondary-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.label-success { |
|
||||||
@include label-variant($light-color, $success-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.label-warning { |
|
||||||
@include label-variant($light-color, $warning-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.label-error { |
|
||||||
@include label-variant($light-color, $error-color); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,509 +0,0 @@ |
|||||||
// Layout |
|
||||||
.container { |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
padding-left: $layout-spacing; |
|
||||||
padding-right: $layout-spacing; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size; |
|
||||||
|
|
||||||
&.grid-xl { |
|
||||||
max-width: $grid-spacing * 2 + $size-2x; |
|
||||||
} |
|
||||||
|
|
||||||
&.grid-lg { |
|
||||||
max-width: $grid-spacing * 2 + $size-lg; |
|
||||||
} |
|
||||||
|
|
||||||
&.grid-md { |
|
||||||
max-width: $grid-spacing * 2 + $size-md; |
|
||||||
} |
|
||||||
|
|
||||||
&.grid-sm { |
|
||||||
max-width: $grid-spacing * 2 + $size-sm; |
|
||||||
} |
|
||||||
|
|
||||||
&.grid-xs { |
|
||||||
max-width: $grid-spacing * 2 + $size-xs; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Responsive breakpoint system |
|
||||||
.show-xs, |
|
||||||
.show-sm, |
|
||||||
.show-md, |
|
||||||
.show-lg, |
|
||||||
.show-xl { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
|
|
||||||
// Responsive grid system |
|
||||||
.columns { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
margin-left: -$layout-spacing; |
|
||||||
margin-right: -$layout-spacing; |
|
||||||
|
|
||||||
&.col-gapless { |
|
||||||
margin-left: 0; |
|
||||||
margin-right: 0; |
|
||||||
|
|
||||||
& > .column { |
|
||||||
padding-left: 0; |
|
||||||
padding-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
&.col-oneline { |
|
||||||
flex-wrap: nowrap; |
|
||||||
overflow-x: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
.column { |
|
||||||
flex: 1; |
|
||||||
max-width: 100%; |
|
||||||
padding-left: $layout-spacing; |
|
||||||
padding-right: $layout-spacing; |
|
||||||
|
|
||||||
&.col-12, |
|
||||||
&.col-11, |
|
||||||
&.col-10, |
|
||||||
&.col-9, |
|
||||||
&.col-8, |
|
||||||
&.col-7, |
|
||||||
&.col-6, |
|
||||||
&.col-5, |
|
||||||
&.col-4, |
|
||||||
&.col-3, |
|
||||||
&.col-2, |
|
||||||
&.col-1, |
|
||||||
&.col-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
} |
|
||||||
.col-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-auto { |
|
||||||
flex: 0 0 auto; |
|
||||||
max-width: none; |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.col-mx-auto { |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
.col-ml-auto { |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
.col-mr-auto { |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
@media (max-width: $size-xl) { |
|
||||||
.col-xl-12, |
|
||||||
.col-xl-11, |
|
||||||
.col-xl-10, |
|
||||||
.col-xl-9, |
|
||||||
.col-xl-8, |
|
||||||
.col-xl-7, |
|
||||||
.col-xl-6, |
|
||||||
.col-xl-5, |
|
||||||
.col-xl-4, |
|
||||||
.col-xl-3, |
|
||||||
.col-xl-2, |
|
||||||
.col-xl-1, |
|
||||||
.col-xl-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.col-xl-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-xl-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-xl-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-xl-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-xl-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-xl-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-xl-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-xl-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-xl-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-xl-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-xl-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-xl-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-xl-auto { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.hide-xl { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.show-xl { |
|
||||||
display: block !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@media (max-width: $size-lg) { |
|
||||||
.col-lg-12, |
|
||||||
.col-lg-11, |
|
||||||
.col-lg-10, |
|
||||||
.col-lg-9, |
|
||||||
.col-lg-8, |
|
||||||
.col-lg-7, |
|
||||||
.col-lg-6, |
|
||||||
.col-lg-5, |
|
||||||
.col-lg-4, |
|
||||||
.col-lg-3, |
|
||||||
.col-lg-2, |
|
||||||
.col-lg-1, |
|
||||||
.col-lg-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.col-lg-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-lg-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-lg-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-lg-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-lg-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-lg-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-lg-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-lg-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-lg-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-lg-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-lg-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-lg-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-lg-auto { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.hide-lg { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.show-lg { |
|
||||||
display: block !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@media (max-width: $size-md) { |
|
||||||
.col-md-12, |
|
||||||
.col-md-11, |
|
||||||
.col-md-10, |
|
||||||
.col-md-9, |
|
||||||
.col-md-8, |
|
||||||
.col-md-7, |
|
||||||
.col-md-6, |
|
||||||
.col-md-5, |
|
||||||
.col-md-4, |
|
||||||
.col-md-3, |
|
||||||
.col-md-2, |
|
||||||
.col-md-1, |
|
||||||
.col-md-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.col-md-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-md-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-md-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-md-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-md-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-md-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-md-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-md-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-md-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-md-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-md-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-md-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-md-auto { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.hide-md { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.show-md { |
|
||||||
display: block !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@media (max-width: $size-sm) { |
|
||||||
.col-sm-12, |
|
||||||
.col-sm-11, |
|
||||||
.col-sm-10, |
|
||||||
.col-sm-9, |
|
||||||
.col-sm-8, |
|
||||||
.col-sm-7, |
|
||||||
.col-sm-6, |
|
||||||
.col-sm-5, |
|
||||||
.col-sm-4, |
|
||||||
.col-sm-3, |
|
||||||
.col-sm-2, |
|
||||||
.col-sm-1, |
|
||||||
.col-sm-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.col-sm-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-sm-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-sm-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-sm-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-sm-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-sm-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-sm-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-sm-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-sm-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-sm-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-sm-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-sm-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-sm-auto { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.hide-sm { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.show-sm { |
|
||||||
display: block !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@media (max-width: $size-xs) { |
|
||||||
.col-xs-12, |
|
||||||
.col-xs-11, |
|
||||||
.col-xs-10, |
|
||||||
.col-xs-9, |
|
||||||
.col-xs-8, |
|
||||||
.col-xs-7, |
|
||||||
.col-xs-6, |
|
||||||
.col-xs-5, |
|
||||||
.col-xs-4, |
|
||||||
.col-xs-3, |
|
||||||
.col-xs-2, |
|
||||||
.col-xs-1, |
|
||||||
.col-xs-auto { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.col-xs-12 { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.col-xs-11 { |
|
||||||
width: 91.66666667%; |
|
||||||
} |
|
||||||
.col-xs-10 { |
|
||||||
width: 83.33333333%; |
|
||||||
} |
|
||||||
.col-xs-9 { |
|
||||||
width: 75%; |
|
||||||
} |
|
||||||
.col-xs-8 { |
|
||||||
width: 66.66666667%; |
|
||||||
} |
|
||||||
.col-xs-7 { |
|
||||||
width: 58.33333333%; |
|
||||||
} |
|
||||||
.col-xs-6 { |
|
||||||
width: 50%; |
|
||||||
} |
|
||||||
.col-xs-5 { |
|
||||||
width: 41.66666667%; |
|
||||||
} |
|
||||||
.col-xs-4 { |
|
||||||
width: 33.33333333%; |
|
||||||
} |
|
||||||
.col-xs-3 { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.col-xs-2 { |
|
||||||
width: 16.66666667%; |
|
||||||
} |
|
||||||
.col-xs-1 { |
|
||||||
width: 8.33333333%; |
|
||||||
} |
|
||||||
.col-xs-auto { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.hide-xs { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.show-xs { |
|
||||||
display: block !important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.container #content { |
|
||||||
} |
|
||||||
|
|
||||||
.full-width { |
|
||||||
padding-right: 0rem !important; |
|
||||||
padding-left: 0rem !important; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.full-width-gray { |
|
||||||
padding-right: 0rem !important; |
|
||||||
padding-left: 0rem !important; |
|
||||||
background-color: $gray-color-light !important; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.grid { |
|
||||||
display: grid; |
|
||||||
grid-gap: $border-width-lg; |
|
||||||
grid-template-columns: repeat(auto-fit, minmax($control-width-sm, 1fr)); |
|
||||||
grid-auto-rows: $control-width-sm; |
|
||||||
grid-auto-flow: dense; |
|
||||||
|
|
||||||
&-tall { |
|
||||||
grid-row: span 2; |
|
||||||
} |
|
||||||
|
|
||||||
&-tall-3 { |
|
||||||
grid-row: span 3; |
|
||||||
} |
|
||||||
|
|
||||||
&-tall-4 { |
|
||||||
grid-row: span 4; |
|
||||||
} |
|
||||||
|
|
||||||
&-square { |
|
||||||
grid-row: span 1; |
|
||||||
grid-column: span 1; |
|
||||||
} |
|
||||||
|
|
||||||
&-square-2 { |
|
||||||
grid-row: span 2; |
|
||||||
grid-column: span 2; |
|
||||||
} |
|
||||||
|
|
||||||
&-square-3 { |
|
||||||
grid-row: span 3; |
|
||||||
grid-column: span 3; |
|
||||||
} |
|
||||||
|
|
||||||
&-wide { |
|
||||||
grid-column: span 2; |
|
||||||
} |
|
||||||
|
|
||||||
&-wide-3 { |
|
||||||
grid-column: span 3; |
|
||||||
} |
|
||||||
|
|
||||||
&-wide-4 { |
|
||||||
grid-column: span 4; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@ -1,75 +0,0 @@ |
|||||||
// Media |
|
||||||
// Image responsive |
|
||||||
.img-responsive { |
|
||||||
display: block; |
|
||||||
height: auto; |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
// object-fit support is coming to Microsoft Edge |
|
||||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/ |
|
||||||
.img-fit-cover { |
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
|
|
||||||
.img-fit-contain { |
|
||||||
object-fit: contain; |
|
||||||
} |
|
||||||
|
|
||||||
// Video responsive |
|
||||||
.video-responsive { |
|
||||||
display: block; |
|
||||||
overflow: hidden; |
|
||||||
padding: 0; |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
&::before { |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16 |
|
||||||
} |
|
||||||
|
|
||||||
iframe, |
|
||||||
object, |
|
||||||
embed { |
|
||||||
border: 0; |
|
||||||
bottom: 0; |
|
||||||
height: 100%; |
|
||||||
left: 0; |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
video.video-responsive { |
|
||||||
height: auto; |
|
||||||
max-width: 100%; |
|
||||||
|
|
||||||
&::before { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.video-responsive-4-3 { |
|
||||||
&::before { |
|
||||||
padding-bottom: 75%; // Ratio 4:3 |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.video-responsive-1-1 { |
|
||||||
&::before { |
|
||||||
padding-bottom: 100%; // Ratio 1:1 |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Figure |
|
||||||
.figure { |
|
||||||
margin: 0 0 $layout-spacing 0; |
|
||||||
|
|
||||||
.figure-caption { |
|
||||||
color: $gray-color-dark; |
|
||||||
margin-top: $layout-spacing; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
// Menus |
|
||||||
.menu { |
|
||||||
@include shadow-variant(.05rem); |
|
||||||
background: $bg-color-light; |
|
||||||
border-radius: $border-radius; |
|
||||||
list-style: none; |
|
||||||
margin: 0; |
|
||||||
min-width: $control-width-xs; |
|
||||||
padding: $unit-2; |
|
||||||
transform: translateY($layout-spacing-sm); |
|
||||||
z-index: $zindex-3; |
|
||||||
|
|
||||||
&.menu-nav { |
|
||||||
background: transparent; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
.menu-item { |
|
||||||
margin-top: 0; |
|
||||||
padding: 0 $unit-2; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
& > a { |
|
||||||
text-decoration: none; |
|
||||||
border-radius: $border-radius; |
|
||||||
color: inherit; |
|
||||||
display: block; |
|
||||||
margin: 0 (-$unit-2); |
|
||||||
padding: $unit-o $unit-o; |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
background: $gray-color-light; |
|
||||||
color: $primary-color; |
|
||||||
} |
|
||||||
&:active, |
|
||||||
&.active { |
|
||||||
background: $gray-color; |
|
||||||
color: $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-checkbox, |
|
||||||
.form-radio, |
|
||||||
.form-switch { |
|
||||||
margin: $unit-h 0; |
|
||||||
} |
|
||||||
|
|
||||||
& + .menu-item { |
|
||||||
margin-top: $unit-1; |
|
||||||
font-size: .9rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.menu-badge { |
|
||||||
align-items: center; |
|
||||||
display: flex; |
|
||||||
height: 100%; |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
|
|
||||||
.label { |
|
||||||
margin-right: $unit-2; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
// Meters |
|
||||||
// Credit: https://css-tricks.com/html5-meter-element/ |
|
||||||
.meter { |
|
||||||
appearance: none; |
|
||||||
background: $bg-color; |
|
||||||
border: 0; |
|
||||||
border-radius: $border-radius; |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: $unit-4; |
|
||||||
|
|
||||||
&::-webkit-meter-inner-element { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-meter-bar, |
|
||||||
&::-webkit-meter-optimum-value, |
|
||||||
&::-webkit-meter-suboptimum-value, |
|
||||||
&::-webkit-meter-even-less-good-value { |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-meter-bar { |
|
||||||
background: $bg-color; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-meter-optimum-value { |
|
||||||
background: $success-color; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-meter-suboptimum-value { |
|
||||||
background: $warning-color; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-meter-even-less-good-value { |
|
||||||
background: $error-color; |
|
||||||
} |
|
||||||
|
|
||||||
&::-moz-meter-bar, |
|
||||||
&:-moz-meter-optimum, |
|
||||||
&:-moz-meter-sub-optimum, |
|
||||||
&:-moz-meter-sub-sub-optimum { |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
&:-moz-meter-optimum::-moz-meter-bar { |
|
||||||
background: $success-color; |
|
||||||
} |
|
||||||
|
|
||||||
&:-moz-meter-sub-optimum::-moz-meter-bar { |
|
||||||
background: $warning-color; |
|
||||||
} |
|
||||||
|
|
||||||
&:-moz-meter-sub-sub-optimum::-moz-meter-bar { |
|
||||||
background: $error-color; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// Mixins |
|
||||||
@import "mixins/avatar"; |
|
||||||
@import "mixins/button"; |
|
||||||
@import "mixins/clearfix"; |
|
||||||
@import "mixins/color"; |
|
||||||
@import "mixins/label"; |
|
||||||
@import "mixins/position"; |
|
||||||
@import "mixins/shadow"; |
|
||||||
@import "mixins/text"; |
|
||||||
@import "mixins/toast"; |
|
||||||
@ -1,87 +0,0 @@ |
|||||||
// Modals |
|
||||||
.modal { |
|
||||||
align-items: center; |
|
||||||
display: none; |
|
||||||
justify-content: center; |
|
||||||
opacity: 0; |
|
||||||
overflow: hidden; |
|
||||||
padding: $layout-spacing; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
top: -30vh; |
|
||||||
|
|
||||||
&:target, |
|
||||||
&.active { |
|
||||||
display: flex; |
|
||||||
opacity: 1; |
|
||||||
z-index: $zindex-4; |
|
||||||
|
|
||||||
.modal-overlay { |
|
||||||
background: rgba($bg-color, .75); |
|
||||||
bottom: 0; |
|
||||||
cursor: default; |
|
||||||
display: block; |
|
||||||
left: 0; |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-container { |
|
||||||
animation: slide-down .2s ease 1; |
|
||||||
z-index: $zindex-0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.modal-sm { |
|
||||||
.modal-container { |
|
||||||
max-width: $control-width-sm; |
|
||||||
padding: 0 $unit-2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.modal-lg { |
|
||||||
.modal-overlay { |
|
||||||
background: $bg-color-light; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-container { |
|
||||||
box-shadow: none; |
|
||||||
max-width: $control-width-lg; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.modal-container { |
|
||||||
@include shadow-variant(.2rem); |
|
||||||
background: $bg-color-light; |
|
||||||
border-radius: $border-radius; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
max-height: 75vh; |
|
||||||
max-width: $control-width-md; |
|
||||||
padding: 0 $unit-4; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
&.modal-fullheight { |
|
||||||
max-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-header { |
|
||||||
color: $dark-color; |
|
||||||
padding: $unit-4; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-body { |
|
||||||
overflow-y: auto; |
|
||||||
padding: $unit-4; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-footer { |
|
||||||
padding: $unit-4; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,33 +0,0 @@ |
|||||||
// Navbar |
|
||||||
.navbar { |
|
||||||
align-items: stretch; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
padding-left: $unit-3; |
|
||||||
padding-right: $unit-3; |
|
||||||
justify-content: space-between; |
|
||||||
border-bottom: 2px solid $secondary-color-light; |
|
||||||
|
|
||||||
.navbar-section { |
|
||||||
align-items: center; |
|
||||||
display: flex; |
|
||||||
flex: 1 0 0; |
|
||||||
|
|
||||||
&:not(:first-child):last-child { |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.navbar-center { |
|
||||||
align-items: center; |
|
||||||
display: flex; |
|
||||||
flex: 0 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.navbar-brand { |
|
||||||
position: relative; |
|
||||||
top: 15%; |
|
||||||
font-size: $font-size-lg; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
// Navs |
|
||||||
.nav { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
list-style: none; |
|
||||||
margin: $unit-1 0; |
|
||||||
background-color: inherit; |
|
||||||
font-family: $mono-font-family; |
|
||||||
|
|
||||||
.divider { |
|
||||||
margin: 1px; |
|
||||||
} |
|
||||||
|
|
||||||
.h4 { |
|
||||||
font-family: $mono-font-family; |
|
||||||
} |
|
||||||
|
|
||||||
.nav-item { |
|
||||||
a { |
|
||||||
color: $primary-color; |
|
||||||
padding: $unit-1 $unit-2; |
|
||||||
text-decoration: none; |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: $black; |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
&.active { |
|
||||||
& > a { |
|
||||||
color: darken($primary-color, 10%); |
|
||||||
font-weight: bold; |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .nav { |
|
||||||
margin-bottom: $unit-2; |
|
||||||
margin-left: $unit-4; |
|
||||||
} |
|
||||||
|
|
||||||
ul { |
|
||||||
background-color: inherit; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,446 +0,0 @@ |
|||||||
/* Manually forked from Normalize.css */ |
|
||||||
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Change the default font family in all browsers (opinionated). |
|
||||||
* 2. Correct the line height in all browsers. |
|
||||||
* 3. Prevent adjustments of font size after orientation changes in |
|
||||||
* IE on Windows Phone and in iOS. |
|
||||||
*/ |
|
||||||
|
|
||||||
/* Document |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
html { |
|
||||||
font-family: sans-serif; /* 1 */ |
|
||||||
-ms-text-size-adjust: 100%; /* 3 */ |
|
||||||
-webkit-text-size-adjust: 100%; /* 3 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* Sections |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the margin in all browsers (opinionated). |
|
||||||
*/ |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE 9-. |
|
||||||
*/ |
|
||||||
|
|
||||||
article, |
|
||||||
aside, |
|
||||||
footer, |
|
||||||
header, |
|
||||||
nav, |
|
||||||
section { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Correct the font size and margin on `h1` elements within `section` and |
|
||||||
* `article` contexts in Chrome, Firefox, and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
h1 { |
|
||||||
font-size: 2em; |
|
||||||
margin: 0.67em 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* Grouping content |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE 9-. |
|
||||||
* 1. Add the correct display in IE. |
|
||||||
*/ |
|
||||||
|
|
||||||
figcaption, |
|
||||||
figure, |
|
||||||
main { /* 1 */ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct margin in IE 8 (removed). |
|
||||||
*/ |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Add the correct box sizing in Firefox. |
|
||||||
* 2. Show the overflow in Edge and IE. |
|
||||||
*/ |
|
||||||
|
|
||||||
hr { |
|
||||||
box-sizing: content-box; /* 1 */ |
|
||||||
height: 0; /* 1 */ |
|
||||||
overflow: visible; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers. (removed) |
|
||||||
* 2. Correct the odd `em` font sizing in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
/* Text-level semantics |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Remove the gray background on active links in IE 10. |
|
||||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. |
|
||||||
*/ |
|
||||||
|
|
||||||
a { |
|
||||||
background-color: transparent; /* 1 */ |
|
||||||
-webkit-text-decoration-skip: objects; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the outline on focused links when they are also active or hovered |
|
||||||
* in all browsers (opinionated). |
|
||||||
*/ |
|
||||||
|
|
||||||
a:active, |
|
||||||
a:hover { |
|
||||||
outline-width: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Modify default styling of address. |
|
||||||
*/ |
|
||||||
|
|
||||||
address { |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Remove the bottom border in Firefox 39-. |
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) |
|
||||||
*/ |
|
||||||
|
|
||||||
/** |
|
||||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. |
|
||||||
*/ |
|
||||||
|
|
||||||
b, |
|
||||||
strong { |
|
||||||
font-weight: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
b, |
|
||||||
strong { |
|
||||||
font-weight: bolder; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|
||||||
* 2. Correct the odd `em` font sizing in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
code, |
|
||||||
kbd, |
|
||||||
pre, |
|
||||||
samp { |
|
||||||
font-family: $mono-font-family; /* 1 (changed) */ |
|
||||||
font-size: 1em; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct font style in Android 4.3-. |
|
||||||
*/ |
|
||||||
|
|
||||||
dfn { |
|
||||||
font-style: italic; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct background and color in IE 9-. (Removed) |
|
||||||
*/ |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct font size in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
small { |
|
||||||
font-size: 80%; |
|
||||||
font-weight: 400; /* (added) */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in |
|
||||||
* all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
sub, |
|
||||||
sup { |
|
||||||
font-size: 75%; |
|
||||||
line-height: 0; |
|
||||||
position: relative; |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
|
|
||||||
sub { |
|
||||||
bottom: -0.25em; |
|
||||||
} |
|
||||||
|
|
||||||
sup { |
|
||||||
top: -0.5em; |
|
||||||
} |
|
||||||
|
|
||||||
/* Embedded content |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE 9-. |
|
||||||
*/ |
|
||||||
|
|
||||||
audio, |
|
||||||
video { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in iOS 4-7. |
|
||||||
*/ |
|
||||||
|
|
||||||
audio:not([controls]) { |
|
||||||
display: none; |
|
||||||
height: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the border on images inside links in IE 10-. |
|
||||||
*/ |
|
||||||
|
|
||||||
img { |
|
||||||
border-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Hide the overflow in IE. |
|
||||||
*/ |
|
||||||
|
|
||||||
svg:not(:root) { |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
/* Forms |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Change the font styles in all browsers (opinionated). |
|
||||||
* 2. Remove the margin in Firefox and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
input, |
|
||||||
optgroup, |
|
||||||
select, |
|
||||||
textarea { |
|
||||||
font-family: inherit; /* 1 (changed) */ |
|
||||||
font-size: inherit; /* 1 (changed) */ |
|
||||||
line-height: inherit; /* 1 (changed) */ |
|
||||||
margin: 0; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Show the overflow in IE. |
|
||||||
* 1. Show the overflow in Edge. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
input { /* 1 */ |
|
||||||
overflow: visible; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
|
||||||
* 1. Remove the inheritance of text transform in Firefox. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
select { /* 1 */ |
|
||||||
text-transform: none; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` |
|
||||||
* controls in Android 4. |
|
||||||
* 2. Correct the inability to style clickable types in iOS and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
html [type="button"], /* 1 */ |
|
||||||
[type="reset"], |
|
||||||
[type="submit"] { |
|
||||||
-webkit-appearance: button; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the inner border and padding in Firefox. |
|
||||||
*/ |
|
||||||
|
|
||||||
button::-moz-focus-inner, |
|
||||||
[type="button"]::-moz-focus-inner, |
|
||||||
[type="reset"]::-moz-focus-inner, |
|
||||||
[type="submit"]::-moz-focus-inner { |
|
||||||
border-style: none; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Restore the focus styles unset by the previous rule (removed). |
|
||||||
*/ |
|
||||||
|
|
||||||
|
|
||||||
/** |
|
||||||
* Change the border, margin, and padding in all browsers (opinionated) (changed). |
|
||||||
*/ |
|
||||||
|
|
||||||
fieldset { |
|
||||||
border: 0; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Correct the text wrapping in Edge and IE. |
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out |
|
||||||
* `fieldset` elements in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
legend { |
|
||||||
box-sizing: border-box; /* 1 */ |
|
||||||
color: inherit; /* 2 */ |
|
||||||
display: table; /* 1 */ |
|
||||||
max-width: 100%; /* 1 */ |
|
||||||
padding: 0; /* 3 */ |
|
||||||
white-space: normal; /* 1 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Add the correct display in IE 9-. |
|
||||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. |
|
||||||
*/ |
|
||||||
|
|
||||||
progress { |
|
||||||
display: inline-block; /* 1 */ |
|
||||||
vertical-align: baseline; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the default vertical scrollbar in IE. |
|
||||||
*/ |
|
||||||
|
|
||||||
textarea { |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Add the correct box sizing in IE 10-. |
|
||||||
* 2. Remove the padding in IE 10-. |
|
||||||
*/ |
|
||||||
|
|
||||||
[type="checkbox"], |
|
||||||
[type="radio"] { |
|
||||||
box-sizing: border-box; /* 1 */ |
|
||||||
padding: 0; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome. |
|
||||||
*/ |
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button, |
|
||||||
[type="number"]::-webkit-outer-spin-button { |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Correct the odd appearance in Chrome and Safari. |
|
||||||
* 2. Correct the outline style in Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
[type="search"] { |
|
||||||
-webkit-appearance: textfield; /* 1 */ |
|
||||||
outline-offset: -2px; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. |
|
||||||
*/ |
|
||||||
|
|
||||||
[type="search"]::-webkit-search-cancel-button, |
|
||||||
[type="search"]::-webkit-search-decoration { |
|
||||||
-webkit-appearance: none; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari. |
|
||||||
* 2. Change font properties to `inherit` in Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
::-webkit-file-upload-button { |
|
||||||
-webkit-appearance: button; /* 1 */ |
|
||||||
font: inherit; /* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* Interactive |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/* |
|
||||||
* Add the correct display in IE 9-. |
|
||||||
* 1. Add the correct display in Edge, IE, and Firefox. |
|
||||||
*/ |
|
||||||
|
|
||||||
details, /* 1 */ |
|
||||||
menu { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Add the correct display in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
summary { |
|
||||||
display: list-item; |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Scripting |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE 9-. |
|
||||||
*/ |
|
||||||
|
|
||||||
canvas { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE. |
|
||||||
*/ |
|
||||||
|
|
||||||
template { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Hidden |
|
||||||
========================================================================== */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the correct display in IE 10-. |
|
||||||
*/ |
|
||||||
|
|
||||||
[hidden] { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
// Off canvas menus |
|
||||||
$off-canvas-breakpoint: $size-lg !default; |
|
||||||
|
|
||||||
.off-canvas { |
|
||||||
display: flex; |
|
||||||
flex-flow: nowrap; |
|
||||||
height: 100%; |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
.off-canvas-toggle { |
|
||||||
display: block; |
|
||||||
position: absolute; |
|
||||||
top: $layout-spacing; |
|
||||||
transition: none; |
|
||||||
z-index: $zindex-0; |
|
||||||
@if $rtl == true { |
|
||||||
right: $layout-spacing; |
|
||||||
} @else { |
|
||||||
left: $layout-spacing; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-sidebar { |
|
||||||
background: $bg-color; |
|
||||||
bottom: 0; |
|
||||||
min-width: 10rem; |
|
||||||
overflow-y: auto; |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
transition: transform .25s; |
|
||||||
z-index: $zindex-2; |
|
||||||
@if $rtl == true { |
|
||||||
right: 0; |
|
||||||
transform: translateX(100%); |
|
||||||
} @else { |
|
||||||
left: 0; |
|
||||||
transform: translateX(-100%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-content { |
|
||||||
flex: 1 1 auto; |
|
||||||
height: 100%; |
|
||||||
padding: $layout-spacing $layout-spacing*2 $layout-spacing 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-overlay { |
|
||||||
background: rgba($dark-color, .1); |
|
||||||
border-color: transparent; |
|
||||||
border-radius: 0; |
|
||||||
bottom: 0; |
|
||||||
display: none; |
|
||||||
height: 100%; |
|
||||||
left: 0; |
|
||||||
position: fixed; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-sidebar { |
|
||||||
&:target, |
|
||||||
&.active { |
|
||||||
transform: translateX(0); |
|
||||||
} |
|
||||||
|
|
||||||
&:target ~ .off-canvas-overlay, |
|
||||||
&.active ~ .off-canvas-overlay { |
|
||||||
display: block; |
|
||||||
z-index: $zindex-1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Responsive layout |
|
||||||
@media (min-width: $off-canvas-breakpoint) { |
|
||||||
.off-canvas { |
|
||||||
&.off-canvas-sidebar-show { |
|
||||||
.off-canvas-toggle { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-sidebar { |
|
||||||
flex: 0 0 auto; |
|
||||||
position: relative; |
|
||||||
transform: none; |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-overlay { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas .nav { |
|
||||||
margin: 0px; |
|
||||||
padding: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas .nav .nav-item { |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
@ -1,60 +0,0 @@ |
|||||||
// Pagination |
|
||||||
.pagination { |
|
||||||
display: flex; |
|
||||||
list-style: none; |
|
||||||
margin: $unit-1 0; |
|
||||||
padding: $unit-1 0; |
|
||||||
|
|
||||||
.page-item { |
|
||||||
margin: $unit-1 $unit-o; |
|
||||||
|
|
||||||
span { |
|
||||||
display: inline-block; |
|
||||||
padding: $unit-1 $unit-1; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
border-radius: $border-radius; |
|
||||||
display: inline-block; |
|
||||||
padding: $unit-1 $unit-2; |
|
||||||
text-decoration: none; |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.disabled { |
|
||||||
a { |
|
||||||
cursor: default; |
|
||||||
opacity: .5; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.active { |
|
||||||
a { |
|
||||||
background: $primary-color; |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.page-prev, |
|
||||||
&.page-next { |
|
||||||
flex: 1 0 50%; |
|
||||||
} |
|
||||||
|
|
||||||
&.page-next { |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
.page-item-title { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.page-item-subtitle { |
|
||||||
margin: 0; |
|
||||||
opacity: .5; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
// Panels |
|
||||||
.panel { |
|
||||||
border: $border-width solid $border-color; |
|
||||||
border-radius: $border-radius; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.panel-header, |
|
||||||
.panel-footer { |
|
||||||
flex: 0 0 auto; |
|
||||||
padding: $layout-spacing-lg; |
|
||||||
} |
|
||||||
|
|
||||||
.panel-nav { |
|
||||||
flex: 0 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.panel-body { |
|
||||||
flex: 1 1 auto; |
|
||||||
overflow-y: auto; |
|
||||||
padding: 0 $layout-spacing-lg; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,135 +0,0 @@ |
|||||||
// Parallax |
|
||||||
$parallax-deg: 3deg !default; |
|
||||||
$parallax-offset: 4.5px !default; |
|
||||||
$parallax-offset-z: 50px !default; |
|
||||||
$parallax-perspective: 1000px !default; |
|
||||||
$parallax-scale: .95 !default; |
|
||||||
$parallax-fade-color: rgba(255, 255, 255, .35) !default; |
|
||||||
|
|
||||||
// Mixin: Parallax direction |
|
||||||
@mixin parallax-dir() { |
|
||||||
height: 50%; |
|
||||||
outline: none; |
|
||||||
position: absolute; |
|
||||||
width: 50%; |
|
||||||
z-index: $zindex-1; |
|
||||||
} |
|
||||||
|
|
||||||
.parallax { |
|
||||||
display: block; |
|
||||||
height: auto; |
|
||||||
position: relative; |
|
||||||
width: auto; |
|
||||||
|
|
||||||
.parallax-content { |
|
||||||
@include shadow-variant(1rem); |
|
||||||
height: auto; |
|
||||||
transform: perspective($parallax-perspective); |
|
||||||
transform-style: preserve-3d; |
|
||||||
transition: all .4s ease; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
&::before { |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
height: 100%; |
|
||||||
left: 0; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-front { |
|
||||||
align-items: center; |
|
||||||
color: $light-color; |
|
||||||
display: flex; |
|
||||||
height: 100%; |
|
||||||
justify-content: center; |
|
||||||
left: 0; |
|
||||||
position: absolute; |
|
||||||
text-align: center; |
|
||||||
text-shadow: 0 0 20px rgba($dark-color, .75); |
|
||||||
top: 0; |
|
||||||
transform: translateZ($parallax-offset-z) scale($parallax-scale); |
|
||||||
transition: transform .4s; |
|
||||||
width: 100%; |
|
||||||
z-index: $zindex-0; |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-top-left { |
|
||||||
@include parallax-dir(); |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
|
|
||||||
&:focus ~ .parallax-content, |
|
||||||
&:hover ~ .parallax-content { |
|
||||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg); |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%); |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-front { |
|
||||||
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-top-right { |
|
||||||
@include parallax-dir(); |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
|
|
||||||
&:focus ~ .parallax-content, |
|
||||||
&:hover ~ .parallax-content { |
|
||||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg); |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%); |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-front { |
|
||||||
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-bottom-left { |
|
||||||
@include parallax-dir(); |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
|
|
||||||
&:focus ~ .parallax-content, |
|
||||||
&:hover ~ .parallax-content { |
|
||||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg); |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%); |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-front { |
|
||||||
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-bottom-right { |
|
||||||
@include parallax-dir(); |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
|
|
||||||
&:focus ~ .parallax-content, |
|
||||||
&:hover ~ .parallax-content { |
|
||||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg); |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%); |
|
||||||
} |
|
||||||
|
|
||||||
.parallax-front { |
|
||||||
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
// Popovers |
|
||||||
.popover { |
|
||||||
display: inline-block; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.popover-container { |
|
||||||
left: 50%; |
|
||||||
opacity: 0; |
|
||||||
padding: $layout-spacing; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
transform: translate(-50%, -50%) scale(0); |
|
||||||
transition: transform .2s; |
|
||||||
width: $control-width-sm; |
|
||||||
z-index: $zindex-3; |
|
||||||
} |
|
||||||
|
|
||||||
*:focus + .popover-container, |
|
||||||
&:hover .popover-container { |
|
||||||
display: block; |
|
||||||
opacity: 1; |
|
||||||
transform: translate(-50%, -100%) scale(1); |
|
||||||
} |
|
||||||
|
|
||||||
&.popover-right { |
|
||||||
.popover-container { |
|
||||||
left: 100%; |
|
||||||
top: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
*:focus + .popover-container, |
|
||||||
&:hover .popover-container { |
|
||||||
transform: translate(0, -50%) scale(1); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.popover-bottom { |
|
||||||
.popover-container { |
|
||||||
left: 50%; |
|
||||||
top: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
*:focus + .popover-container, |
|
||||||
&:hover .popover-container { |
|
||||||
transform: translate(-50%, 0) scale(1); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.popover-left { |
|
||||||
.popover-container { |
|
||||||
left: 0; |
|
||||||
top: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
*:focus + .popover-container, |
|
||||||
&:hover .popover-container { |
|
||||||
transform: translate(-100%, -50%) scale(1); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
@include shadow-variant(.2rem); |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,45 +0,0 @@ |
|||||||
// Progress |
|
||||||
// Credit: https://css-tricks.com/html5-progress-element/ |
|
||||||
.progress { |
|
||||||
appearance: none; |
|
||||||
background: $bg-color-dark; |
|
||||||
border: 0; |
|
||||||
border-radius: $border-radius; |
|
||||||
color: $primary-color; |
|
||||||
height: $unit-1; |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
&::-webkit-progress-bar { |
|
||||||
background: transparent; |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
&::-webkit-progress-value { |
|
||||||
background: $primary-color; |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
&::-moz-progress-bar { |
|
||||||
background: $primary-color; |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
&:indeterminate { |
|
||||||
animation: progress-indeterminate 1.5s linear infinite; |
|
||||||
background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat; |
|
||||||
|
|
||||||
&::-moz-progress-bar { |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes progress-indeterminate { |
|
||||||
0% { |
|
||||||
background-position: 200% 0; |
|
||||||
} |
|
||||||
100% { |
|
||||||
background-position: -200% 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,99 +0,0 @@ |
|||||||
// Sliders |
|
||||||
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ |
|
||||||
.slider { |
|
||||||
appearance: none; |
|
||||||
background: transparent; |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: $unit-6; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
@include control-shadow(); |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
&.tooltip:not([data-tooltip]) { |
|
||||||
&::after { |
|
||||||
content: attr(value); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Slider Thumb |
|
||||||
&::-webkit-slider-thumb { |
|
||||||
-webkit-appearance: none; |
|
||||||
background: $primary-color; |
|
||||||
border: 0; |
|
||||||
border-radius: 50%; |
|
||||||
height: $unit-3; |
|
||||||
margin-top: -($unit-3 - $unit-h) / 2; |
|
||||||
transition: transform .2s; |
|
||||||
width: $unit-3; |
|
||||||
} |
|
||||||
&::-moz-range-thumb { |
|
||||||
background: $primary-color; |
|
||||||
border: 0; |
|
||||||
border-radius: 50%; |
|
||||||
height: $unit-3; |
|
||||||
transition: transform .2s; |
|
||||||
width: $unit-3; |
|
||||||
} |
|
||||||
&::-ms-thumb { |
|
||||||
background: $primary-color; |
|
||||||
border: 0; |
|
||||||
border-radius: 50%; |
|
||||||
height: $unit-3; |
|
||||||
transition: transform .2s; |
|
||||||
width: $unit-3; |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
&::-webkit-slider-thumb { |
|
||||||
transform: scale(1.25); |
|
||||||
} |
|
||||||
&::-moz-range-thumb { |
|
||||||
transform: scale(1.25); |
|
||||||
} |
|
||||||
&::-ms-thumb { |
|
||||||
transform: scale(1.25); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:disabled, |
|
||||||
&.disabled { |
|
||||||
&::-webkit-slider-thumb { |
|
||||||
background: $gray-color-light; |
|
||||||
transform: scale(1); |
|
||||||
} |
|
||||||
&::-moz-range-thumb { |
|
||||||
background: $gray-color-light; |
|
||||||
transform: scale(1); |
|
||||||
} |
|
||||||
&::-ms-thumb { |
|
||||||
background: $gray-color-light; |
|
||||||
transform: scale(1); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Slider Track |
|
||||||
&::-webkit-slider-runnable-track { |
|
||||||
background: $bg-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: $unit-h; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
&::-moz-range-track { |
|
||||||
background: $bg-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: $unit-h; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
&::-ms-track { |
|
||||||
background: $bg-color-dark; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: $unit-h; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
&::-ms-fill-lower { |
|
||||||
background: $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
// Steps |
|
||||||
.step { |
|
||||||
display: flex; |
|
||||||
flex-wrap: nowrap; |
|
||||||
list-style: none; |
|
||||||
margin: $unit-1 0; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
.step-item { |
|
||||||
flex: 1 1 0; |
|
||||||
margin-top: 0; |
|
||||||
min-height: 1rem; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
&:not(:first-child)::before { |
|
||||||
background: $primary-color; |
|
||||||
content: ""; |
|
||||||
height: 2px; |
|
||||||
left: -50%; |
|
||||||
position: absolute; |
|
||||||
top: 9px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: $primary-color; |
|
||||||
display: inline-block; |
|
||||||
padding: 20px 10px 0; |
|
||||||
text-decoration: none; |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: $primary-color; |
|
||||||
border: $border-width-lg solid $light-color; |
|
||||||
border-radius: 50%; |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
height: $unit-3; |
|
||||||
left: 50%; |
|
||||||
position: absolute; |
|
||||||
top: $unit-1; |
|
||||||
transform: translateX(-50%); |
|
||||||
width: $unit-3; |
|
||||||
z-index: $zindex-0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.active { |
|
||||||
a { |
|
||||||
&::before { |
|
||||||
background: $light-color; |
|
||||||
border: $border-width-lg solid $primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& ~ .step-item { |
|
||||||
&::before { |
|
||||||
background: $border-color; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: $gray-color; |
|
||||||
|
|
||||||
&::before { |
|
||||||
background: $border-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
// Tables |
|
||||||
.table { |
|
||||||
border-collapse: collapse; |
|
||||||
border-spacing: 0; |
|
||||||
width: 100%; |
|
||||||
@if $rtl == true { |
|
||||||
text-align: right; |
|
||||||
} @else { |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
&.table-striped { |
|
||||||
tbody { |
|
||||||
tr:nth-of-type(odd) { |
|
||||||
background: $bg-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&, |
|
||||||
&.table-striped { |
|
||||||
tbody { |
|
||||||
tr { |
|
||||||
&.active { |
|
||||||
background: $bg-color-dark; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.table-hover { |
|
||||||
tbody { |
|
||||||
tr { |
|
||||||
&:hover { |
|
||||||
background: $bg-color-dark; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Scollable tables |
|
||||||
&.table-scroll { |
|
||||||
display: block; |
|
||||||
overflow-x: auto; |
|
||||||
padding-bottom: .75rem; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
td, |
|
||||||
th { |
|
||||||
border-bottom: $border-width solid $border-color; |
|
||||||
padding: $unit-3 $unit-2; |
|
||||||
} |
|
||||||
th { |
|
||||||
border-bottom-width: $border-width-lg; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
// Tabs |
|
||||||
.tab { |
|
||||||
align-items: center; |
|
||||||
border-bottom: $border-width solid $border-color; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
list-style: none; |
|
||||||
margin: $unit-1 0 ($unit-1 - $border-width) 0; |
|
||||||
|
|
||||||
.tab-item { |
|
||||||
margin-top: 0; |
|
||||||
|
|
||||||
a { |
|
||||||
border-bottom: $border-width-lg solid transparent; |
|
||||||
color: inherit; |
|
||||||
display: block; |
|
||||||
margin: 0 $unit-2 0 0; |
|
||||||
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1; |
|
||||||
text-decoration: none; |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: $link-color; |
|
||||||
} |
|
||||||
} |
|
||||||
&.active a, |
|
||||||
a.active { |
|
||||||
border-bottom-color: $primary-color; |
|
||||||
color: $link-color; |
|
||||||
} |
|
||||||
|
|
||||||
&.tab-action { |
|
||||||
flex: 1 0 auto; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-clear { |
|
||||||
margin-top: -$unit-1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.tab-block { |
|
||||||
.tab-item { |
|
||||||
flex: 1 0 0; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
a { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.badge { |
|
||||||
&[data-badge]::after { |
|
||||||
position: absolute; |
|
||||||
right: $unit-h; |
|
||||||
top: $unit-h; |
|
||||||
transform: translate(0, 0); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:not(.tab-block) { |
|
||||||
.badge { |
|
||||||
padding-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
// Tiles |
|
||||||
.tile { |
|
||||||
align-content: space-between; |
|
||||||
align-items: flex-start; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.tile-icon, |
|
||||||
.tile-action { |
|
||||||
flex: 0 0 auto; |
|
||||||
} |
|
||||||
.tile-content { |
|
||||||
flex: 1 1 auto; |
|
||||||
&:not(:first-child) { |
|
||||||
padding-left: $unit-2; |
|
||||||
} |
|
||||||
&:not(:last-child) { |
|
||||||
padding-right: $unit-2; |
|
||||||
} |
|
||||||
} |
|
||||||
.tile-title, |
|
||||||
.tile-subtitle { |
|
||||||
line-height: $line-height; |
|
||||||
} |
|
||||||
|
|
||||||
&.tile-centered { |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
.tile-content { |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.tile-title, |
|
||||||
.tile-subtitle { |
|
||||||
@include text-ellipsis(); |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,56 +0,0 @@ |
|||||||
// Timelines |
|
||||||
.timeline { |
|
||||||
.timeline-item { |
|
||||||
display: flex; |
|
||||||
margin-bottom: $unit-6; |
|
||||||
position: relative; |
|
||||||
&::before { |
|
||||||
background: $border-color; |
|
||||||
content: ""; |
|
||||||
height: 100%; |
|
||||||
left: 11px; |
|
||||||
position: absolute; |
|
||||||
top: $unit-6; |
|
||||||
width: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
.timeline-left { |
|
||||||
flex: 0 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.timeline-content { |
|
||||||
flex: 1 1 auto; |
|
||||||
padding: 2px 0 2px $layout-spacing-lg; |
|
||||||
} |
|
||||||
|
|
||||||
.timeline-icon { |
|
||||||
align-items: center; |
|
||||||
border-radius: 50%; |
|
||||||
color: $light-color; |
|
||||||
display: flex; |
|
||||||
height: $unit-6; |
|
||||||
justify-content: center; |
|
||||||
text-align: center; |
|
||||||
width: $unit-6; |
|
||||||
&::before { |
|
||||||
border: $border-width-lg solid $primary-color; |
|
||||||
border-radius: 50%; |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
height: $unit-2; |
|
||||||
left: $unit-2; |
|
||||||
position: absolute; |
|
||||||
top: $unit-2; |
|
||||||
width: $unit-2; |
|
||||||
} |
|
||||||
|
|
||||||
&.icon-lg { |
|
||||||
background: $primary-color; |
|
||||||
line-height: $line-height; |
|
||||||
&::before { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,47 +0,0 @@ |
|||||||
// Toasts |
|
||||||
.toast { |
|
||||||
@include toast-variant($dark-color, $gray-color); |
|
||||||
border-radius: $border-radius; |
|
||||||
color: $black !important; |
|
||||||
display: block; |
|
||||||
padding: $layout-spacing; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
&.toast-primary { |
|
||||||
@include toast-variant($gray-color-light, $primary-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.toast-success { |
|
||||||
@include toast-variant(lighten($success-color, 30%), $success-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.toast-warning { |
|
||||||
@include toast-variant(lighten($warning-color, 30%), $warning-color); |
|
||||||
} |
|
||||||
|
|
||||||
&.toast-error { |
|
||||||
@include toast-variant(lighten($error-color, 60%), $error-color); |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: $black !important; |
|
||||||
text-decoration: underline; |
|
||||||
|
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&:active, |
|
||||||
&.active { |
|
||||||
opacity: .75; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.btn-clear { |
|
||||||
margin: $unit-h; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
&:last-child { |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
// Tooltips |
|
||||||
.tooltip { |
|
||||||
position: relative; |
|
||||||
&::after { |
|
||||||
background: rgba($dark-color, .95); |
|
||||||
border-radius: $border-radius; |
|
||||||
bottom: 100%; |
|
||||||
color: $light-color; |
|
||||||
content: attr(data-tooltip); |
|
||||||
display: block; |
|
||||||
font-size: $font-size-sm; |
|
||||||
left: 50%; |
|
||||||
max-width: $control-width-sm; |
|
||||||
opacity: 0; |
|
||||||
overflow: hidden; |
|
||||||
padding: $unit-1 $unit-2; |
|
||||||
pointer-events: none; |
|
||||||
position: absolute; |
|
||||||
text-overflow: ellipsis; |
|
||||||
transform: translate(-50%, $unit-2); |
|
||||||
transition: opacity .2s, transform .2s; |
|
||||||
white-space: pre; |
|
||||||
z-index: $zindex-3; |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
&::after { |
|
||||||
opacity: 1; |
|
||||||
transform: translate(-50%, -$unit-1); |
|
||||||
} |
|
||||||
} |
|
||||||
&[disabled], |
|
||||||
&.disabled { |
|
||||||
pointer-events: auto; |
|
||||||
} |
|
||||||
|
|
||||||
&.tooltip-right { |
|
||||||
&::after { |
|
||||||
bottom: 50%; |
|
||||||
left: 100%; |
|
||||||
transform: translate(-$unit-1, 50%); |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
&::after { |
|
||||||
transform: translate($unit-1, 50%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.tooltip-bottom { |
|
||||||
&::after { |
|
||||||
bottom: auto; |
|
||||||
top: 100%; |
|
||||||
transform: translate(-50%, -$unit-2); |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
&::after { |
|
||||||
transform: translate(-50%, $unit-1); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.tooltip-left { |
|
||||||
&::after { |
|
||||||
bottom: 50%; |
|
||||||
left: auto; |
|
||||||
right: 100%; |
|
||||||
transform: translate($unit-2, 50%); |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
&::after { |
|
||||||
transform: translate(-$unit-1, 50%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,179 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: 'Tandy1K'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: url(/Tandy1K.woff) format('woff'); |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Tandy1KMono'; |
|
||||||
font-style: monospace; |
|
||||||
font-weight: 400; |
|
||||||
src: url(/Tandy1KMono.woff) format('woff'); |
|
||||||
} |
|
||||||
|
|
||||||
// Typography |
|
||||||
// Headings |
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 { |
|
||||||
font-weight: 700; |
|
||||||
margin-bottom: .5em; |
|
||||||
margin-top: 0; |
|
||||||
font-family: "Tandy1K"; |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: none !important; |
|
||||||
color: $primary-color !important; |
|
||||||
} |
|
||||||
} |
|
||||||
.h1, |
|
||||||
.h2, |
|
||||||
.h3, |
|
||||||
.h4, |
|
||||||
.h5, |
|
||||||
.h6 { |
|
||||||
font-weight: 700; |
|
||||||
font-family: "Tandy1K"; |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: none !important; |
|
||||||
color: $primary-color !important; |
|
||||||
} |
|
||||||
} |
|
||||||
h1, |
|
||||||
.h1 { |
|
||||||
font-size: 58px; |
|
||||||
line-height: 87px; |
|
||||||
} |
|
||||||
h2, |
|
||||||
.h2 { |
|
||||||
font-size: 45px; |
|
||||||
line-height: 69px; |
|
||||||
} |
|
||||||
h3, |
|
||||||
.h3 { |
|
||||||
font-size: 36px; |
|
||||||
line-height: 56px; |
|
||||||
} |
|
||||||
h4, |
|
||||||
.h4 { |
|
||||||
font-size: 28px; |
|
||||||
line-height: 44px; |
|
||||||
} |
|
||||||
h5, |
|
||||||
.h5 { |
|
||||||
font-size: 22px; |
|
||||||
line-height: 35px; |
|
||||||
} |
|
||||||
h6, |
|
||||||
.h6 { |
|
||||||
font-size: 17px; |
|
||||||
line-height: 18px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// Paragraphs |
|
||||||
p { |
|
||||||
margin: 0 0 $line-height; |
|
||||||
color: $body-font-color; |
|
||||||
} |
|
||||||
|
|
||||||
// Semantic text elements |
|
||||||
a, |
|
||||||
ins, |
|
||||||
u { |
|
||||||
text-decoration-skip: ink edges; |
|
||||||
} |
|
||||||
|
|
||||||
abbr[title] { |
|
||||||
border-bottom: $border-width dotted; |
|
||||||
cursor: help; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
kbd { |
|
||||||
@include label-base(); |
|
||||||
@include label-variant($light-color, $dark-color); |
|
||||||
font-size: $font-size-sm; |
|
||||||
} |
|
||||||
|
|
||||||
mark { |
|
||||||
@include label-variant($body-font-color, $highlight-color); |
|
||||||
border-bottom: $unit-o solid darken($highlight-color, 15%); |
|
||||||
border-radius: $border-radius; |
|
||||||
padding: $unit-o $unit-h 0; |
|
||||||
} |
|
||||||
|
|
||||||
// Blockquote |
|
||||||
blockquote { |
|
||||||
border-left: $border-width-lg solid $border-color; |
|
||||||
background-color: lighten($gray-color-light, 3%); |
|
||||||
margin-left: 0; |
|
||||||
padding: $unit-2 $unit-4; |
|
||||||
|
|
||||||
p:last-child { |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Lists |
|
||||||
ul, |
|
||||||
ol { |
|
||||||
margin: $unit-4 $unit-4 $unit-4 $unit-4; |
|
||||||
background-color: $gray; |
|
||||||
padding: 0.5em; |
|
||||||
|
|
||||||
|
|
||||||
ul, |
|
||||||
ol { |
|
||||||
margin: $unit-4 $unit-4 $unit-4 $unit-4; |
|
||||||
} |
|
||||||
|
|
||||||
li { |
|
||||||
margin-top: $unit-2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ul { |
|
||||||
list-style: disc inside; |
|
||||||
|
|
||||||
ul { |
|
||||||
list-style-type: circle; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ol { |
|
||||||
list-style: none; |
|
||||||
counter-reset: high-contrast-counter; |
|
||||||
|
|
||||||
ol { |
|
||||||
list-style-type: lower-alpha; |
|
||||||
} |
|
||||||
|
|
||||||
li { |
|
||||||
counter-increment: high-contrast-counter; |
|
||||||
} |
|
||||||
|
|
||||||
li::before { |
|
||||||
content: "0" counter(high-contrast-counter) "."; |
|
||||||
border-radius: $border-radius; |
|
||||||
background-color: $black; |
|
||||||
color: $snow; |
|
||||||
padding: 3px; |
|
||||||
margin-right: 0.3em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
dl { |
|
||||||
dt { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
dd { |
|
||||||
margin: $unit-2 0 $unit-4 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,8 +0,0 @@ |
|||||||
@import "utilities/colors"; |
|
||||||
@import "utilities/cursors"; |
|
||||||
@import "utilities/display"; |
|
||||||
@import "utilities/divider"; |
|
||||||
@import "utilities/loading"; |
|
||||||
@import "utilities/position"; |
|
||||||
@import "utilities/shapes"; |
|
||||||
@import "utilities/text"; |
|
||||||
@ -1,123 +0,0 @@ |
|||||||
// Core variables |
|
||||||
$version: "0.5.8"; |
|
||||||
|
|
||||||
// Core features |
|
||||||
$rtl: false !default; |
|
||||||
|
|
||||||
$yellow: #DEB8AE; |
|
||||||
$blue: #0aa; |
|
||||||
$red: #a00; |
|
||||||
$gray: #444; |
|
||||||
$snow: #eee; |
|
||||||
$black: #000; |
|
||||||
$green: #0a0; |
|
||||||
$white: #fff; |
|
||||||
$debug: red; |
|
||||||
|
|
||||||
// Core colors |
|
||||||
$primary-color: $gray !default; |
|
||||||
$primary-color-dark: darken($primary-color, 3%) !default; |
|
||||||
$primary-color-light: lighten($primary-color, 3%) !default; |
|
||||||
$secondary-color: lighten($red, 17.5%) !default; |
|
||||||
$secondary-color-dark: darken($secondary-color, 10%) !default; |
|
||||||
$secondary-color-light: lighten($secondary-color, 10%) !default; |
|
||||||
|
|
||||||
// Gray colors |
|
||||||
$dark-color: $gray !default; |
|
||||||
$light-color: $snow !default; |
|
||||||
$gray-color: $gray !default; |
|
||||||
$gray-color-dark: darken($gray-color, 10%) !default; |
|
||||||
$gray-color-light: lighten($gray-color, 20%) !default; |
|
||||||
|
|
||||||
$border-color: lighten($green, 65%) !default; |
|
||||||
$border-color-dark: darken($border-color, 10%) !default; |
|
||||||
$border-color-light: lighten($border-color, 8%) !default; |
|
||||||
$bg-color: $black !default; |
|
||||||
$bg-color-dark: darken($bg-color, 10%) !default; |
|
||||||
$bg-color-light: lighten($bg-color, 10%) !default; |
|
||||||
|
|
||||||
// Control colors |
|
||||||
$success-color: $green !default; |
|
||||||
$warning-color: $yellow !default; |
|
||||||
$error-color: $red !default; |
|
||||||
|
|
||||||
// Other colors |
|
||||||
$code-color: $green !default; |
|
||||||
$highlight-color: #ffe9b3 !default; |
|
||||||
$body-bg: $bg-color !default; |
|
||||||
$body-font-color: darken($white, 10%) !default; |
|
||||||
$link-color: $green !default; |
|
||||||
$link-color-dark: $red !default; |
|
||||||
$link-color-light: $yellow !default; |
|
||||||
|
|
||||||
// Fonts |
|
||||||
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ |
|
||||||
$base-font-family: "Tandy1K" !default; |
|
||||||
$mono-font-family: "Tandy1KMono", monospace !default; |
|
||||||
$fallback-font-family: "Roboto", sans-serif !default; |
|
||||||
$body-font-family: $base-font-family, $fallback-font-family !default; |
|
||||||
|
|
||||||
// Unit sizes |
|
||||||
$unit-o: .05rem !default; |
|
||||||
$unit-h: .1rem !default; |
|
||||||
$unit-1: .2rem !default; |
|
||||||
$unit-2: .4rem !default; |
|
||||||
$unit-3: .6rem !default; |
|
||||||
$unit-4: .8rem !default; |
|
||||||
$unit-5: 1rem !default; |
|
||||||
$unit-6: 1.2rem !default; |
|
||||||
$unit-7: 1.4rem !default; |
|
||||||
$unit-8: 1.6rem !default; |
|
||||||
$unit-9: 1.8rem !default; |
|
||||||
$unit-10: 2rem !default; |
|
||||||
$unit-12: 2.4rem !default; |
|
||||||
$unit-16: 3.2rem !default; |
|
||||||
|
|
||||||
// Font sizes |
|
||||||
$html-font-size: 16px !default; |
|
||||||
$html-line-height: 1.5 !default; |
|
||||||
$font-size: 1rem !default; |
|
||||||
$font-size-sm: .9rem !default; |
|
||||||
$font-size-lg: 1.9rem !default; |
|
||||||
$line-height: 1.5rem !default; |
|
||||||
|
|
||||||
// Sizes |
|
||||||
$layout-spacing: $unit-2 !default; |
|
||||||
$layout-spacing-sm: $unit-1 !default; |
|
||||||
$layout-spacing-lg: $unit-4 !default; |
|
||||||
$border-radius: $unit-h !default; |
|
||||||
$border-width: $unit-o !default; |
|
||||||
$border-width-lg: $unit-h !default; |
|
||||||
$control-size: $unit-9 !default; |
|
||||||
$control-size-sm: $unit-7 !default; |
|
||||||
$control-size-lg: $unit-10 !default; |
|
||||||
$control-padding-x: $unit-2 !default; |
|
||||||
$control-padding-x-sm: $unit-2 * .75 !default; |
|
||||||
$control-padding-x-lg: $unit-2 * 1.5 !default; |
|
||||||
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default; |
|
||||||
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default; |
|
||||||
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default; |
|
||||||
$control-icon-size: .8rem !default; |
|
||||||
|
|
||||||
$control-width-xs: 180px !default; |
|
||||||
$control-width-sm: 320px !default; |
|
||||||
$control-width-md: 640px !default; |
|
||||||
$control-width-lg: 960px !default; |
|
||||||
$control-width-xl: 1280px !default; |
|
||||||
|
|
||||||
// Responsive breakpoints |
|
||||||
$size-xs: 480px !default; |
|
||||||
$size-sm: 600px !default; |
|
||||||
$size-md: 840px !default; |
|
||||||
$size-lg: 960px !default; |
|
||||||
$size-xl: 1280px !default; |
|
||||||
$size-2x: 1440px !default; |
|
||||||
|
|
||||||
$responsive-breakpoint: $size-xs !default; |
|
||||||
|
|
||||||
// Z-index |
|
||||||
$zindex-0: 1 !default; |
|
||||||
$zindex-1: 100 !default; |
|
||||||
$zindex-2: 200 !default; |
|
||||||
$zindex-3: 300 !default; |
|
||||||
$zindex-4: 400 !default; |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
// 360 Degree Viewer |
|
||||||
|
|
||||||
// Mixin: Viewer slider sizes |
|
||||||
@mixin viewer-slider-size($image-number: 36) { |
|
||||||
@for $s from 1 through ($image-number) { |
|
||||||
.viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image { |
|
||||||
background-position-y: percentage((($s)-1) * 1/(($image-number)-1)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.viewer-360 { |
|
||||||
align-items: center; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
// Copy and add more numbers if you need |
|
||||||
@include viewer-slider-size(36); |
|
||||||
|
|
||||||
.viewer-slider { |
|
||||||
cursor: ew-resize; |
|
||||||
margin: 1rem; |
|
||||||
order: 2; |
|
||||||
width: 60%; |
|
||||||
} |
|
||||||
|
|
||||||
.viewer-image { |
|
||||||
background-position-y: 0; |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-size: 100%; |
|
||||||
max-width: 100%; |
|
||||||
order: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,315 +0,0 @@ |
|||||||
// Icon resize |
|
||||||
.icon-resize-horiz, |
|
||||||
.icon-resize-vert { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-right: 0; |
|
||||||
height: .45em; |
|
||||||
width: .45em; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -90%) rotate(45deg); |
|
||||||
} |
|
||||||
&::after { |
|
||||||
transform: translate(-50%, -10%) rotate(225deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-resize-horiz { |
|
||||||
&::before { |
|
||||||
transform: translate(-90%, -50%) rotate(-45deg); |
|
||||||
} |
|
||||||
&::after { |
|
||||||
transform: translate(-10%, -50%) rotate(135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon more |
|
||||||
.icon-more-horiz, |
|
||||||
.icon-more-vert { |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
box-shadow: -.4em 0, .4em 0; |
|
||||||
border-radius: 50%; |
|
||||||
height: 3px; |
|
||||||
width: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-more-vert { |
|
||||||
&::before { |
|
||||||
box-shadow: 0 -.4em, 0 .4em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon plus, minus, cross |
|
||||||
.icon-plus, |
|
||||||
.icon-minus, |
|
||||||
.icon-cross { |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
height: $icon-border-width; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-plus, |
|
||||||
.icon-cross { |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: 100%; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-cross { |
|
||||||
&::before { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon check |
|
||||||
.icon-check { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-right: 0; |
|
||||||
border-top: 0; |
|
||||||
height: .5em; |
|
||||||
width: .9em; |
|
||||||
transform: translate(-50%, -75%) rotate(-45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon stop |
|
||||||
.icon-stop { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
height: $icon-border-width; |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
width: 1em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon shutdown |
|
||||||
.icon-shutdown { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
border-top-color: transparent; |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
content: ""; |
|
||||||
height: .5em; |
|
||||||
top: .1em; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon refresh |
|
||||||
.icon-refresh { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
border-right-color: transparent; |
|
||||||
height: 1em; |
|
||||||
width: 1em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: .2em solid currentColor; |
|
||||||
border-top-color: transparent; |
|
||||||
border-left-color: transparent; |
|
||||||
height: 0; |
|
||||||
left: 80%; |
|
||||||
top: 20%; |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon search |
|
||||||
.icon-search { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
height: .75em; |
|
||||||
left: 5%; |
|
||||||
top: 5%; |
|
||||||
transform: translate(0, 0) rotate(45deg); |
|
||||||
width: .75em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: $icon-border-width; |
|
||||||
left: 80%; |
|
||||||
top: 80%; |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
width: .4em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon edit |
|
||||||
.icon-edit { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
height: .4em; |
|
||||||
transform: translate(-40%, -60%) rotate(-45deg); |
|
||||||
width: .85em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: .15em solid currentColor; |
|
||||||
border-top-color: transparent; |
|
||||||
border-right-color: transparent; |
|
||||||
height: 0; |
|
||||||
left: 5%; |
|
||||||
top: 95%; |
|
||||||
transform: translate(0, -100%); |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon delete |
|
||||||
.icon-delete { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom-left-radius: $border-radius; |
|
||||||
border-bottom-right-radius: $border-radius; |
|
||||||
border-top: 0; |
|
||||||
height: .75em; |
|
||||||
top: 60%; |
|
||||||
width: .75em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
box-shadow: -.25em .2em, .25em .2em; |
|
||||||
height: $icon-border-width; |
|
||||||
top: $icon-border-width/2; |
|
||||||
width: .5em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon share |
|
||||||
.icon-share { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
border-right: 0; |
|
||||||
border-top: 0; |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-left: 0; |
|
||||||
border-top: 0; |
|
||||||
height: .4em; |
|
||||||
left: 100%; |
|
||||||
top: .25em; |
|
||||||
transform: translate(-125%, -50%) rotate(-45deg); |
|
||||||
width: .4em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-right: 0; |
|
||||||
border-radius: 75% 0; |
|
||||||
height: .5em; |
|
||||||
width: .6em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon flag |
|
||||||
.icon-flag { |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
height: 1em; |
|
||||||
left: 15%; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom-right-radius: $border-radius; |
|
||||||
border-left: 0; |
|
||||||
border-top-right-radius: $border-radius; |
|
||||||
height: .65em; |
|
||||||
top: 35%; |
|
||||||
left: 60%; |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon bookmark |
|
||||||
.icon-bookmark { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-top-left-radius: $border-radius; |
|
||||||
border-top-right-radius: $border-radius; |
|
||||||
height: .9em; |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-left: 0; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: .5em; |
|
||||||
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); |
|
||||||
width: .5em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon download & upload |
|
||||||
.icon-download, |
|
||||||
.icon-upload { |
|
||||||
border-bottom: $icon-border-width solid currentColor; |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-right: 0; |
|
||||||
height: .5em; |
|
||||||
width: .5em; |
|
||||||
transform: translate(-50%, -60%) rotate(-135deg); |
|
||||||
} |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: .6em; |
|
||||||
top: 40%; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-upload { |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -60%) rotate(45deg); |
|
||||||
} |
|
||||||
&::after { |
|
||||||
top: 50%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon copy |
|
||||||
.icon-copy { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
border-right: 0; |
|
||||||
border-bottom: 0; |
|
||||||
height: .8em; |
|
||||||
left: 40%; |
|
||||||
top: 35%; |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: .8em; |
|
||||||
left: 60%; |
|
||||||
top: 60%; |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
// Icon variables |
|
||||||
$icon-border-width: $border-width-lg; |
|
||||||
$icon-prefix: "icon"; |
|
||||||
|
|
||||||
// Icon base style |
|
||||||
.#{$icon-prefix} { |
|
||||||
box-sizing: border-box; |
|
||||||
display: inline-block; |
|
||||||
font-size: inherit; |
|
||||||
font-style: normal; |
|
||||||
height: 1em; |
|
||||||
position: relative; |
|
||||||
text-indent: -9999px; |
|
||||||
vertical-align: middle; |
|
||||||
width: 1em; |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
left: 50%; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
|
|
||||||
// Icon sizes |
|
||||||
&.icon-2x { |
|
||||||
font-size: 1.6rem; |
|
||||||
} |
|
||||||
|
|
||||||
&.icon-3x { |
|
||||||
font-size: 2.4rem; |
|
||||||
} |
|
||||||
|
|
||||||
&.icon-4x { |
|
||||||
font-size: 3.2rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Component icon support |
|
||||||
.accordion, |
|
||||||
.btn, |
|
||||||
.toast, |
|
||||||
.menu { |
|
||||||
.#{$icon-prefix} { |
|
||||||
vertical-align: -10%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.btn-lg { |
|
||||||
.#{$icon-prefix} { |
|
||||||
vertical-align: -15%; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,127 +0,0 @@ |
|||||||
// Icon arrows |
|
||||||
.icon-arrow-down, |
|
||||||
.icon-arrow-left, |
|
||||||
.icon-arrow-right, |
|
||||||
.icon-arrow-up, |
|
||||||
.icon-downward, |
|
||||||
.icon-back, |
|
||||||
.icon-forward, |
|
||||||
.icon-upward { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-right: 0; |
|
||||||
height: .65em; |
|
||||||
width: .65em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-arrow-down { |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -75%) rotate(225deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-arrow-left { |
|
||||||
&::before { |
|
||||||
transform: translate(-25%, -50%) rotate(-45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-arrow-right { |
|
||||||
&::before { |
|
||||||
transform: translate(-75%, -50%) rotate(135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-arrow-up { |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -25%) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-back, |
|
||||||
.icon-forward { |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: $icon-border-width; |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-downward, |
|
||||||
.icon-upward { |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: .8em; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-back { |
|
||||||
&::after { |
|
||||||
left: 55%; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(-45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-downward { |
|
||||||
&::after { |
|
||||||
top: 45%; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(-135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-forward { |
|
||||||
&::after { |
|
||||||
left: 45%; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-upward { |
|
||||||
&::after { |
|
||||||
top: 55%; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon caret |
|
||||||
.icon-caret { |
|
||||||
&::before { |
|
||||||
border-top: .3em solid currentColor; |
|
||||||
border-right: .3em solid transparent; |
|
||||||
border-left: .3em solid transparent; |
|
||||||
height: 0; |
|
||||||
transform: translate(-50%, -25%); |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon menu |
|
||||||
.icon-menu { |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
box-shadow: 0 -.35em, 0 .35em; |
|
||||||
height: $icon-border-width; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon apps |
|
||||||
.icon-apps { |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; |
|
||||||
height: 3px; |
|
||||||
width: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,161 +0,0 @@ |
|||||||
// Icon time |
|
||||||
.icon-time { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
&::before { |
|
||||||
background: currentColor; |
|
||||||
height: .4em; |
|
||||||
transform: translate(-50%, -75%); |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
height: .3em; |
|
||||||
transform: translate(-50%, -75%) rotate(90deg); |
|
||||||
transform-origin: 50% 90%; |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon mail |
|
||||||
.icon-mail { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: .8em; |
|
||||||
width: 1em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-right: 0; |
|
||||||
border-top: 0; |
|
||||||
height: .5em; |
|
||||||
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); |
|
||||||
width: .5em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon people |
|
||||||
.icon-people { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
height: .45em; |
|
||||||
top: 25%; |
|
||||||
width: .45em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50% 50% 0 0; |
|
||||||
height: .4em; |
|
||||||
top: 75%; |
|
||||||
width: .9em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon message |
|
||||||
.icon-message { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-radius: $border-radius; |
|
||||||
border-right: 0; |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom-right-radius: $border-radius; |
|
||||||
border-left: 0; |
|
||||||
border-top: 0; |
|
||||||
height: .8em; |
|
||||||
left: 65%; |
|
||||||
top: 40%; |
|
||||||
width: .7em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
background: currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
height: .3em; |
|
||||||
left: 10%; |
|
||||||
top: 100%; |
|
||||||
transform: translate(0, -90%) rotate(45deg); |
|
||||||
width: $icon-border-width; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon photo |
|
||||||
.icon-photo { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: $border-radius; |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
height: .25em; |
|
||||||
left: 35%; |
|
||||||
top: 35%; |
|
||||||
width: .25em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom: 0; |
|
||||||
border-left: 0; |
|
||||||
height: .5em; |
|
||||||
left: 60%; |
|
||||||
transform: translate(-50%, 25%) rotate(-45deg); |
|
||||||
width: .5em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon link |
|
||||||
.icon-link { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 5em 0 0 5em; |
|
||||||
border-right: 0; |
|
||||||
height: .5em; |
|
||||||
width: .75em; |
|
||||||
} |
|
||||||
&::before { |
|
||||||
transform: translate(-70%, -45%) rotate(-45deg); |
|
||||||
} |
|
||||||
&::after { |
|
||||||
transform: translate(-30%, -55%) rotate(135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon location |
|
||||||
.icon-location { |
|
||||||
&::before { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50% 50% 50% 0; |
|
||||||
height: .8em; |
|
||||||
transform: translate(-50%, -60%) rotate(-45deg); |
|
||||||
width: .8em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
height: .2em; |
|
||||||
transform: translate(-50%, -80%); |
|
||||||
width: .2em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Icon emoji |
|
||||||
.icon-emoji { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-radius: 50%; |
|
||||||
&::before { |
|
||||||
border-radius: 50%; |
|
||||||
box-shadow: -.17em -.1em, .17em -.1em; |
|
||||||
height: .15em; |
|
||||||
width: .15em; |
|
||||||
} |
|
||||||
&::after { |
|
||||||
border: $icon-border-width solid currentColor; |
|
||||||
border-bottom-color: transparent; |
|
||||||
border-radius: 50%; |
|
||||||
border-right-color: transparent; |
|
||||||
height: .5em; |
|
||||||
transform: translate(-50%, -40%) rotate(-135deg); |
|
||||||
width: .5em; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
// Avatar mixin |
|
||||||
@mixin avatar-base($size: $unit-8) { |
|
||||||
font-size: $size / 2; |
|
||||||
height: $size; |
|
||||||
width: $size; |
|
||||||
} |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
// Button variant mixin |
|
||||||
@mixin button-variant($color: $primary-color) { |
|
||||||
background: $color; |
|
||||||
border-color: darken($color, 3%); |
|
||||||
color: $light-color; |
|
||||||
&:focus { |
|
||||||
@include control-shadow($color); |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
background: darken($color, 2%); |
|
||||||
border-color: darken($color, 5%); |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
&:active, |
|
||||||
&.active { |
|
||||||
background: darken($color, 7%); |
|
||||||
border-color: darken($color, 10%); |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
&.loading { |
|
||||||
&::after { |
|
||||||
border-bottom-color: $light-color; |
|
||||||
border-left-color: $light-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@mixin button-outline-variant($color: $primary-color) { |
|
||||||
background: $light-color; |
|
||||||
border-color: $color; |
|
||||||
color: $color; |
|
||||||
&:focus { |
|
||||||
@include control-shadow($color); |
|
||||||
} |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
background: lighten($color, 50%); |
|
||||||
border-color: darken($color, 2%); |
|
||||||
color: $color; |
|
||||||
} |
|
||||||
&:active, |
|
||||||
&.active { |
|
||||||
background: $color; |
|
||||||
border-color: darken($color, 5%); |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
&.loading { |
|
||||||
&::after { |
|
||||||
border-bottom-color: $color; |
|
||||||
border-left-color: $color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
// Clearfix mixin |
|
||||||
@mixin clearfix() { |
|
||||||
&::after { |
|
||||||
clear: both; |
|
||||||
content: ""; |
|
||||||
display: table; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
// Background color utility mixin |
|
||||||
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { |
|
||||||
#{$name} { |
|
||||||
background: $color !important; |
|
||||||
|
|
||||||
@if (lightness($color) < 60) { |
|
||||||
color: $light-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Text color utility mixin |
|
||||||
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { |
|
||||||
#{$name} { |
|
||||||
color: $color !important; |
|
||||||
} |
|
||||||
|
|
||||||
a#{$name} { |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: darken($color, 5%); |
|
||||||
} |
|
||||||
&:visited { |
|
||||||
color: lighten($color, 5%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
// Label base style |
|
||||||
@mixin label-base() { |
|
||||||
border-radius: $border-radius; |
|
||||||
line-height: 1.25; |
|
||||||
padding: .1rem .2rem; |
|
||||||
} |
|
||||||
|
|
||||||
@mixin label-variant($color: $light-color, $bg-color: $primary-color) { |
|
||||||
background: $bg-color; |
|
||||||
color: $color; |
|
||||||
} |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
// Margin utility mixin |
|
||||||
@mixin margin-variant($id: 1, $size: $unit-1) { |
|
||||||
.m-#{$id} { |
|
||||||
margin: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.mb-#{$id} { |
|
||||||
margin-bottom: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.ml-#{$id} { |
|
||||||
margin-left: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.mr-#{$id} { |
|
||||||
margin-right: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.mt-#{$id} { |
|
||||||
margin-top: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.mx-#{$id} { |
|
||||||
margin-left: $size !important; |
|
||||||
margin-right: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.my-#{$id} { |
|
||||||
margin-bottom: $size !important; |
|
||||||
margin-top: $size !important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Padding utility mixin |
|
||||||
@mixin padding-variant($id: 1, $size: $unit-1) { |
|
||||||
.p-#{$id} { |
|
||||||
padding: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pb-#{$id} { |
|
||||||
padding-bottom: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pl-#{$id} { |
|
||||||
padding-left: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pr-#{$id} { |
|
||||||
padding-right: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pt-#{$id} { |
|
||||||
padding-top: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.px-#{$id} { |
|
||||||
padding-left: $size !important; |
|
||||||
padding-right: $size !important; |
|
||||||
} |
|
||||||
|
|
||||||
.py-#{$id} { |
|
||||||
padding-bottom: $size !important; |
|
||||||
padding-top: $size !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
// Component focus shadow |
|
||||||
@mixin control-shadow($color: $primary-color) { |
|
||||||
box-shadow: 0 0 0 .1rem rgba($color, .2); |
|
||||||
} |
|
||||||
|
|
||||||
// Shadow mixin |
|
||||||
@mixin shadow-variant($offset) { |
|
||||||
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
// Text Ellipsis |
|
||||||
@mixin text-ellipsis() { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
// Toast variant mixin |
|
||||||
@mixin toast-variant($color: $dark-color, $border: $red) { |
|
||||||
background: rgba($color, .95); |
|
||||||
border: $border-width solid $border; |
|
||||||
} |
|
||||||
@ -1,206 +0,0 @@ |
|||||||
/* from https://bansal.io/pattern-css */ |
|
||||||
|
|
||||||
$pattern-prefix : 'pattern' !default; |
|
||||||
|
|
||||||
$pattern-sizes : (sm:10px, |
|
||||||
md:25px, |
|
||||||
lg:50px, |
|
||||||
xl:100px, |
|
||||||
) !default; |
|
||||||
|
|
||||||
$pattern-list: ('checks', |
|
||||||
'grid', |
|
||||||
'grid', |
|
||||||
'dots', |
|
||||||
'cross-dots', |
|
||||||
'vertical-lines', |
|
||||||
'horizontal-lines', |
|
||||||
'diagonal-lines', |
|
||||||
'vertical-stripes', |
|
||||||
'horizontal-stripes', |
|
||||||
'diagonal-stripes', |
|
||||||
'triangles', |
|
||||||
'zigzag' |
|
||||||
) !default; |
|
||||||
|
|
||||||
$dots : (sm:.5px, |
|
||||||
md:1px, |
|
||||||
lg:1.5px, |
|
||||||
xl:2px) !default; |
|
||||||
|
|
||||||
// .bg-checks-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'checks') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
.#{$pattern-prefix}-checks-#{$name} { |
|
||||||
background-image: |
|
||||||
repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), |
|
||||||
repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor); |
|
||||||
background-position: 0 0, |
|
||||||
#{$size} #{$size}; |
|
||||||
background-size: calc(2 * #{$size}) calc(2 * #{$size}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-grid-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'grid') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
.#{$pattern-prefix}-grid-#{$name} { |
|
||||||
background-image: |
|
||||||
linear-gradient(currentColor 1px, transparent 1px), |
|
||||||
linear-gradient(to right, currentColor 1px, transparent 1px); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
// background-position: calc(-0.5 * #{$size}) calc(-0.5 * #{$size}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-dots-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'dots') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $dots { |
|
||||||
.#{$pattern-prefix}-dots-#{$name} { |
|
||||||
background-image: radial-gradient(currentColor #{$size}, transparent #{$size}); |
|
||||||
background-size: calc(10 * #{$size}) calc(10 * #{$size}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-cross-dots-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'cross-dots') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $dots { |
|
||||||
.#{$pattern-prefix}-cross-dots-#{$name} { |
|
||||||
background-image: radial-gradient(currentColor #{$size}, transparent #{$size}), |
|
||||||
radial-gradient(currentColor #{$size}, transparent #{$size}); |
|
||||||
background-size: calc(20 * #{$size}) calc(20 * #{$size}); |
|
||||||
background-position: 0 0, |
|
||||||
calc(10 * #{$size}) calc(10 * #{$size}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
|
|
||||||
// .bg-vertical-lines-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'vertical-lines') { |
|
||||||
.#{$pattern-prefix}-vertical-lines-#{$name} { |
|
||||||
background-image: repeating-linear-gradient(to right, |
|
||||||
currentColor, |
|
||||||
currentColor 1px, |
|
||||||
transparent 1px, |
|
||||||
transparent); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-horizontal-lines-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'horizontal-lines') { |
|
||||||
.#{$pattern-prefix}-horizontal-lines-#{$name} { |
|
||||||
background-image: repeating-linear-gradient(0deg, |
|
||||||
currentColor, |
|
||||||
currentColor 1px, |
|
||||||
transparent 1px, |
|
||||||
transparent); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-diagonal-lines-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'diagonal-lines') { |
|
||||||
.#{$pattern-prefix}-diagonal-lines-#{$name} { |
|
||||||
background-image: repeating-linear-gradient(45deg, |
|
||||||
currentColor 0, |
|
||||||
currentColor 1px, |
|
||||||
transparent 0, |
|
||||||
transparent 50%); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
|
|
||||||
// .bg-vertical-stripes-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'vertical-stripes') { |
|
||||||
.#{$pattern-prefix}-vertical-stripes-#{$name} { |
|
||||||
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-horizontal-stripes-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'horizontal-stripes') { |
|
||||||
.#{$pattern-prefix}-horizontal-stripes-#{$name} { |
|
||||||
background-image: linear-gradient(0deg, transparent 50%, currentColor 50%); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-diagonal-stripes-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'diagonal-stripes') { |
|
||||||
.#{$pattern-prefix}-diagonal-stripes-#{$name} { |
|
||||||
background: repeating-linear-gradient(45deg, |
|
||||||
transparent, |
|
||||||
transparent #{$size}, |
|
||||||
currentColor #{$size}, |
|
||||||
currentColor calc(2 * #{$size})); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-zigzag-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'zigzag') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
.#{$pattern-prefix}-zigzag-#{$name} { |
|
||||||
background: linear-gradient(135deg, currentColor 25%, transparent 25%) -#{$size} 0, |
|
||||||
linear-gradient(225deg, currentColor 25%, transparent 25%) -#{$size} 0, |
|
||||||
linear-gradient(315deg, currentColor 25%, transparent 25%), |
|
||||||
linear-gradient(45deg, currentColor 25%, transparent 25%); |
|
||||||
background-size: calc(2 * #{$size}) calc(2 * #{$size}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .bg-triangles-{sm, md, lg, xl} |
|
||||||
@if index($pattern-list, 'triangles') { |
|
||||||
|
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
.#{$pattern-prefix}-triangles-#{$name} { |
|
||||||
background-image: linear-gradient(45deg, |
|
||||||
currentColor 50%, |
|
||||||
transparent 50%); |
|
||||||
background-size: #{$size} #{$size}; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// .text-pattern |
|
||||||
.text-pattern { |
|
||||||
background-clip: text; |
|
||||||
-webkit-text-fill-color: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
// Width and Height |
|
||||||
@each $name, |
|
||||||
$size in $pattern-sizes { |
|
||||||
.#{$pattern-prefix}-w-#{$name} { |
|
||||||
width: $size; |
|
||||||
} |
|
||||||
|
|
||||||
.#{$pattern-prefix}-h-#{$name} { |
|
||||||
height: $size; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
// Variables and mixins |
|
||||||
@import "variables"; |
|
||||||
@import "mixins"; |
|
||||||
|
|
||||||
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */ |
|
||||||
// Experimentals |
|
||||||
@import "autocomplete"; |
|
||||||
@import "calendars"; |
|
||||||
@import "carousels"; |
|
||||||
@import "comparison-sliders"; |
|
||||||
@import "filters"; |
|
||||||
@import "meters"; |
|
||||||
@import "off-canvas"; |
|
||||||
@import "parallax"; |
|
||||||
@import "progress"; |
|
||||||
@import "sliders"; |
|
||||||
@import "timelines"; |
|
||||||
@import "viewer-360"; |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// Variables and mixins |
|
||||||
@import "variables"; |
|
||||||
@import "mixins"; |
|
||||||
|
|
||||||
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */ |
|
||||||
// Icons |
|
||||||
@import "icons/icons-core"; |
|
||||||
@import "icons/icons-navigation"; |
|
||||||
@import "icons/icons-action"; |
|
||||||
@import "icons/icons-object"; |
|
||||||
@ -1,48 +0,0 @@ |
|||||||
// Variables and mixins |
|
||||||
@import "variables"; |
|
||||||
@import "mixins"; |
|
||||||
|
|
||||||
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */ |
|
||||||
// Reset and dependencies |
|
||||||
@import "normalize"; |
|
||||||
@import "base"; |
|
||||||
|
|
||||||
// Elements |
|
||||||
@import "typography"; |
|
||||||
@import "tables"; |
|
||||||
@import "buttons"; |
|
||||||
@import "forms"; |
|
||||||
@import "labels"; |
|
||||||
@import "codes"; |
|
||||||
@import "media"; |
|
||||||
|
|
||||||
// Layout |
|
||||||
@import "layout"; |
|
||||||
@import "hero"; |
|
||||||
@import "navbar"; |
|
||||||
|
|
||||||
// Components |
|
||||||
@import "accordions"; |
|
||||||
@import "avatars"; |
|
||||||
@import "badges"; |
|
||||||
@import "breadcrumbs"; |
|
||||||
@import "bars"; |
|
||||||
@import "cards"; |
|
||||||
@import "chips"; |
|
||||||
@import "dropdowns"; |
|
||||||
@import "empty"; |
|
||||||
@import "menus"; |
|
||||||
@import "modals"; |
|
||||||
@import "navs"; |
|
||||||
@import "pagination"; |
|
||||||
@import "panels"; |
|
||||||
@import "popovers"; |
|
||||||
@import "steps"; |
|
||||||
@import "tabs"; |
|
||||||
@import "tiles"; |
|
||||||
@import "toasts"; |
|
||||||
@import "tooltips"; |
|
||||||
|
|
||||||
// Utility classes |
|
||||||
@import "animations"; |
|
||||||
@import "utilities"; |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
// Text colors |
|
||||||
@include text-color-variant(".text-primary", $primary-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-secondary", $secondary-color-dark); |
|
||||||
|
|
||||||
@include text-color-variant(".text-gray", $gray-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-gray-dark", $gray-color-dark); |
|
||||||
|
|
||||||
@include text-color-variant(".text-light", $light-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-dark", $body-font-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-success", $success-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-warning", $warning-color); |
|
||||||
|
|
||||||
@include text-color-variant(".text-error", $error-color); |
|
||||||
|
|
||||||
// Background colors |
|
||||||
@include bg-color-variant(".bg-primary", $primary-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-secondary", $secondary-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-dark", $dark-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-gray", $bg-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-light-gray", $gray-color-light); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-dark-gray", $bg-color-dark); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-success", $success-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-warning", $warning-color); |
|
||||||
|
|
||||||
@include bg-color-variant(".bg-error", $error-color); |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
// Cursors |
|
||||||
.c-hand { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.c-move { |
|
||||||
cursor: move; |
|
||||||
} |
|
||||||
|
|
||||||
.c-zoom-in { |
|
||||||
cursor: zoom-in; |
|
||||||
} |
|
||||||
|
|
||||||
.c-zoom-out { |
|
||||||
cursor: zoom-out; |
|
||||||
} |
|
||||||
|
|
||||||
.c-not-allowed { |
|
||||||
cursor: not-allowed; |
|
||||||
} |
|
||||||
|
|
||||||
.c-auto { |
|
||||||
cursor: auto; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.clickable { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,44 +0,0 @@ |
|||||||
// Display |
|
||||||
.d-block { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.d-inline { |
|
||||||
display: inline; |
|
||||||
} |
|
||||||
.d-inline-block { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
.d-flex { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.d-inline-flex { |
|
||||||
display: inline-flex; |
|
||||||
} |
|
||||||
.d-none, |
|
||||||
.d-hide { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.d-visible { |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
.d-invisible { |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
.text-hide { |
|
||||||
background: transparent; |
|
||||||
border: 0; |
|
||||||
color: transparent; |
|
||||||
font-size: 0; |
|
||||||
line-height: 0; |
|
||||||
text-shadow: none; |
|
||||||
} |
|
||||||
.text-assistive { |
|
||||||
border: 0; |
|
||||||
clip: rect(0,0,0,0); |
|
||||||
height: 1px; |
|
||||||
margin: -1px; |
|
||||||
overflow: hidden; |
|
||||||
padding: 0; |
|
||||||
position: absolute; |
|
||||||
width: 1px; |
|
||||||
} |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
// Divider |
|
||||||
.divider, |
|
||||||
.divider-vert { |
|
||||||
display: block; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
&[data-content]::after { |
|
||||||
background: $bg-color-light; |
|
||||||
color: $gray-color; |
|
||||||
content: attr(data-content); |
|
||||||
display: inline-block; |
|
||||||
font-size: $font-size-sm; |
|
||||||
padding: 0 $unit-2; |
|
||||||
transform: translateY(-$font-size-sm + $border-width); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.divider { |
|
||||||
border-top: $border-width solid $border-color-light; |
|
||||||
height: $border-width; |
|
||||||
margin: $unit-2 0; |
|
||||||
|
|
||||||
&[data-content] { |
|
||||||
margin: $unit-4 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.divider-vert { |
|
||||||
display: block; |
|
||||||
padding: $unit-4; |
|
||||||
|
|
||||||
&::before { |
|
||||||
border-left: $border-width solid $border-color; |
|
||||||
bottom: $unit-2; |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
left: 50%; |
|
||||||
position: absolute; |
|
||||||
top: $unit-2; |
|
||||||
transform: translateX(-50%); |
|
||||||
} |
|
||||||
|
|
||||||
&[data-content]::after { |
|
||||||
left: 50%; |
|
||||||
padding: $unit-1 0; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
// Loading |
|
||||||
.loading { |
|
||||||
color: transparent !important; |
|
||||||
min-height: $unit-4; |
|
||||||
pointer-events: none; |
|
||||||
position: relative; |
|
||||||
&::after { |
|
||||||
animation: loading 500ms infinite linear; |
|
||||||
border: $border-width-lg solid $primary-color; |
|
||||||
border-radius: 50%; |
|
||||||
border-right-color: transparent; |
|
||||||
border-top-color: transparent; |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
height: $unit-4; |
|
||||||
left: 50%; |
|
||||||
margin-left: -$unit-2; |
|
||||||
margin-top: -$unit-2; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
width: $unit-4; |
|
||||||
z-index: $zindex-0; |
|
||||||
} |
|
||||||
|
|
||||||
&.loading-lg { |
|
||||||
min-height: $unit-10; |
|
||||||
&::after { |
|
||||||
height: $unit-8; |
|
||||||
margin-left: -$unit-4; |
|
||||||
margin-top: -$unit-4; |
|
||||||
width: $unit-8; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
// Position |
|
||||||
.clearfix { |
|
||||||
@include clearfix(); |
|
||||||
} |
|
||||||
|
|
||||||
.float-left { |
|
||||||
float: left !important; |
|
||||||
} |
|
||||||
|
|
||||||
.float-right { |
|
||||||
float: right !important; |
|
||||||
} |
|
||||||
|
|
||||||
.p-relative { |
|
||||||
position: relative !important; |
|
||||||
} |
|
||||||
|
|
||||||
.p-absolute { |
|
||||||
position: absolute !important; |
|
||||||
} |
|
||||||
|
|
||||||
.p-fixed { |
|
||||||
position: fixed !important; |
|
||||||
} |
|
||||||
|
|
||||||
.p-sticky { |
|
||||||
position: sticky !important; |
|
||||||
} |
|
||||||
|
|
||||||
.p-centered { |
|
||||||
display: block; |
|
||||||
float: none; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-centered { |
|
||||||
align-items: center; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
// Spacing |
|
||||||
@include margin-variant(0, 0); |
|
||||||
|
|
||||||
@include margin-variant(1, $unit-1); |
|
||||||
|
|
||||||
@include margin-variant(2, $unit-2); |
|
||||||
|
|
||||||
@include padding-variant(0, 0); |
|
||||||
|
|
||||||
@include padding-variant(1, $unit-1); |
|
||||||
|
|
||||||
@include padding-variant(2, $unit-2); |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
// Shapes |
|
||||||
.s-rounded { |
|
||||||
border-radius: $border-radius; |
|
||||||
} |
|
||||||
|
|
||||||
.s-circle { |
|
||||||
border-radius: 50%; |
|
||||||
} |
|
||||||
@ -1,64 +0,0 @@ |
|||||||
// Text |
|
||||||
// Text alignment utilities |
|
||||||
.text-left { |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
.text-right { |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
.text-center { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.text-justify { |
|
||||||
text-align: justify; |
|
||||||
} |
|
||||||
|
|
||||||
// Text transform utilities |
|
||||||
.text-lowercase { |
|
||||||
text-transform: lowercase; |
|
||||||
} |
|
||||||
|
|
||||||
.text-uppercase { |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
|
|
||||||
.text-capitalize { |
|
||||||
text-transform: capitalize; |
|
||||||
} |
|
||||||
|
|
||||||
// Text style utilities |
|
||||||
.text-normal { |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.text-bold { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.text-italic { |
|
||||||
font-style: italic; |
|
||||||
} |
|
||||||
|
|
||||||
.text-large { |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
|
|
||||||
// Text overflow utilities |
|
||||||
.text-ellipsis { |
|
||||||
@include text-ellipsis(); |
|
||||||
} |
|
||||||
|
|
||||||
.text-clip { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: clip; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.text-break { |
|
||||||
hyphens: auto; |
|
||||||
word-break: break-word; |
|
||||||
word-wrap: break-word; |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
import * as sapper from '@sapper/app'; |
|
||||||
|
|
||||||
sapper.start({ |
|
||||||
target: document.querySelector('#sapper') |
|
||||||
}); |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
<script> |
|
||||||
import Icon from './Icon.svelte'; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
@import 'sass/_variables'; |
|
||||||
|
|
||||||
#footer { |
|
||||||
border-top: 1px solid $primary-color; |
|
||||||
background-color: $gray-color; |
|
||||||
} |
|
||||||
|
|
||||||
#right-column { |
|
||||||
padding: 2rem; |
|
||||||
} |
|
||||||
|
|
||||||
#footer .panel { |
|
||||||
border: 0px; |
|
||||||
border-radius: 0px; |
|
||||||
font-size: 20px !important; |
|
||||||
text-shadow: 2px 2px $gray-color-dark; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
|
|
||||||
<div id="footer" class="columns col-gapless"> |
|
||||||
<div class="column col-8"> |
|
||||||
<div class="panel"> |
|
||||||
<div class="panel-header"> |
|
||||||
This website and all content is Copyright © Zed A. Shaw since 2020 and beyond. |
|
||||||
</div> |
|
||||||
<div class="panel-body"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="column col-4" id="right-column"> |
|
||||||
<a alt="Twitter @lzsthw" aria-label="Twitter @lzsthw" rel="external" href="https://twitter.com/lzsthw"><Icon size="48" name="twitter" light={true} /></a> |
|
||||||
<a alt="The git repository" aria-label="The git repository" rel="external" href="https://git.learnjsthehardway.com/zedshaw/buttons-computer"><Icon size="48" name="code" light={true} /></a> |
|
||||||
<a alt="Read the blog" aria-label="Read the blog" rel="external" href="https://git.learnjsthehardway.com/zedshaw/buttons-computer"><Icon size="48" name="book-open" light={true} /></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
<script> |
|
||||||
export let size="24"; |
|
||||||
export let fill="none"; |
|
||||||
export let color="#1f314d"; |
|
||||||
export let light=false; |
|
||||||
export let width="2"; |
|
||||||
export let linecap="round"; |
|
||||||
export let linejoin="round"; |
|
||||||
export let name; |
|
||||||
export let responsive=false; |
|
||||||
export let inactive=false; |
|
||||||
export let tooltip=""; |
|
||||||
export let tooltip_right=false; |
|
||||||
export let tooltip_bottom=false; |
|
||||||
export let tooltip_left=false; |
|
||||||
export let light_color="#f8f9f6"; |
|
||||||
export let code=""; |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
@import 'sass/_variables'; |
|
||||||
|
|
||||||
.inactive { |
|
||||||
stroke: $gray-color; |
|
||||||
fill: $gray-color-light; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<span class:tooltip="{tooltip !== ''}" class:tooltip-bottom="{ tooltip_bottom }" class:tooltip-left="{ tooltip_left }" class:tooltip-right={ tooltip_right } data-tooltip="{tooltip}"> |
|
||||||
{#if code} |
|
||||||
{ code } |
|
||||||
{:else} |
|
||||||
<svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}" |
|
||||||
width="{size}" |
|
||||||
height="{size}" |
|
||||||
fill="{fill}" |
|
||||||
stroke="{light ? light_color : color}" |
|
||||||
stroke-width="{width}" |
|
||||||
stroke-linecap="{linecap}" |
|
||||||
stroke-linejoin="{linejoin}" |
|
||||||
> |
|
||||||
<use xlink:href="/icons/feather-sprite.svg#{name}"/> |
|
||||||
</svg> |
|
||||||
{/if} |
|
||||||
</span> |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
<script> |
|
||||||
export let segment; |
|
||||||
import { goto } from '@sapper/app'; |
|
||||||
import Icon from './Icon.svelte'; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
@import "sass/_variables"; |
|
||||||
|
|
||||||
#logo { |
|
||||||
font-size: 24px; |
|
||||||
text-shadow: 2px 2px $gray-color-dark; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
background-color: $red !important; |
|
||||||
margin-left: 4px; |
|
||||||
border: 1px solid $black; |
|
||||||
height: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.navbar { |
|
||||||
background-color: $gray-color; |
|
||||||
min-height: 50px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<header class="navbar"> |
|
||||||
<section class="navbar-section"> |
|
||||||
<a class="navbar-brand mr-2" href="/"> |
|
||||||
<div id="logo">BUTTONS</div> |
|
||||||
</a> |
|
||||||
</section> |
|
||||||
|
|
||||||
<section class="navbar-section"> |
|
||||||
<a data-testid='nav-home-icon' rel="prefetch" class:btn-link="{ segment != undefined }" class="btn" href="/" alt="Home" aria-label="Home"> |
|
||||||
<Icon name="home" size="32" tooltip="Home" tooltip_bottom={true} light={true}/> |
|
||||||
</a> |
|
||||||
<a data-testid='nav-manual-icon' class:btn-link="{ segment != 'manual' }" class="btn" href="manual" alt="Read the manual" aria-label="Read the manual"> |
|
||||||
<Icon name="book-open" size="32" tooltip="Manual" tooltip_bottom={true} light={true} /> |
|
||||||
</a> |
|
||||||
</section> |
|
||||||
</header> |
|
||||||
|
|
||||||
@ -1,30 +0,0 @@ |
|||||||
<script> |
|
||||||
import { ButtonMachine } from 'buttons'; |
|
||||||
|
|
||||||
const ops = ButtonMachine.operations(); |
|
||||||
const registers = ButtonMachine.register_names(); |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
<b>HELP</b> |
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
OPERATIONS: |
|
||||||
|
|
||||||
{#each ops as op} |
|
||||||
{ op + '\n'} |
|
||||||
{/each} |
|
||||||
|
|
||||||
REGISTERS: |
|
||||||
{#each registers as reg} |
|
||||||
{ reg + '\n'} |
|
||||||
{/each} |
|
||||||
|
|
||||||
GOOD LUCK! |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
|
|
||||||
@ -1,40 +0,0 @@ |
|||||||
<script> |
|
||||||
export let status; |
|
||||||
export let error; |
|
||||||
|
|
||||||
const dev = process.env.NODE_ENV === 'development'; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
h1, p { |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
h1 { |
|
||||||
font-size: 2.8em; |
|
||||||
font-weight: 700; |
|
||||||
margin: 0 0 0.5em 0; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin: 1em auto; |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: 480px) { |
|
||||||
h1 { |
|
||||||
font-size: 4em; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<svelte:head> |
|
||||||
<title>{status}</title> |
|
||||||
</svelte:head> |
|
||||||
|
|
||||||
<h1>{status}</h1> |
|
||||||
|
|
||||||
<p>{error.message}</p> |
|
||||||
|
|
||||||
{#if dev && error.stack} |
|
||||||
<pre>{error.stack}</pre> |
|
||||||
{/if} |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
<script> |
|
||||||
import Footer from '../components/Footer.svelte'; |
|
||||||
import Nav from '../components/Nav.svelte'; |
|
||||||
import Sidebar from '../components/Sidebar.svelte'; |
|
||||||
export let segment; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
|
|
||||||
@import "sass/_variables"; |
|
||||||
|
|
||||||
#main { |
|
||||||
display: flex; |
|
||||||
flex: 1 0 auto; |
|
||||||
min-height: 100vh; |
|
||||||
flex-direction: column; |
|
||||||
padding-left: 0px; |
|
||||||
padding-right: 0px; |
|
||||||
min-width: 340px; |
|
||||||
border: 1px solid darken($green, 10%) !important; |
|
||||||
} |
|
||||||
|
|
||||||
#main_content { |
|
||||||
flex-grow: 1; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<div class="container grid-lg" id="main"> |
|
||||||
<div class="columns" id="nav"> |
|
||||||
<div class="column col-mx-auto"> |
|
||||||
<Nav {segment} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="container full-width" id="main_content"> |
|
||||||
<div class="columns"> |
|
||||||
<div class="column col-mx-auto"> |
|
||||||
<div class="off-canvas"> |
|
||||||
|
|
||||||
<div id="sidebar-id" class="off-canvas-sidebar"> |
|
||||||
<Sidebar /> |
|
||||||
</div> |
|
||||||
|
|
||||||
<a alt="Close sidebar" aria-label="Close sidebar" class="off-canvas-overlay" href="#close"> </a> |
|
||||||
|
|
||||||
<div class="off-canvas-content"> |
|
||||||
<slot></slot> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<Footer/> |
|
||||||
</div> |
|
||||||
@ -1,210 +0,0 @@ |
|||||||
<svelte:head> |
|
||||||
<title>Buttons the Computer</title> |
|
||||||
</svelte:head> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {goto, stores} from '@sapper/app'; |
|
||||||
import { ButtonMachine } from 'buttons'; |
|
||||||
import Icon from '../components/Icon.svelte'; |
|
||||||
const { session } = stores(); |
|
||||||
|
|
||||||
let code = [ |
|
||||||
['PUSH', -10], // start at -10 |
|
||||||
['STOR', 'AX'], |
|
||||||
['PUSH', 1], // increment by 1 |
|
||||||
['ADD'], |
|
||||||
['JZ', 5], // if we're at 0 jumps to the end |
|
||||||
['JUMP', 1] // the previous test fails so it jumps to loop again |
|
||||||
]; |
|
||||||
|
|
||||||
let machine = new ButtonMachine(code); |
|
||||||
|
|
||||||
let has_error = false; |
|
||||||
|
|
||||||
$: has_error = machine.error != ''; |
|
||||||
|
|
||||||
const data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']); |
|
||||||
|
|
||||||
const ops = ButtonMachine.operations(); |
|
||||||
const registers = ButtonMachine.register_names(); |
|
||||||
|
|
||||||
const change_op = (i, count) => { |
|
||||||
let cur_op = code[i][0]; |
|
||||||
let cur_index = ops.indexOf(cur_op); |
|
||||||
let new_index = (cur_index + count) < 0 ? ops.length - 1 : (cur_index + count) % ops.length; |
|
||||||
|
|
||||||
code[i][0] = ops[new_index]; |
|
||||||
} |
|
||||||
|
|
||||||
const op_has_data = (op) => data_ops.has(op); |
|
||||||
|
|
||||||
const run_machine = () => { |
|
||||||
machine.run(); |
|
||||||
machine = machine; // make svelte go |
|
||||||
} |
|
||||||
|
|
||||||
const step_machine = () => { |
|
||||||
machine.step(); |
|
||||||
machine = machine; |
|
||||||
} |
|
||||||
|
|
||||||
const reset_machine = () => { |
|
||||||
machine = new ButtonMachine(code); |
|
||||||
} |
|
||||||
|
|
||||||
const clone_line = (i) => { |
|
||||||
let clone = code[i]; |
|
||||||
// whew! clone the array without the 2nd one so it's empty |
|
||||||
code.splice(i+1, 0, [clone[0]]); |
|
||||||
code = code; |
|
||||||
} |
|
||||||
|
|
||||||
const delete_line = (i) => { |
|
||||||
let item = code.splice(i, 1); |
|
||||||
code = code; |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
@import "sass/_variables"; |
|
||||||
|
|
||||||
#status-panel { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
.active-line { |
|
||||||
background-color: $green !important; |
|
||||||
} |
|
||||||
|
|
||||||
.empty-data { |
|
||||||
width: 100%; |
|
||||||
background-color: lighten($primary-color, 40%); |
|
||||||
} |
|
||||||
|
|
||||||
.off-canvas-toggle { |
|
||||||
position: unset; |
|
||||||
z-index: unset; |
|
||||||
top: unset; |
|
||||||
left: unset; |
|
||||||
display: unset; |
|
||||||
transition: unset; |
|
||||||
padding: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
#reg-select { |
|
||||||
background-color: $gray; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
#reg-select select { |
|
||||||
background-color: $gray; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
#machine-state { |
|
||||||
font-size: 20px; |
|
||||||
overflow-x: none; |
|
||||||
white-space: pre-wrap; |
|
||||||
white-space: -moz-pre-wrap; |
|
||||||
white-space: -pre-wrap; |
|
||||||
white-space: -o-pre-wrap; |
|
||||||
word-wrap: break-word; |
|
||||||
} |
|
||||||
|
|
||||||
#machine-state code { |
|
||||||
color: lighten($green, 10%) !important; |
|
||||||
} |
|
||||||
|
|
||||||
#machine-state .error { |
|
||||||
color: lighten($red, 10%) !important; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<div class="container grid-lg" id="content" data-testid="buttons-page"> |
|
||||||
<div class="columns"> |
|
||||||
|
|
||||||
<div class="column col-6 col-sm-12 col-md-12 col-xs-12"> |
|
||||||
<a alt="Open/Close help sidebar" aria-label="Open/Close help sidebar" class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id"> |
|
||||||
?¿ |
|
||||||
</a> |
|
||||||
|
|
||||||
<button class="btn btn-primary" on:click={ run_machine }> |
|
||||||
<Icon code="►" tooltip="Run it" tooltip_right={ true } light={ true }/> |
|
||||||
</button> |
|
||||||
<button class="btn btn-primary" on:click={ step_machine }> |
|
||||||
<Icon code="→" tooltip="Step through" tooltip_right={ true } light={ true }/> |
|
||||||
</button> |
|
||||||
<button class="btn btn-primary" on:click={ reset_machine }> |
|
||||||
<Icon code="■" tooltip="Reset" light={ true }/> |
|
||||||
</button> |
|
||||||
|
|
||||||
<div class="divider"></div> |
|
||||||
{#each code as [op, data], i} |
|
||||||
<div class="input-group"> |
|
||||||
{#if has_error && machine.error_line == i} |
|
||||||
<Icon name="alert-triangle" color="red" /> |
|
||||||
{:else} |
|
||||||
{i}: |
|
||||||
{/if} |
|
||||||
|
|
||||||
<button class:active-line={ machine.ip == i } |
|
||||||
on:click={ () => change_op(i, +1) } |
|
||||||
on:contextmenu|preventDefault={ () => change_op(i, -1) } |
|
||||||
class="btn btn-primary input-group-btn">{op}</button> |
|
||||||
|
|
||||||
{#if op_has_data(op)} |
|
||||||
{#if op === 'STOR' || op === 'RSTOR'} |
|
||||||
<div class="form-group" id="reg-select"> |
|
||||||
<select class="form-select" bind:value={data}> |
|
||||||
{#each registers as reg} |
|
||||||
<option>{reg}</option> |
|
||||||
{/each} |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
{:else if op == 'HALT'} |
|
||||||
<input class:active-line={ machine.ip == i } |
|
||||||
type="text" class="form-input" placeholder="register" bind:value={data}> |
|
||||||
{:else} |
|
||||||
<input class:active-line={ machine.ip == i } |
|
||||||
type="number" class="form-input" placeholder="data" bind:value={data}> |
|
||||||
{/if} |
|
||||||
{:else} |
|
||||||
<div class:active-line={ machine.ip == i } class="empty-data"></div> |
|
||||||
{/if} |
|
||||||
|
|
||||||
<button class="btn btn-primary input-group-addon" |
|
||||||
on:click={ () => clone_line(i) }> |
|
||||||
<Icon name="copy" tooltip='Clone it'/> |
|
||||||
</button> |
|
||||||
<button class="btn btn-primary input-group-addon" |
|
||||||
on:click={ () => delete_line(i) }> |
|
||||||
<Icon name="delete" tooltip='Delete it'/> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="column col-6 col-sm-12 col-md-12 col-xs-12" id="status-panel"> |
|
||||||
<pre id="machine-state"> |
|
||||||
<code> |
|
||||||
█LINE {machine.ip} █TICK { machine.tick} |
|
||||||
{#if machine.halted }<span class="error">HALT! { machine.error }</span>{/if} |
|
||||||
|
|
||||||
╞ STACK ╡ |
|
||||||
────────────────── |
|
||||||
{#each [...machine.stack].reverse() as datum, i} |
|
||||||
{#if i == 0}→{i}▐ {datum + '\n'} |
|
||||||
{:else}───────── |
|
||||||
▌{i}▐ {datum + '\n'}{/if} |
|
||||||
{/each} |
|
||||||
|
|
||||||
╞ REGISTERS ╡ |
|
||||||
────────────────── |
|
||||||
{#each registers as reg } |
|
||||||
[{ reg }]={ (machine.registers[reg] !== undefined ? machine.registers[reg] : '█') + '\n'} |
|
||||||
{/each} |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,335 +0,0 @@ |
|||||||
<script> |
|
||||||
import {goto, stores} from '@sapper/app'; |
|
||||||
import Icon from '../components/Icon.svelte'; |
|
||||||
</script> |
|
||||||
|
|
||||||
<svelte:head> |
|
||||||
<title>Buttons the Computer - The Manual</title> |
|
||||||
</svelte:head> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
@import "sass/_variables"; |
|
||||||
#content { |
|
||||||
margin-top: 1rem; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
code { |
|
||||||
font-size: 20px; |
|
||||||
text-shadow: 2px 2px $gray-color; |
|
||||||
color: lighten($green, 20%); |
|
||||||
} |
|
||||||
|
|
||||||
blockquote { |
|
||||||
color: $green; |
|
||||||
background: $gray-color-dark; |
|
||||||
font-family: 'Tandy1KMono'; |
|
||||||
text-shadow: 2px 2px $black; |
|
||||||
} |
|
||||||
|
|
||||||
pre code { |
|
||||||
color: lighten($green, 20%); |
|
||||||
background: $gray-color-dark; |
|
||||||
font-family: 'Tandy1KMono'; |
|
||||||
text-shadow: 2px 2px $black; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<div class="container grid-lg" id="content" data-testid="manual-page"> |
|
||||||
<div class="columns"> |
|
||||||
<div class="column col-12"> |
|
||||||
|
|
||||||
<h1>Pushing BUTTONS</h1> |
|
||||||
|
|
||||||
<p> |
|
||||||
<code>BUTTONS</code> is a tiny computer that you can program entirely with a 2 button mouse by clicking on buttons. |
|
||||||
It features all of the operations you need to learn about computers and how they process numbers. All you need to |
|
||||||
do is click on the right buttons and make <code>BUTTONS</code> do the math. |
|
||||||
</p> |
|
||||||
|
|
||||||
<h2>Stacking Plates</h2> |
|
||||||
|
|
||||||
<p>Imagine if I handed you a stack of dinner plates and told you to |
|
||||||
number each one. I give you a grease pen and a <code>STACK</code> of 10 |
|
||||||
plates and tell you to get to work. How would you number these plates? |
|
||||||
When you were done how would the plates be stacked? Let's call the |
|
||||||
unnumbered plates <code>new plates</code> and your stack of numbered |
|
||||||
plates <code>done plates</code>.</p> |
|
||||||
|
|
||||||
<p>You would probably take the first plate off the top of the stack of |
|
||||||
<code>new plates</code>, write the number <code>1</code> on it, and then set it to the |
|
||||||
side in the <code>done plates</code> stack. You can't put it back on the |
|
||||||
<code>new plates</code> stack of plates because then you wouldn't make |
|
||||||
your way through the plates. You take one off the <code>top</code> of |
|
||||||
the <code>new plates</code>, write the number <code>2</code>, and put it |
|
||||||
on <code>top</code> of the stack of plates called <code>done |
|
||||||
plates</code>. You then do this with #3, #4, #5, until you are done |
|
||||||
going through all 10 plates.</p> |
|
||||||
|
|
||||||
<p>You then look over at your stack of numbered <code>done plates</code> |
|
||||||
and you're happy, but the plate on <code>top</code> is numbered 10. |
|
||||||
You've stacked them in reverse, and you probably need to re-stack them in |
|
||||||
order. How would you do that? Well, you simply take one off the top of |
|
||||||
the <code>done stack</code> and put it onto another stack (let's call |
|
||||||
that <code>sorted</code>) until you're out of plates. Now <code>sorted |
|
||||||
stack</code> is numbered 1-10, with 1 on <code>top</code>.</p> |
|
||||||
|
|
||||||
<p>Try this with 10 pieces of paper instead of dinner plates. Cut up 10 little cards that do |
|
||||||
<b>not</b> have numbers on them, and then write the numbers 1-10 on each piece of paper and stack |
|
||||||
it just like above. Then restack them again to get them in the sorted order. <b>This</b> is a |
|
||||||
stack and it's used in computers and in <code>BUTTONS</code>.</p> |
|
||||||
|
|
||||||
<h2>PUSH & POP</h2> |
|
||||||
|
|
||||||
<p>The way <code>BUTTONS</code> remembers what it's doing is with a |
|
||||||
<code>STACK</code>. A <code>STACK</code> is a very simple storage system |
|
||||||
that takes numbers one at a time and puts them on top of each other, just |
|
||||||
like with the dinner plates in the previous explanation. Numbers are |
|
||||||
pushed onto <code>BUTTONS'</code> version of a <code>STACK</code> and the |
|
||||||
<b>last one in is the first one out</b>.</p> |
|
||||||
|
|
||||||
<blockquote><Icon name="alert-circle" color="#f00" /> |
|
||||||
You should go get a note book and write these things down. Be sure to |
|
||||||
write, "A stack is a last in, first out number storage. The last number |
|
||||||
I push onto the stack is the first number to come out." I say this |
|
||||||
because I actually got this wrong in the first implementation of the |
|
||||||
stack, so if I can get it wrong, so can you.</blockquote> |
|
||||||
|
|
||||||
<p>You <code>PUSH</code> numbers onto the <code>STACK</code>, then call |
|
||||||
other operations (<code>ADD</code> for example) to make |
|
||||||
<code>BUTTONS</code> do math on them. When you <code>PUSH</code> you |
|
||||||
have to give it the number it should push onto the <code>top</code> of |
|
||||||
the <code>STACK</code>. On the right you'll then see |
|
||||||
<code>BUTTONS</code> show that number under the <code>STACK</code> |
|
||||||
output. </p> |
|
||||||
|
|
||||||
<p>The <code>POP</code> operation simple takes any number that's on the <code>top</code> of |
|
||||||
the <code>STACK</code> and removes it. Junks it. Throws it away. If you try to <code>POP</code> |
|
||||||
too much your <code>BUTTONS</code> will crash. Don't do that.</p> |
|
||||||
|
|
||||||
<h2>Math</h2> |
|
||||||
|
|
||||||
<p>You can now <code>PUSH</code> numbers onto the <code>STACK</code> and use <code>POP</code> to take |
|
||||||
them off. Big deal. That's not a computer...yet. The next piece of our puzzle game is to let you do <b>math</b> |
|
||||||
with these numbers on the <code>STACK</code>. <code>BUTTONS</code> has the following simple operations:</p> |
|
||||||
|
|
||||||
<table class="table"> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>OPERATION</th><th>MATH</th><th>DESCRIPTION</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td><code>ADD</code></td> <td>a + b</td> <td>Adds two numbers</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>SUB</code></td> <td>a - b</td> <td>Subtracts two numbers</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>MUL</code></td> <td>a * b</td> <td>Multiplies two numbers</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>DIV</code></td> <td>a / b</td> <td>Divides two numbers</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>MOD</code></td> <td>a % b</td> <td>Modulus of two numbers</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
|
|
||||||
<p>The order of each operation is the same, with <b>a</b> being |
|
||||||
<code>PUSH</code> on first, then <b>b</b>. That means when you're done |
|
||||||
your <b>b</b> number should be on the <code>top</code> of the |
|
||||||
<code>STACK</code>. Here's how I would add <code>1 + 2</code>:</p> |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 1 |
|
||||||
1: PUSH 2 |
|
||||||
2: ADD |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>When you run these lines of code in <code>BUTTONS</code> the number <code>3</code> will be at the top of the stack |
|
||||||
ready to use. You can also try <code>POP</code> to remove it and see how that works.</p> |
|
||||||
|
|
||||||
|
|
||||||
<blockquote><Icon name="alert-circle" color="#f00" /> |
|
||||||
When you see the <code>0:</code> at the front of the line that's the line number. It's not code, just me being lazy and not wanting to implement line numbers in fancy CSS. |
|
||||||
</blockquote> |
|
||||||
|
|
||||||
<h2>CLICKS</h2> |
|
||||||
|
|
||||||
<p>Before we get into loops I have to warn you that <code>BUTTONS</code> |
|
||||||
is not a very powerful computer. It can only perform <code>128</code> |
|
||||||
operations before it runs out of energy called <code>CLICKS</code>. If |
|
||||||
your program runs for 128 many clicks then <code>BUTTONS</code> will stop |
|
||||||
running and give up because it is tired.</p> |
|
||||||
|
|
||||||
<h2>Looping with JUMP</h2> |
|
||||||
|
|
||||||
<p>To make a computer we need a way to repeatedly run code so we can do many calculations. <code>BUTTONS</code> has |
|
||||||
the operation <code>JUMP</code> that will jump to the line you give, then keep running. If I want to run a loop that counts from 1 to 128 I can do this in <code>BUTTONS</code>: |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 1 |
|
||||||
1: PUSH 1 |
|
||||||
2: ADD |
|
||||||
3: JUMP 1 |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>You really should <b>study</b> this simple little program because inside it's simplicity is an incredibly powerful idea. Here's some questions to ask while you study:</p> |
|
||||||
|
|
||||||
|
|
||||||
<ol> |
|
||||||
<li>Why do I do <code>JUMP 1</code> instead of <code>JUMP 2</code> to reach the <b>second</b> line?</li> |
|
||||||
<li>Step through the code and write down what the top of the stack is at each step.</li> |
|
||||||
<li>If you want to go up by a different count what do you do?</li> |
|
||||||
<li>How does this work with <code>SUB, DIV, MUL, and MOD</code> operations?</li> |
|
||||||
</ol> |
|
||||||
|
|
||||||
<p>Play with this code in <code>BUTTONS</code> until you understand what's going on because if you don't get |
|
||||||
<code>JUMP</code> then you <b>definitely</b> won't understand the next section.</p> |
|
||||||
|
|
||||||
<blockquote><Icon name="alert-circle" color="#f00" /> |
|
||||||
You can also <code>JUMP</code> one line <b>past</b> the end of your code to end your program. That means if you have 4 lines of code, then you can do <code>JUMP 5</code> and end your program. This becomes important later so write this down in your notebook too. |
|
||||||
</blockquote> |
|
||||||
|
|
||||||
<h2>Logic with JZ/JNZ</h2> |
|
||||||
|
|
||||||
<p>You now know how to make <code>BUTTONS</code> do math, use the <code>STACK</code>, and do a loop to do lots of math. There's <b>one</b> last thing we need before we have a real working computer and that's the idea of a <code>test</code> and jumping only if that test is true (or false).</p> |
|
||||||
|
|
||||||
|
|
||||||
<p>Let's say you have the following code that counts <b>down</b> from 10 to 0:</p> |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 10 |
|
||||||
1: PUSH 1 |
|
||||||
2: SUB |
|
||||||
3: JUMP 1 |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>You run it, thinking it will stop at zero, and instead |
|
||||||
<code>BUTTONS</code> does exactly what you told it to do and keeps going |
|
||||||
until it runs out of <code>CLICKS</code>, leaving .... <code>-32</code> on |
|
||||||
the top? What?!</p> |
|
||||||
|
|
||||||
<p>The reason is you have no way to tell <code>BUTTONS</code> when to stop. You can tell it to do the math and where to <code>JUMP</code> but you have no way to tell buttons "when you reach 0 on the <code>STACK</code> you should stop." You do this with the <code>JZ</code> operation which means "<code>JUMP if Zero</code>". It simply looks at the top of the <code>STACK</code> and if that's 0 then it does a <code>JUMP</code> to where you want. This is doing a test of the top of stack, and a jump. Now we can rewrite our program like this:</p> |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 10 |
|
||||||
1: PUSH 1 |
|
||||||
2: SUB |
|
||||||
3: JZ 5 |
|
||||||
4: JUMP 1 |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>See how line 3 is now <code>JZ 5</code>, but right after that on line |
|
||||||
4 we have <code>JUMP 1</code>? This seems very backwards, but we have to do this because we want |
|
||||||
line 3 to <b>only</b> <code>JUMP 1</code> to the end (line 5 is the end) when the <code>STACK</code> |
|
||||||
is 0. It's working as a "guard" that prevents line 4 <code>JUMP 1</code> from running when the <code>STACK</code> |
|
||||||
is 0. Another way to see this is it will "jump over" line 4 <code>JUMP 1</code> when the <code>STACK</code> is 0.</p> |
|
||||||
|
|
||||||
<p>We can simplify this by using another operation called <code>JNZ</code> which does the inverse of <code>JZ</code> and "jumps if <b>NOT</b> zero". Using this operation we can now have:</p> |
|
||||||
|
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 10 |
|
||||||
1: PUSH 1 |
|
||||||
2: SUB |
|
||||||
3: JNZ 1 |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>Instead of that weird "jump over the next line that's a jump if the |
|
||||||
stack is zero" in the previous program, we have "jump to line 1 if stack |
|
||||||
is not zero". Way easier to do, but keep in mind you many times need |
|
||||||
both. Both effectively do the same thing but it's sometimes easier to use |
|
||||||
one or the other (<code>JZ</code> vs. <code>JNZ</code>) depending on how |
|
||||||
you're doing the operation.</p> |
|
||||||
|
|
||||||
<h2>STOR/RSTOR Registers</h2> |
|
||||||
|
|
||||||
<p>You technically can do all of the computation you need with just that (minus input and output), but it's really annoying and hard to do much more than add some numbers in loops. To make it possible to implement larger more complex prgrams in <code>BUTTONS</code> you have four <code>REGISTERS</code> where you can keep temporary variables for later: <code>AX, BX, CX, DX</code>. I named them this way just for old time's sake, and to keep things simple. You put things into these registers (and take them out) using the <code>STOR</code> and <code>RSTOR</code> (for "restore") operations:</p> |
|
||||||
|
|
||||||
<table class="table"> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>OPERATION</th><th>DESCRIPTION</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td><code>STOR</code></td><td><b>Copies</b> the <code>STACK</code> top to the named register.</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>RSTOR</code></td><td><code>PUSH</code> the number in the named register onto the <code>STACK</code>.</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
|
|
||||||
<p>Let's say I want to count down like before, but I want to keep track of the previous number as you go. I don't know why. You just do. Ok, here's how:</p> |
|
||||||
|
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 10 |
|
||||||
1: STOR AX |
|
||||||
2: PUSH 1 |
|
||||||
3: SUB |
|
||||||
4: JNZ 1 |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>Now as you step through this program you can watch the <code>AX</code> register keep the previous stack top as it goes. Let's say you want to keep the initial value you started with for after the loop:</p> |
|
||||||
|
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
0: PUSH 10 |
|
||||||
1: STOR AX |
|
||||||
2: PUSH 1 |
|
||||||
3: SUB |
|
||||||
4: JNZ 2 |
|
||||||
5: RSTOR AX |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<p>Now I do <code>JNZ 2</code> instead so that I <b>avoid</b> the <code>01: STOR AX</code> line, that does the loop like before but now the <code>AX</code> register has my starting number. After line <code>4: JNZ 2</code> passes I then use <code>RSTOR AX</code> to get that number back, and the program ends with two numbers on the stack: <code>10</code> and <code>0</code>.</p> |
|
||||||
|
|
||||||
|
|
||||||
<h2>Other Operations</h2> |
|
||||||
|
|
||||||
<p>You can also use these operations to do other things:</p> |
|
||||||
|
|
||||||
<table class="table"> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>OPERATION</th><th>DESCRIPTION</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td><code>CLR</code></td><td>Clears <code>BUTTONS</code>. Good for debugging.</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td><code>HALT</code></td><td>Stop the computer with a message.</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
|
|
||||||
<h2>What About Input and Output?</h2> |
|
||||||
|
|
||||||
<p>Astute readers will notice I have no way to input a number from the world, and output a number (or character) to the screen. That's because I did this whole project in about 3 days while playing video games and I'm not sure how to make a fancy looking retro CRT screen. I'll get to that part eventually.</p> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import sirv from 'sirv'; |
|
||||||
import polka from 'polka'; |
|
||||||
import compression from 'compression'; |
|
||||||
import * as sapper from '@sapper/server'; |
|
||||||
|
|
||||||
const { PORT, NODE_ENV } = process.env; |
|
||||||
const dev = NODE_ENV === 'development'; |
|
||||||
|
|
||||||
polka() // You can also use Express
|
|
||||||
.use( |
|
||||||
compression({ threshold: 0 }), |
|
||||||
sirv('static', { dev }), |
|
||||||
sapper.middleware() |
|
||||||
) |
|
||||||
.listen(PORT, err => { |
|
||||||
if (err) console.log('error', err); |
|
||||||
}); |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
import { timestamp, files, shell, routes } from '@sapper/service-worker'; |
|
||||||
|
|
||||||
const ASSETS = `cache${timestamp}`; |
|
||||||
|
|
||||||
// `shell` is an array of all the files generated by the bundler,
|
|
||||||
// `files` is an array of everything in the `static` directory
|
|
||||||
const to_cache = shell.concat(files); |
|
||||||
const cached = new Set(to_cache); |
|
||||||
|
|
||||||
self.skipWaiting(); |
|
||||||
|
|
||||||
self.addEventListener('install', event => { |
|
||||||
event.waitUntil( |
|
||||||
caches |
|
||||||
.open(ASSETS) |
|
||||||
.then(cache => cache.addAll(to_cache)) |
|
||||||
.then(() => { |
|
||||||
self.skipWaiting(); |
|
||||||
}) |
|
||||||
); |
|
||||||
}); |
|
||||||
|
|
||||||
self.addEventListener('activate', event => { |
|
||||||
event.waitUntil( |
|
||||||
caches.keys().then(async keys => { |
|
||||||
// delete old caches
|
|
||||||
for (const key of keys) { |
|
||||||
if (key !== ASSETS) await caches.delete(key); |
|
||||||
} |
|
||||||
|
|
||||||
self.clients.claim(); |
|
||||||
}) |
|
||||||
); |
|
||||||
}); |
|
||||||
|
|
||||||
if(false) { |
|
||||||
|
|
||||||
self.addEventListener('fetch', event => { |
|
||||||
if (event.request.method !== 'GET' || event.request.headers.has('range')) return; |
|
||||||
|
|
||||||
const url = new URL(event.request.url); |
|
||||||
|
|
||||||
// don't try to handle e.g. data: URIs
|
|
||||||
if (!url.protocol.startsWith('http')) return; |
|
||||||
|
|
||||||
// ignore dev server requests
|
|
||||||
if (url.hostname === self.location.hostname && url.port !== self.location.port) return; |
|
||||||
|
|
||||||
// always serve static files and bundler-generated assets from cache
|
|
||||||
if (url.host === self.location.host && cached.has(url.pathname)) { |
|
||||||
event.respondWith(caches.match(event.request)); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
// for pages, you might want to serve a shell `service-worker-index.html` file,
|
|
||||||
// which Sapper has generated for you. It's not right for every
|
|
||||||
// app, but if it's right for yours then uncomment this section
|
|
||||||
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { |
|
||||||
event.respondWith(caches.match('/service-worker-index.html')); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
if (event.request.cache === 'only-if-cached') return; |
|
||||||
|
|
||||||
// for everything else, try the network first, falling back to
|
|
||||||
// cache if the user is offline. (If the pages never change, you
|
|
||||||
// might prefer a cache-first approach to a network-first one.)
|
|
||||||
event.respondWith( |
|
||||||
caches |
|
||||||
.open(`offline${timestamp}`) |
|
||||||
.then(async cache => { |
|
||||||
try { |
|
||||||
const response = await fetch(event.request, {credentials: 'same-origin'}); |
|
||||||
cache.put(event.request, response.clone()); |
|
||||||
return response; |
|
||||||
} catch(err) { |
|
||||||
const response = await cache.match(event.request); |
|
||||||
if (response) return response; |
|
||||||
|
|
||||||
throw err; |
|
||||||
} |
|
||||||
}) |
|
||||||
); |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
<!doctype html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|
||||||
<meta name="theme-color" content="#333333"> |
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/spectre.min.css"> |
|
||||||
<link rel="stylesheet" href="/css/spectre-exp.min.css"> |
|
||||||
<link rel="stylesheet" href="/css/spectre-icons.min.css"> |
|
||||||
<link rel="stylesheet" href="/css/pattern.min.css"> |
|
||||||
|
|
||||||
|
|
||||||
%sapper.base% |
|
||||||
|
|
||||||
<link rel="manifest" href="manifest.json" crossorigin="use-credentials"> |
|
||||||
<link rel="icon" type="image/png" href="favicon.png"> |
|
||||||
|
|
||||||
<!-- Sapper creates a <script> tag containing `src/client.js` |
|
||||||
and anything else it needs to hydrate the app and |
|
||||||
initialise the router --> |
|
||||||
%sapper.scripts% |
|
||||||
|
|
||||||
<!-- Sapper generates a <style> tag containing critical CSS |
|
||||||
for the current page. CSS for the rest of the app is |
|
||||||
lazily loaded when it precaches secondary pages --> |
|
||||||
%sapper.styles% |
|
||||||
|
|
||||||
<!-- This contains the contents of the <svelte:head> component, if |
|
||||||
the current page has one --> |
|
||||||
%sapper.head% |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<!-- The application will be rendered inside this element, |
|
||||||
because `src/client.js` references it --> |
|
||||||
<div id="sapper">%sapper.html%</div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue