Browse Source

Goodby V1.

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

6
.gitignore

@ -1,7 +1,3 @@
.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/cypress/screenshots/
/__sapper__/
node_modules
.*.sw*

113
__tests__/buttons.spec.js

@ -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.');
});

4
cypress.json

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

5
cypress/fixtures/example.json

@ -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"
}

19
cypress/integration/spec.js

@ -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');
});
});

17
cypress/plugins/index.js

@ -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
}

25
cypress/support/commands.js

@ -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) => { ... })

20
cypress/support/index.js

@ -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')

20
ecosystem.config.js

@ -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'
}
},
],
};

35
gulpfile.js

@ -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
};

7448
package-lock.json

File diff suppressed because it is too large

45
package.json

@ -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"
}
}

111
rollup.config.js

@ -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,
}
};

38
sass/_accordions.scss

@ -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;
}
}

20
sass/_animations.scss

@ -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);
}
}

47
sass/_autocomplete.scss

@ -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;
}
}
}

77
sass/_avatars.scss

@ -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;
}
}

60
sass/_badges.scss

@ -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;
}
}
}

71
sass/_bars.scss

@ -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;
}
}
}

40
sass/_base.scss

@ -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;
}
}

29
sass/_breadcrumbs.scss

@ -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;
}
}
}
}

198
sass/_buttons.scss

@ -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;
}
}
}

222
sass/_calendars.scss

@ -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;
}
}
}

43
sass/_cards.scss

@ -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;
}
}
}
}

136
sass/_carousels.scss

@ -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%);
}
}

33
sass/_chips.scss

@ -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);
}
}

31
sass/_codes.scss

@ -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%;
}
}

115
sass/_comparison-sliders.scss

@ -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;