Refactor CSS structure

This commit is contained in:
Ryan Scherler
2021-01-31 21:14:21 -08:00
parent e74a3771a4
commit 1d0d82d9ac
11 changed files with 92 additions and 93 deletions
+1 -5
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1,4 +1,4 @@
{
"/js/filament.js": "/js/filament.js?id=4782dc312d22e36a18eb",
"/css/filament.css": "/css/filament.css?id=1a22a0f2d3fee0cf423b"
"/css/filament.css": "/css/filament.css?id=7b387fbf9eec8d58f4ff"
}
+19 -22
View File
@@ -2225,17 +2225,23 @@
"dev": true
},
"autoprefixer": {
"version": "10.2.3",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.3.tgz",
"integrity": "sha512-vlz+iv+EnLkVaTgX8wApfYzmK3LUfK8Z9XAnmflzxMy/+oFuNK8fVGQV79SOpBv4jxk2YQJimw4hXIKZ29570A==",
"dev": true,
"version": "10.2.4",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz",
"integrity": "sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==",
"requires": {
"browserslist": "^4.16.1",
"caniuse-lite": "^1.0.30001178",
"caniuse-lite": "^1.0.30001181",
"colorette": "^1.2.1",
"fraction.js": "^4.0.13",
"normalize-range": "^0.1.2",
"postcss-value-parser": "^4.1.0"
},
"dependencies": {
"caniuse-lite": {
"version": "1.0.30001181",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
"integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ=="
}
}
},
"available-typed-arrays": {
@@ -2698,7 +2704,6 @@
"version": "4.16.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz",
"integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001173",
"colorette": "^1.2.1",
@@ -2856,8 +2861,7 @@
"caniuse-lite": {
"version": "1.0.30001180",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz",
"integrity": "sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==",
"dev": true
"integrity": "sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw=="
},
"chalk": {
"version": "1.1.3",
@@ -3145,8 +3149,7 @@
"colorette": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
"integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
"dev": true
"integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
},
"colors": {
"version": "1.4.0",
@@ -4348,8 +4351,7 @@
"electron-to-chromium": {
"version": "1.3.647",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.647.tgz",
"integrity": "sha512-Or2Nu8TjkmSywY9hk85K/Y6il28hchlonITz30fkC87qvSNupQl29O12BzDDDTnUFlo6kEIFL2QGSpkZDMxH8g==",
"dev": true
"integrity": "sha512-Or2Nu8TjkmSywY9hk85K/Y6il28hchlonITz30fkC87qvSNupQl29O12BzDDDTnUFlo6kEIFL2QGSpkZDMxH8g=="
},
"elliptic": {
"version": "6.5.3",
@@ -4537,8 +4539,7 @@
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-html": {
"version": "1.0.3",
@@ -5102,8 +5103,7 @@
"fraction.js": {
"version": "4.0.13",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
"integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==",
"dev": true
"integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA=="
},
"fragment-cache": {
"version": "0.2.1",
@@ -7050,8 +7050,7 @@
"node-releases": {
"version": "1.1.70",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz",
"integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==",
"dev": true
"integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw=="
},
"normalize-path": {
"version": "3.0.0",
@@ -7062,8 +7061,7 @@
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
},
"normalize-url": {
"version": "3.3.0",
@@ -10364,8 +10362,7 @@
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
"dev": true
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"pretty-hrtime": {
"version": "1.0.3",
+3
View File
@@ -25,5 +25,8 @@
"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",
"tailwindcss": "^2.0.2"
},
"dependencies": {
"autoprefixer": "^10.2.4"
}
}
+1
View File
@@ -3,5 +3,6 @@ module.exports = {
require("postcss-import"),
require("postcss-nested"),
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer"),
],
};
+17 -15
View File
@@ -1,34 +1,36 @@
/**
@layer base {
/**
* Smoothly animate the scroll position, instead of a straight jump.
*/
html {
scroll-behavior: smooth;
}
html {
scroll-behavior: smooth;
}
/**
/**
* ::selection selector: color, background, cursor, and outline.
*/
::selection {
@apply bg-blue-600 text-white;
}
::selection {
@apply bg-blue-600 text-white;
}
/**
/**
* `x-cloak` attributes are removed from elements when Alpine initializes.
* This is useful for hiding pre-initialized DOM.
*
* @link https://github.com/alpinejs/alpine#x-cloak
*
*/
[x-cloak] {
@apply hidden;
}
[x-cloak] {
@apply hidden;
}
/**
/**
* Selectively disable the default focus style by selecting for the case when the polyfill
* is loaded and [data-focus-visible-added] attribute is not applied to the element:
*
* @link https://github.com/WICG/focus-visible#2-update-your-css
*/
.js-focus-visible :focus:not([data-focus-visible-added]) {
@apply outline-none;
.js-focus-visible :focus:not([data-focus-visible-added]) {
@apply outline-none;
}
}
+12 -10
View File
@@ -1,15 +1,17 @@
.btn {
@apply cursor-pointer text-sm font-semibold py-2 px-6 border border-gray-300 bg-gray-100 text-gray-800 rounded transition duration-200 shadow-sm inline-block relative focus:ring focus:ring-indigo-200 focus:ring-opacity-50 hover:bg-gray-200;
@layer components {
.btn {
@apply cursor-pointer text-sm font-semibold py-2 px-6 border border-gray-300 bg-gray-100 text-gray-800 rounded transition duration-200 shadow-sm inline-block relative focus:ring focus:ring-indigo-200 focus:ring-opacity-50 hover:bg-gray-200;
&-sm {
@apply text-xs py-1 px-3;
}
&-sm {
@apply text-xs py-1 px-3;
}
&-primary {
@apply border-transparent bg-blue-700 text-white hover:bg-blue-800;
}
&-primary {
@apply border-transparent bg-blue-700 text-white hover:bg-blue-800;
}
&[disabled] {
@apply opacity-50 cursor-not-allowed;
&[disabled] {
@apply opacity-50 cursor-not-allowed;
}
}
}
+15 -13
View File
@@ -1,19 +1,21 @@
.filepond--root {
@apply font-sans;
@layer components {
.filepond--root {
@apply font-sans;
.filepond--panel-root {
@apply rounded bg-gray-50 border border-dashed border-gray-300;
}
.filepond--panel-root {
@apply rounded bg-gray-50 border border-dashed border-gray-300;
}
.filepond--drop-label {
@apply text-current;
.filepond--drop-label {
@apply text-current;
label {
@apply text-sm;
label {
@apply text-sm;
}
}
.filepond--label-action {
@apply no-underline text-blue-600 hover:text-blue-800 transition-colors duration-200;
}
}
.filepond--label-action {
@apply no-underline text-blue-600 hover:text-blue-800 transition-colors duration-200;
}
}
+4 -10
View File
@@ -2,15 +2,9 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@layer base {
@import "./base.css";
}
@import "./base.css";
@layer components {
@import "./components/buttons.css";
@import "./components/filepond.css";
}
@import "./components/buttons.css";
@import "./components/filepond.css";
@layer utilities {
@import "./utilities/typography.css";
}
@import "./utilities/typography.css";
+18 -16
View File
@@ -1,21 +1,23 @@
.link {
@apply underline text-blue-600 hover:text-blue-800 transition-colors duration-200;
}
@layer utilities {
.link {
@apply underline text-blue-600 hover:text-blue-800 transition-colors duration-200;
}
.help,
.hint {
@apply text-xs font-normal leading-tight text-gray-500;
}
.help,
.hint {
@apply text-xs font-normal leading-tight text-gray-500;
}
.help code {
@apply rounded bg-gray-200 px-1 py-0.5;
}
.help code {
@apply rounded bg-gray-200 px-1 py-0.5;
}
.help a,
.hint a {
@apply link;
}
.help a,
.hint a {
@apply link;
}
.hint {
@apply font-mono;
.hint {
@apply font-mono;
}
}