use node modules sass + sass lint + allow color preset 'whitesmoke'
This commit is contained in:
thecozies
parent
a215605b5d
commit
9a23d00a36
File diff suppressed because one or more lines are too long
|
|
@ -30,7 +30,7 @@
|
|||
"color-no-hex": true,
|
||||
"function-url-quotes": "always",
|
||||
"max-nesting-depth": [
|
||||
3,
|
||||
4,
|
||||
{
|
||||
"ignoreAtRules": ["each", "media", "supports", "include"],
|
||||
"severity": "warning"
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
"scss/selector-no-redundant-nesting-selector": null,
|
||||
"selector-class-pattern": null,
|
||||
"selector-max-compound-selectors": [
|
||||
3,
|
||||
4,
|
||||
{
|
||||
"severity": "warning"
|
||||
}
|
||||
|
|
@ -83,12 +83,17 @@
|
|||
"scss/dollar-variable-empty-line-before": null,
|
||||
"scss/dollar-variable-pattern": "[a-z-]",
|
||||
"scss/at-import-partial-extension": null,
|
||||
"declaration-block-no-redundant-longhand-properties": [true, { "severity": "warning" }],
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"color-function-notation": null,
|
||||
"alpha-value-notation": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"property-no-unknown": null,
|
||||
"scss/at-rule-no-unknown": true,
|
||||
"selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["selected"] }],
|
||||
"font-family-no-missing-generic-family-keyword": null,
|
||||
"scss/no-global-function-names": null,
|
||||
"unit-no-unknown": [true, { "ignoreUnits": ["dp"] }]
|
||||
"unit-no-unknown": [true, { "ignoreUnits": ["dp"] }],
|
||||
"selector-type-no-unknown": [true, { "ignore": ["custom-elements", "default-namespace"] }],
|
||||
"value-keyword-case": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
"name": "mmrecomp-ui-scss",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"sass": "^1.75.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"postcss-scss": "^4.0.9",
|
||||
"stylelint": "^15.11.0",
|
||||
|
|
@ -225,6 +228,18 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
|
|
@ -264,6 +279,17 @@
|
|||
"integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
|
@ -284,7 +310,6 @@
|
|||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
},
|
||||
|
|
@ -345,6 +370,29 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
|
@ -593,7 +641,6 @@
|
|||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
|
|
@ -643,6 +690,19 @@
|
|||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
|
|
@ -676,7 +736,6 @@
|
|||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
|
|
@ -799,6 +858,11 @@
|
|||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
|
||||
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -882,6 +946,17 @@
|
|||
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.13.1",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
|
||||
|
|
@ -898,7 +973,6 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -916,7 +990,6 @@
|
|||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
},
|
||||
|
|
@ -928,7 +1001,6 @@
|
|||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
|
|
@ -1210,7 +1282,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -1321,7 +1392,6 @@
|
|||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
|
|
@ -1515,6 +1585,17 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redent": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
|
||||
|
|
@ -1597,6 +1678,22 @@
|
|||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.75.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
|
||||
"integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.5.4",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
|
||||
|
|
@ -1687,7 +1784,6 @@
|
|||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -2047,7 +2143,6 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "npm run watch",
|
||||
"watch": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss --watch",
|
||||
"watch-debug": "sass --no-source-map main.scss ..\\recomp.rcss --watch",
|
||||
"build": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss",
|
||||
"watch": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss --watch",
|
||||
"watch:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss --watch",
|
||||
"build": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss",
|
||||
"build:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss",
|
||||
"lint": "stylelint '.\\**\\*.scss'"
|
||||
},
|
||||
"author": "",
|
||||
|
|
@ -21,5 +22,8 @@
|
|||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-config-standard-scss": "^11.1.0",
|
||||
"stylelint-scss": "^5.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.75.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
.bottom-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
bottom: space(4);
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
height: auto;
|
||||
bottom: space(4);
|
||||
margin: 0 space(4);
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: auto;
|
||||
margin: 0 space(4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@use 'sass:color';
|
||||
|
||||
@mixin create-button-variation($base-col) {
|
||||
border-color: rgba($base-col, 0.8);
|
||||
background-color: rgba($base-col, 0.05);
|
||||
color: $color-text-dim;
|
||||
border-color: rgba($base-col, 0.8);
|
||||
|
||||
&:focus, &:hover {
|
||||
color: $color-text;
|
||||
border-color: $base-col;
|
||||
background-color: rgba($base-col, 0.3);
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
|
|
@ -28,13 +28,13 @@
|
|||
@include trans-colors;
|
||||
|
||||
display: block;
|
||||
// leave 1dp room for border expansion
|
||||
padding: space(24 - 1);
|
||||
|
||||
border-radius: $border-radius-md;
|
||||
border-width: $border-width-thickness;
|
||||
width: auto;
|
||||
height: auto;
|
||||
// leave 1dp room for border expansion
|
||||
padding: space(24 - 1);
|
||||
border-width: $border-width-thickness;
|
||||
|
||||
border-radius: $border-radius-md;
|
||||
|
||||
// Setting it by default for convenience
|
||||
// &--primary {
|
||||
|
|
|
|||
|
|
@ -15,27 +15,27 @@
|
|||
.centered-page__modal {
|
||||
@extend %nav-all;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
flex: 1 1 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: 100%;
|
||||
background: $color-modal-overlay;
|
||||
margin: auto;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-modal;
|
||||
border-color: $color-border;
|
||||
border-width: $border-width-thickness;
|
||||
background: $color-modal-overlay;
|
||||
|
||||
> .tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
flex: 1 1 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
panels {
|
||||
|
|
@ -45,15 +45,15 @@
|
|||
|
||||
.centered-page__controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
bottom: space(24);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
bottom: space(24);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
> label {
|
||||
@extend %label-sm;
|
||||
|
|
|
|||
|
|
@ -8,30 +8,29 @@
|
|||
.config__form {
|
||||
@include border-top($color-border-soft);
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
}
|
||||
|
||||
.config__wrapper {
|
||||
border-radius: 0dp;
|
||||
flex: 1 1 100%;
|
||||
height: 100%;
|
||||
padding: space(16);
|
||||
text-align: left;
|
||||
background-color: $color-bg-shadow;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: space(16);
|
||||
border-radius: 0dp;
|
||||
background-color: $color-bg-shadow;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
@extend %body;
|
||||
padding: space(16);
|
||||
white-space: pre-line;
|
||||
line-height: space(28);
|
||||
white-space: pre-line;
|
||||
|
||||
b {
|
||||
color: $color-primary;
|
||||
|
|
@ -41,18 +40,18 @@
|
|||
|
||||
.config__hz-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 0dp;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0dp;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.config__header, .config__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background-color: $color-bg-shadow;
|
||||
}
|
||||
|
|
@ -65,14 +64,14 @@
|
|||
.config__footer {
|
||||
@include border-top($color-border-soft);
|
||||
padding: space(20) space(20);
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
}
|
||||
|
||||
.config__header-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
|
||||
> :not(:first-child) {
|
||||
margin-left: space(8);
|
||||
|
|
@ -86,8 +85,8 @@
|
|||
|
||||
.config-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin: space(16) space(0) space(24);
|
||||
|
|
@ -104,12 +103,12 @@
|
|||
|
||||
.config-option__list {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
|
||||
input:first-of-type {
|
||||
nav-left: none;
|
||||
|
|
@ -124,15 +123,15 @@
|
|||
@include trans-colors-opa;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: space(8) 0;
|
||||
height: auto;
|
||||
margin: space(4) space(12) 0;
|
||||
padding: space(8) 0;
|
||||
color: $color-text-inactive;
|
||||
tab-index: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,8 +155,8 @@
|
|||
|
||||
.rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
|
||||
animation: $focus-anim-border;
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
&:focus + .config-option__tab-label,
|
||||
|
|
@ -177,20 +176,20 @@
|
|||
|
||||
input.range slidertrack {
|
||||
@include trans-colors;
|
||||
margin-top: 7dp;
|
||||
height: 2dp;
|
||||
margin-top: 7dp;
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
input.range sliderbar {
|
||||
@include trans-colors;
|
||||
margin-left: -8dp;
|
||||
margin-right: -6dp;
|
||||
width: space(16);
|
||||
height: space(16);
|
||||
background-color: $color-text-dim;
|
||||
border-radius: 8dp;
|
||||
margin-right: -6dp;
|
||||
margin-left: -8dp;
|
||||
transition: background-color $transition-quick;
|
||||
border-radius: 8dp;
|
||||
background-color: $color-text-dim;
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
@include border($color-a);
|
||||
|
|
@ -198,8 +197,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,24 +215,24 @@
|
|||
|
||||
.config-option__details {
|
||||
@extend %label-xs;
|
||||
color: $color-primary;
|
||||
margin: space(14) space(12) 0;
|
||||
height: space(18);
|
||||
margin: space(14) space(12) 0;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.config-option__range-wrapper {
|
||||
margin-top: space(4);
|
||||
max-width: space(360);
|
||||
margin-top: space(4);
|
||||
}
|
||||
|
||||
.config-option__range-label {
|
||||
@extend %label-sm;
|
||||
flex: 0 0 space(16);
|
||||
|
||||
display: block;
|
||||
padding: 0;
|
||||
flex: 0 0 space(16);
|
||||
margin: 0 12dp;
|
||||
margin-right: space(16);
|
||||
padding: 0;
|
||||
color: $color-text;
|
||||
tab-index: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,10 +59,10 @@
|
|||
.control-option__bindings {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 2 1 space(400);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 2 1 space(400);
|
||||
width: 100%;
|
||||
height: space(56);
|
||||
padding: 0 space(12) 0 space(4);
|
||||
|
|
@ -73,23 +73,23 @@
|
|||
@include trans-colors-border;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 space(4);
|
||||
|
||||
flex: 1 1 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: space(56);
|
||||
margin: 0 space(4);
|
||||
padding: space(8);
|
||||
background-color: $color-bg-overlay;
|
||||
border-color: $color-bg-overlay;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-sm;
|
||||
border-color: $color-bg-overlay;
|
||||
background-color: $color-bg-overlay;
|
||||
|
||||
&:focus, &:hover {
|
||||
@include set-color($color-text);
|
||||
background-color: $color-border-soft;
|
||||
border-color: $color-text;
|
||||
background-color: $color-border-soft;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -116,24 +116,26 @@
|
|||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.control-option__binding-recording {
|
||||
@include trans-colors-opa;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
|
||||
.control-option__binding-circle {
|
||||
|
|
@ -141,9 +143,9 @@
|
|||
|
||||
width: space($rec-size);
|
||||
height: space($rec-size);
|
||||
background-color: $color-error;
|
||||
border-radius: space($rec-size);
|
||||
animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
|
||||
border-radius: space($rec-size);
|
||||
background-color: $color-error;
|
||||
}
|
||||
|
||||
.control-option__binding-edge {
|
||||
|
|
@ -152,13 +154,13 @@
|
|||
|
||||
position: absolute;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: space($edge-size);
|
||||
height: space($edge-size);
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
> svg.control-option__binding-edge-svg {
|
||||
width: space($edge-size);
|
||||
height: space($edge-size);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use 'sass:color';
|
||||
|
||||
/*
|
||||
<button
|
||||
class="icon-button icon-button--danger"
|
||||
|
|
@ -7,8 +8,8 @@
|
|||
</button>
|
||||
*/
|
||||
@mixin create-icon-button-variation($base-col) {
|
||||
background-color: rgba($base-col, 0.05);
|
||||
border-color: rgba($base-col, 0.8);
|
||||
background-color: rgba($base-col, 0.05);
|
||||
|
||||
&:focus, &:hover {
|
||||
border-color: $base-col;
|
||||
|
|
@ -29,17 +30,16 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-radius: space($icon-button-size * 0.5);
|
||||
width: space($icon-button-size);
|
||||
min-width: space($icon-button-size);
|
||||
max-width: space($icon-button-size);
|
||||
height: space($icon-button-size);
|
||||
min-height: space($icon-button-size);
|
||||
max-height: space($icon-button-size);
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: space($icon-button-size * 0.5);
|
||||
border-color: $color-transparent;
|
||||
background-color: $color-transparent;
|
||||
width: space($icon-button-size);
|
||||
height: space($icon-button-size);
|
||||
min-width: space($icon-button-size);
|
||||
min-height: space($icon-button-size);
|
||||
max-width: space($icon-button-size);
|
||||
max-height: space($icon-button-size);
|
||||
|
||||
&:focus, &:hover {
|
||||
@include set-color($color-text);
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
.input-config__mappings {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-width: space($mapping-min-width);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.input-config__mappings-scroll {
|
||||
|
|
@ -35,30 +35,30 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
|
||||
.input-config__visual-wrapper {
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: space($visual-max-width);
|
||||
height: auto;
|
||||
max-height: space(math.div($visual-max-width, 4) * 3);
|
||||
margin: auto 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.input-config__visual-aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto 0;
|
||||
padding-bottom: 75%;
|
||||
background-color: $color-bg-shadow;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.input-config__visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: space(16);
|
||||
right: space(16);
|
||||
bottom: space(16);
|
||||
left: space(16);
|
||||
flex-direction: column;
|
||||
border-radius: space(108);
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
|
|
@ -66,8 +66,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
.input-config__visual-half {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
padding: 6%;
|
||||
|
||||
&--bottom {
|
||||
|
|
@ -79,9 +79,9 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
.input-config__visual-quarter-left {
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
width: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-right {
|
||||
|
|
@ -94,18 +94,18 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
.input-config__visual-stick-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
@include trans-colors-opa;
|
||||
position: relative;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
|
@ -113,8 +113,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__mappings div {
|
||||
|
|
@ -122,8 +122,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
}
|
||||
}
|
||||
|
||||
$all-inputs:
|
||||
A,
|
||||
$all-inputs: A,
|
||||
B,
|
||||
Z,
|
||||
START,
|
||||
|
|
@ -206,6 +205,7 @@ $all-inputs:
|
|||
}
|
||||
|
||||
$dpad-size: 192;
|
||||
|
||||
.input-viz.input-viz__dpad {
|
||||
@include set-svgs-color($color-text);
|
||||
@include set-sizes($dpad-size);
|
||||
|
|
@ -213,6 +213,7 @@ $dpad-size: 192;
|
|||
}
|
||||
|
||||
$stick-size: 200;
|
||||
|
||||
.input-config__visual-stick {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -246,9 +247,9 @@ $stick-size: 200;
|
|||
> div {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,10 +264,10 @@ $stick-size: 200;
|
|||
}
|
||||
|
||||
.input-viz__dpad-arrow {
|
||||
$edge-dist: space(4);
|
||||
position: absolute;
|
||||
width: space(60);
|
||||
height: space(60);
|
||||
$edge-dist: space(4);
|
||||
|
||||
&--up {
|
||||
top: $edge-dist;
|
||||
|
|
@ -312,8 +313,8 @@ $stick-size: 200;
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-lr {
|
||||
|
|
@ -337,10 +338,10 @@ $stick-size: 200;
|
|||
|
||||
.input-config__main-buttons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: space(268);
|
||||
height: space(128);
|
||||
position: relative;
|
||||
margin-right: space(10);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,31 +11,29 @@
|
|||
|
||||
.launcher {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color-background-1;
|
||||
// TODO: Affect all elements with launcher fade-in
|
||||
// animation: 1.5s cubic-in-out 1 fade-launcher-in;
|
||||
}
|
||||
|
||||
.launcher__vertical-split {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
&--right {
|
||||
align-items: flex-end;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,52 +42,52 @@
|
|||
0% {
|
||||
transform: translateX(space(100));
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
transform: translateX(space(0));
|
||||
}
|
||||
}
|
||||
|
||||
.launcher__background-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -55vw;
|
||||
right: -100%;
|
||||
bottom: -50vw;
|
||||
left: -70vw;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: absolute;
|
||||
left: -70vw;
|
||||
right: -100%;
|
||||
top: -55vw;
|
||||
bottom: -50vw;
|
||||
transform: translateX(space(0));
|
||||
animation: 25s cubic-out 1 slide-mm-bg-over;
|
||||
// height: auto;
|
||||
}
|
||||
|
||||
@keyframes fade-mm-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.launcher__background-mm {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
// top: -20%;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: auto;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
animation: 2.5s cubic-in-out 1 fade-mm-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.launcher__title-quadrant {
|
||||
flex: 1 1 auto;
|
||||
padding-top: space(96);
|
||||
padding-left: space(96);
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-top: space(96);
|
||||
padding-left: space(96);
|
||||
|
||||
&--right {
|
||||
padding-right: space(96);
|
||||
|
|
@ -100,11 +98,11 @@
|
|||
.launcher__content-quadrant {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: space(32);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex: 1 1 100%;
|
||||
padding: space(32);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@
|
|||
cursor: pointer;
|
||||
|
||||
&--right {
|
||||
align-content: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
align-content: flex-end;
|
||||
|
||||
.menu-list-item__bullet {
|
||||
opacity: 1;
|
||||
margin-left: space(12);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.menu-list-item:focus:not(:disabled, [disabled]),
|
||||
|
|
@ -60,11 +60,12 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-list-item__label {
|
||||
@extend .label-lg;
|
||||
@extend %label-lg;
|
||||
}
|
||||
|
||||
.menu-list-item__bullet {
|
||||
opacity: 0;
|
||||
margin-right: space(12);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ $prompt-space: 24;
|
|||
|
||||
.prompt {
|
||||
&__overlay {
|
||||
pointer-events: none;
|
||||
background-color: $color-bg-overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__overlay,
|
||||
|
|
@ -18,33 +18,34 @@ $prompt-space: 24;
|
|||
}
|
||||
|
||||
&__content-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
flex: 1 1 100%;
|
||||
max-width: space(700);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space(700);
|
||||
height: auto;
|
||||
background: $color-modal-overlay;
|
||||
margin: auto;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-modal;
|
||||
border-color: $color-border;
|
||||
border-width: $border-width-thickness;
|
||||
background: $color-modal-overlay;
|
||||
|
||||
h3, p {
|
||||
margin: space($prompt-space);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -55,15 +56,15 @@ $prompt-space: 24;
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: space($prompt-space) space(math.div($prompt-space, 2));
|
||||
border-top-color: $color-border-soft;
|
||||
border-top-width: $border-width-thickness;
|
||||
border-top-color: $color-border-soft;
|
||||
|
||||
.button {
|
||||
min-width: space(math.div(700, 3));
|
||||
margin: 0 space(math.div($prompt-space, 2));
|
||||
text-align: center;
|
||||
nav-up: none;
|
||||
nav-down: none;
|
||||
margin: 0 space(math.div($prompt-space, 2));
|
||||
min-width: space(math.div(700, 3));
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
.subtitle-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: $color-text-dim;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&--right {
|
||||
align-content: flex-end;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
&__disclaimer {
|
||||
@extend .label-sm;
|
||||
@extend %label-sm;
|
||||
|
||||
margin-top: space(16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
@extend %header-3;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: space(20) space(24);
|
||||
background-color: rgba(0,0,0,0);
|
||||
margin: 0;
|
||||
color: $color-text-inactive;
|
||||
padding: space(20) space(24);
|
||||
transition: color $transition-quick;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0,0,0,0);
|
||||
color: $color-text-inactive;
|
||||
|
||||
&:selected {
|
||||
color: $color-text;
|
||||
|
|
@ -46,17 +46,17 @@
|
|||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
cursor: pointer;
|
||||
color: $color-text;
|
||||
opacity: 1;
|
||||
color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tab__indicator {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
right: 0;
|
||||
bottom: 2dp;
|
||||
left: 0;
|
||||
height: 2dp;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
|
|||
@extend %nav-all;
|
||||
@include trans-colors-opa;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: space($toggle-width);
|
||||
height: space($toggle-height);
|
||||
background: $color-transparent;
|
||||
border-radius: space(math.div($toggle-height, 2));
|
||||
cursor: pointer;
|
||||
opacity: 0.9;
|
||||
background: $color-transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus-visible, &:focus {
|
||||
background-color: $color-secondary-a30;
|
||||
opacity: 1;
|
||||
background-color: $color-secondary-a30;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-secondary-a5;
|
||||
opacity: 1;
|
||||
background-color: $color-secondary-a5;
|
||||
}
|
||||
|
||||
.toggle__border {
|
||||
|
|
@ -40,10 +40,10 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
|
|||
|
||||
.toggle__floater {
|
||||
position: absolute;
|
||||
width: space($toggle-floater-width);
|
||||
height: space($toggle-floater-height);
|
||||
top: 50%;
|
||||
left: space($toggle-floater-margin);
|
||||
width: space($toggle-floater-width);
|
||||
height: space($toggle-floater-height);
|
||||
transform: translateY(-50%);
|
||||
border-radius: space(math.div($toggle-floater-height, 2));
|
||||
background: $color-secondary-d;
|
||||
|
|
@ -56,12 +56,13 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
|
|||
|
||||
.toggle__icon {
|
||||
&.toggle__icon--left {
|
||||
color: $color-secondary-l;
|
||||
opacity: 0.9;
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
|
||||
&.toggle__icon--right {
|
||||
color: $color-text;
|
||||
opacity: 1.0;
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -70,13 +71,13 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
|
|||
.toggle__icons {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: space(56);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: space(16);
|
||||
left: space(16);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: space(56);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.toggle__icon {
|
||||
|
|
|
|||
|
|
@ -25,18 +25,23 @@ body
|
|||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-vert {
|
||||
@extend %nav-vert;
|
||||
}
|
||||
|
||||
.nav-horiz {
|
||||
@extend %nav-horiz;
|
||||
}
|
||||
|
||||
.nav-dir {
|
||||
@extend %nav-dir;
|
||||
}
|
||||
|
||||
.nav-foc {
|
||||
@extend %nav-foc;
|
||||
}
|
||||
|
||||
.nav-all {
|
||||
@extend %nav-all;
|
||||
}
|
||||
|
|
@ -85,26 +90,30 @@ button {
|
|||
0% {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-pulse-with-border {
|
||||
0% {
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: $color-secondary-l;
|
||||
border-color: $color-secondary-l;
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
color: $color-secondary;
|
||||
|
||||
100% {
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,10 +121,12 @@ button {
|
|||
0% {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/* stylelint-disable color-no-hex */
|
||||
/* stylelint-disable selector-max-id */
|
||||
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
|
|
@ -5,16 +7,16 @@
|
|||
|
||||
hr {
|
||||
display:block;
|
||||
background:black;
|
||||
padding:1.5dp;
|
||||
background: $color-background-1;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
font-family: chiaro;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 20dp;
|
||||
color: #fff
|
||||
font-style: normal;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
/* div {
|
||||
|
|
@ -24,11 +26,11 @@ body {
|
|||
|
||||
div#window {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-background-2;
|
||||
border-color: $color-border;
|
||||
background-color: $color-background-2;
|
||||
}
|
||||
|
||||
div#content {
|
||||
|
|
@ -53,14 +55,14 @@ input.password {
|
|||
box-sizing: border-box;
|
||||
height: 31dp;
|
||||
padding: 11dp 10dp 0;
|
||||
cursor: text;
|
||||
text-align: left
|
||||
text-align: left;
|
||||
cursor: text
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 14dp 12dp 10dp;
|
||||
cursor: text;
|
||||
text-align: left
|
||||
text-align: left;
|
||||
cursor: text
|
||||
}
|
||||
|
||||
input.text,
|
||||
|
|
@ -68,6 +70,7 @@ input.password,
|
|||
select,
|
||||
textarea {
|
||||
/* color: #333; */
|
||||
|
||||
/* font-size: 13dp */
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -75,16 +78,19 @@ textarea {
|
|||
table input.text {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
/* height: 18dp; */
|
||||
margin: 0;
|
||||
/* padding: 0 5dp; */
|
||||
line-height: 1;
|
||||
border-width: $border-width-thickness;
|
||||
border-color: #000;
|
||||
background-color: #fff;
|
||||
font-size: 15dp;
|
||||
|
||||
/* padding: 0 5dp; */
|
||||
line-height: 1;
|
||||
decorator: none;
|
||||
height: auto;
|
||||
|
||||
/* vertical-align: center; */
|
||||
}
|
||||
|
||||
|
|
@ -186,11 +192,11 @@ select {
|
|||
input.radio,
|
||||
input.checkbox {
|
||||
flex: 0;
|
||||
width:0dp;
|
||||
nav-up:auto;
|
||||
nav-right:auto;
|
||||
nav-down:auto;
|
||||
nav-left:auto;
|
||||
tab-index:auto;
|
||||
focus:auto;
|
||||
nav-up:auto;
|
||||
nav-down:auto;
|
||||
nav-right:auto;
|
||||
nav-left:auto;
|
||||
width:0dp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
image-color: $col;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@include set-color(COLOR);
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -60,24 +60,24 @@ $font-stack: chiaro;
|
|||
|
||||
%prompt-font-lg {
|
||||
font-family: promptfont;
|
||||
font-size: space(56);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: space(56);
|
||||
line-height: space(56);
|
||||
}
|
||||
|
||||
%prompt-font {
|
||||
font-family: promptfont;
|
||||
font-size: space(40);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: space(40);
|
||||
line-height: space(40);
|
||||
}
|
||||
|
||||
%prompt-font-sm {
|
||||
font-family: promptfont;
|
||||
font-size: space(32);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: space(32);
|
||||
line-height: space(32);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@ $border-width-thickness-num: 1.1;
|
|||
$border-width-thickness: space($border-width-thickness-num);
|
||||
|
||||
@mixin border($col: $color-border) {
|
||||
border-color: $col;
|
||||
border-width: $border-width-thickness;
|
||||
border-color: $col;
|
||||
}
|
||||
|
||||
@mixin border-top($col: $color-border) {
|
||||
border-top-color: $col;
|
||||
border-top-width: $border-width-thickness;
|
||||
border-top-color: $col;
|
||||
}
|
||||
|
||||
@mixin border-bottom($col: $color-border) {
|
||||
border-bottom-color: $col;
|
||||
border-bottom-width: $border-width-thickness;
|
||||
border-bottom-color: $col;
|
||||
}
|
||||
|
||||
@mixin inset-block($inset-amt) {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ namespace recomp {
|
|||
html_colours["teal"] = Rml::Colourb(0, 128, 128);
|
||||
html_colours["aqua"] = Rml::Colourb(0, 255, 255);
|
||||
html_colours["transparent"] = Rml::Colourb(0, 0, 0, 0);
|
||||
html_colours["whitesmoke"] = Rml::Colourb(245, 245, 245);
|
||||
}
|
||||
|
||||
PropertyParserColorHack::~PropertyParserColorHack() {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue