refactor(ui): faster animations + chore(deps): bump
This commit is contained in:
Liyas Thomas
@@ -52,7 +52,7 @@ body {
|
||||
@apply select-none;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
@@ -61,7 +61,7 @@ body {
|
||||
body.afterLoad {
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
@@ -73,7 +73,7 @@ body.sticky-footer footer {
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
@apply transition-opacity;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
@@ -164,7 +164,7 @@ p {
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -187,7 +187,7 @@ hr {
|
||||
@apply shadow-lg;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply bg-ttColor;
|
||||
@apply text-fgColor;
|
||||
}
|
||||
@@ -202,7 +202,7 @@ hr {
|
||||
@apply z-30;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
@@ -311,7 +311,7 @@ hr {
|
||||
@apply opacity-0;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
@@ -319,7 +319,7 @@ hr {
|
||||
@apply opacity-100;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -344,7 +344,7 @@ button {
|
||||
@apply font-bold;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply fill-current;
|
||||
@apply cursor-pointer;
|
||||
@apply outline-none;
|
||||
@@ -477,7 +477,7 @@ code {
|
||||
@apply font-normal;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply select-text;
|
||||
@apply resize-y;
|
||||
@apply outline-none;
|
||||
@@ -538,6 +538,7 @@ pre {
|
||||
@apply absolute;
|
||||
@apply pointer-events-none;
|
||||
@apply font-icon;
|
||||
@apply text-fgLightColor;
|
||||
|
||||
content: "\e313";
|
||||
top: 16px;
|
||||
@@ -578,7 +579,7 @@ input[type="checkbox"] {
|
||||
@apply text-transparent;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
content: "\2714";
|
||||
height: 16px;
|
||||
@@ -614,7 +615,7 @@ label {
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
ul,
|
||||
@@ -703,7 +704,7 @@ ol li {
|
||||
@apply fixed;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply shadow-lg;
|
||||
@apply rounded-lg;
|
||||
|
||||
|
||||
@@ -137,7 +137,7 @@ $responsiveWidth: 768px;
|
||||
@apply text-xl;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
&:hover {
|
||||
@apply text-acColor;
|
||||
|
||||
@@ -19,7 +19,7 @@ fieldset {
|
||||
@apply bg-bgDarkColor;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
legend {
|
||||
@apply px-4;
|
||||
@@ -28,7 +28,7 @@ fieldset {
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
&.blue legend {
|
||||
|
||||
@@ -177,7 +177,7 @@ $responsiveWidth: 768px;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
// @apply overflow-y-auto;
|
||||
}
|
||||
|
||||
@@ -206,7 +206,7 @@ nav.primary-nav {
|
||||
@apply outline-none;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
&:hover {
|
||||
@apply text-fgColor;
|
||||
@@ -266,7 +266,7 @@ nav.secondary-nav {
|
||||
@apply outline-none;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
&:hover {
|
||||
@apply text-fgColor;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
v-for="(color, index) of colors"
|
||||
:key="`color-${index}`"
|
||||
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
|
||||
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
|
||||
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
|
||||
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
|
||||
@click="setActiveColor(color)"
|
||||
>
|
||||
|
||||
@@ -47,9 +47,9 @@
|
||||
@apply mx-2;
|
||||
@apply left-0;
|
||||
@apply z-50;
|
||||
@apply transition-transform;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply shadow-lg;
|
||||
|
||||
top: calc(100% - 8px);
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
v-for="(color, index) of colors"
|
||||
:key="`color-${index}`"
|
||||
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
|
||||
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
|
||||
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
|
||||
:class="[
|
||||
{ 'bg-bgDarkColor': color === $colorMode.preference },
|
||||
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!-- <div class="fade top"></div>
|
||||
<div class="fade bottom"></div> -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@
|
||||
@apply justify-center;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
@@ -52,7 +52,7 @@
|
||||
@apply m-2;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
@apply bg-bgColor;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-2xl;
|
||||
@@ -90,10 +90,10 @@
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
@apply transform;
|
||||
@apply scale-75;
|
||||
@apply scale-90;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
.fade {
|
||||
@@ -101,7 +101,7 @@
|
||||
@apply block;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
left: 16px;
|
||||
right: 20px;
|
||||
@@ -118,3 +118,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
hasFooterSlot() {
|
||||
return !!this.$slots.footer
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
@apply cursor-pointer;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply duration-150;
|
||||
|
||||
.material-icons {
|
||||
@apply m-4;
|
||||
|
||||
75
package-lock.json
generated
75
package-lock.json
generated
@@ -115,12 +115,17 @@
|
||||
"@babel/types": "^7.12.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
|
||||
"integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
@@ -193,12 +198,17 @@
|
||||
"@babel/types": "^7.12.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
|
||||
"integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
@@ -380,12 +390,17 @@
|
||||
"@babel/types": "^7.12.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
|
||||
"integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
@@ -916,9 +931,9 @@
|
||||
}
|
||||
},
|
||||
"@babel/plugin-transform-block-scoping": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz",
|
||||
"integrity": "sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz",
|
||||
"integrity": "sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==",
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.10.4"
|
||||
}
|
||||
@@ -1188,15 +1203,15 @@
|
||||
}
|
||||
},
|
||||
"@babel/preset-env": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz",
|
||||
"integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.11.tgz",
|
||||
"integrity": "sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==",
|
||||
"requires": {
|
||||
"@babel/compat-data": "^7.12.7",
|
||||
"@babel/helper-compilation-targets": "^7.12.5",
|
||||
"@babel/helper-module-imports": "^7.12.5",
|
||||
"@babel/helper-plugin-utils": "^7.10.4",
|
||||
"@babel/helper-validator-option": "^7.12.1",
|
||||
"@babel/helper-validator-option": "^7.12.11",
|
||||
"@babel/plugin-proposal-async-generator-functions": "^7.12.1",
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
"@babel/plugin-proposal-dynamic-import": "^7.12.1",
|
||||
@@ -1225,7 +1240,7 @@
|
||||
"@babel/plugin-transform-arrow-functions": "^7.12.1",
|
||||
"@babel/plugin-transform-async-to-generator": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoped-functions": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoping": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoping": "^7.12.11",
|
||||
"@babel/plugin-transform-classes": "^7.12.1",
|
||||
"@babel/plugin-transform-computed-properties": "^7.12.1",
|
||||
"@babel/plugin-transform-destructuring": "^7.12.1",
|
||||
@@ -1255,17 +1270,27 @@
|
||||
"@babel/plugin-transform-unicode-escapes": "^7.12.1",
|
||||
"@babel/plugin-transform-unicode-regex": "^7.12.1",
|
||||
"@babel/preset-modules": "^0.1.3",
|
||||
"@babel/types": "^7.12.10",
|
||||
"@babel/types": "^7.12.11",
|
||||
"core-js-compat": "^3.8.0",
|
||||
"semver": "^5.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
||||
},
|
||||
"@babel/helper-validator-option": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
|
||||
"integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw=="
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
|
||||
"integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/preset-env": "^7.12.10",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@nuxtjs/color-mode": "^2.0.2",
|
||||
"@nuxtjs/google-analytics": "^2.4.0",
|
||||
"@nuxtjs/pwa": "^3.3.2",
|
||||
|
||||
Reference in New Issue
Block a user