opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Enable button animation on mobile. use Tailwind CSS arbitrary media query class names instead of using Post CSS plugin

This commit is contained in:
Pouya Saadeghi 2023-06-03 22:59:10 +03:00
parent 91955848bd
commit 3f17bfde5b
25 changed files with 203 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -93,7 +93,6 @@
"c8": "^7.14.0",
"lightningcss-cli": "^1.20.0",
"postcss-cli": "10.1.0",
"postcss-hover-media-feature": "^1.0.2",
"postcss-import": "15.1.0",
"prejss-cli": "0.3.3",
"prettier": "^2.8.8",

1
src/components/postcss.config.js
View File

@ -3,6 +3,5 @@ module.exports = {
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/components/tailwind.config.js"),
require("postcss-hover-media-feature"),
],
}

10
src/components/styled/bottom-navigation.css
View File

@ -14,11 +14,15 @@
/* disabled */
&.disabled,
&.disabled:hover,
&[disabled],
&[disabled]:hover {
&[disabled] {
@apply border-opacity-0 bg-neutral bg-opacity-10 text-base-content text-opacity-20 pointer-events-none;
}
@media (hover: hover) {
&.disabled:hover,
&[disabled]:hover {
@apply border-opacity-0 bg-neutral bg-opacity-10 text-base-content text-opacity-20 pointer-events-none;
}
}
.label {
@apply text-base;
}

142
src/components/styled/button.css
View File

@ -4,9 +4,6 @@
animation: button-pop var(--animation-btn, 0.25s) ease-out;
text-transform: var(--btn-text-case, uppercase);
&:active:hover,
&:active:focus {
}
&:active:hover,
&:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
@ -15,7 +12,11 @@
/* default btn */
& {
@apply border-base-200 bg-base-200 text-base-content no-underline;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-base-300 bg-base-300;
}
}
&-active {
@apply border-base-300 bg-base-300;
}
@ -26,7 +27,11 @@
/* brand colors */
&-primary {
@apply border-primary bg-primary text-primary-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-primary-focus bg-primary-focus;
}
}
&.btn-active {
@apply border-primary-focus bg-primary-focus;
}
@ -36,7 +41,11 @@
}
&-secondary {
@apply border-secondary bg-secondary text-secondary-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-secondary-focus bg-secondary-focus;
}
}
&.btn-active {
@apply border-secondary-focus bg-secondary-focus;
}
@ -46,7 +55,11 @@
}
&-accent {
@apply border-accent bg-accent text-accent-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-accent-focus bg-accent-focus;
}
}
&.btn-active {
@apply border-accent-focus bg-accent-focus;
}
@ -56,7 +69,11 @@
}
&-neutral {
@apply border-neutral bg-neutral text-neutral-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-neutral-focus bg-neutral-focus;
}
}
&.btn-active {
@apply border-neutral-focus bg-neutral-focus;
}
@ -68,7 +85,11 @@
/* btn with state colors */
&-info {
@apply border-info bg-info text-info-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-info bg-info;
}
}
&.btn-active {
@apply border-info bg-info;
}
@ -78,7 +99,11 @@
}
&-success {
@apply border-success bg-success text-success-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-success bg-success;
}
}
&.btn-active {
@apply border-success bg-success;
}
@ -88,7 +113,11 @@
}
&-warning {
@apply border-warning bg-warning text-warning-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-warning bg-warning;
}
}
&.btn-active {
@apply border-warning bg-warning;
}
@ -98,7 +127,11 @@
}
&-error {
@apply border-error bg-error text-error-content;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-error bg-error;
}
}
&.btn-active {
@apply border-error bg-error;
}
@ -110,7 +143,12 @@
/* glass */
&.glass {
@apply shadow-none;
&:hover,
@media (hover: hover) {
&:hover{
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
}
&.btn-active {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
@ -123,7 +161,11 @@
/* btn variants */
&-ghost {
@apply border border-transparent bg-transparent text-current shadow-none;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-opacity-0 bg-base-content bg-opacity-20;
}
}
&.btn-active {
@apply border-opacity-0 bg-base-content bg-opacity-20;
}
@ -133,7 +175,11 @@
}
&-link {
@apply border-transparent bg-transparent text-primary underline shadow-none;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-transparent bg-transparent underline;
}
}
&.btn-active {
@apply border-transparent bg-transparent underline;
}
@ -145,55 +191,87 @@
/* outline */
&-outline {
@apply border-current bg-transparent text-base-content shadow-none;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-base-content bg-base-content text-base-100;
}
}
&.btn-active {
@apply border-base-content bg-base-content text-base-100;
}
&.btn-primary {
@apply text-primary;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-primary-focus bg-primary-focus text-primary-content;
}
}
&.btn-active {
@apply border-primary-focus bg-primary-focus text-primary-content;
}
}
&.btn-secondary {
@apply text-secondary;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-secondary-focus bg-secondary-focus text-secondary-content;
}
}
&.btn-active {
@apply border-secondary-focus bg-secondary-focus text-secondary-content;
}
}
&.btn-accent {
@apply text-accent;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-accent-focus bg-accent-focus text-accent-content;
}
}
&.btn-active {
@apply border-accent-focus bg-accent-focus text-accent-content;
}
}
&.btn-success {
@apply text-success;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-success bg-success text-success-content;
}
}
&.btn-active {
@apply border-success bg-success text-success-content;
}
}
&.btn-info {
@apply text-info;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-info bg-info text-info-content;
}
}
&.btn-active {
@apply border-info bg-info text-info-content;
}
}
&.btn-warning {
@apply text-warning;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-warning bg-warning text-warning-content;
}
}
&.btn-active {
@apply border-warning bg-warning text-warning-content;
}
}
&.btn-error {
@apply text-error;
&:hover,
@media (hover: hover) {
&:hover{
@apply border-error bg-error text-error-content;
}
}
&.btn-active {
@apply border-error bg-error text-error-content;
}
@ -202,13 +280,17 @@
/* disabled */
&-disabled,
&-disabled:hover,
&[disabled],
&[disabled]:hover,
&:disabled,
&:disabled:hover {
&:disabled{
@apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
}
@media (hover: hover) {
&-disabled:hover,
&[disabled]:hover,
&:disabled:hover {
@apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
}
}
}
/* group */
.btn-group {
@ -225,8 +307,10 @@
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
@apply border-primary bg-primary text-primary-content;
&:hover {
@apply border-primary-focus bg-primary-focus;
@media (hover: hover) {
&:hover {
@apply border-primary-focus bg-primary-focus;
}
}
&:focus-visible {
@apply outline-primary;

14
src/components/styled/checkbox.css
View File

@ -38,7 +38,7 @@
&-primary {
--chkbg: var(--p);
--chkfg: var(--pc);
@apply border-primary hover:border-primary;
@apply border-primary [@media(hover:hover)]:hover:border-primary;
&:focus-visible {
@apply outline-primary;
}
@ -51,7 +51,7 @@
&-secondary {
--chkbg: var(--s);
--chkfg: var(--sc);
@apply border-secondary hover:border-secondary;
@apply border-secondary [@media(hover:hover)]:hover:border-secondary;
&:focus-visible {
@apply outline-secondary;
}
@ -64,7 +64,7 @@
&-accent {
--chkbg: var(--a);
--chkfg: var(--ac);
@apply border-accent hover:border-accent;
@apply border-accent [@media(hover:hover)]:hover:border-accent;
&:focus-visible {
@apply outline-accent;
}
@ -77,7 +77,7 @@
&-success {
--chkbg: var(--su);
--chkfg: var(--suc);
@apply border-success hover:border-success;
@apply border-success [@media(hover:hover)]:hover:border-success;
&:focus-visible {
@apply outline-success;
}
@ -90,7 +90,7 @@
&-warning {
--chkbg: var(--wa);
--chkfg: var(--wac);
@apply border-warning hover:border-warning;
@apply border-warning [@media(hover:hover)]:hover:border-warning;
&:focus-visible {
@apply outline-warning;
}
@ -103,7 +103,7 @@
&-info {
--chkbg: var(--in);
--chkfg: var(--inc);
@apply border-info hover:border-info;
@apply border-info [@media(hover:hover)]:hover:border-info;
&:focus-visible {
@apply outline-info;
}
@ -116,7 +116,7 @@
&-error {
--chkbg: var(--er);
--chkfg: var(--erc);
@apply border-error hover:border-error;
@apply border-error [@media(hover:hover)]:hover:border-error;
&:focus-visible {
@apply outline-error;
}

6
src/components/styled/dropdown.css
View File

@ -14,8 +14,12 @@
@apply origin-left;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown.dropdown-hover:hover .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
@apply scale-100;
}
@media (hover: hover) {
.dropdown.dropdown-hover:hover .dropdown-content {
@apply scale-100;
}
}

2
src/components/styled/form.css
View File

@ -7,6 +7,6 @@
@apply text-xs text-base-content;
}
a {
@apply hover:text-base-content;
@apply [@media(hover:hover)]:hover:text-base-content;
}
}

16
src/components/styled/link.css
View File

@ -1,27 +1,27 @@
.link {
&-primary {
@apply text-primary hover:text-primary-focus;
@apply text-primary [@media(hover:hover)]:hover:text-primary-focus;
}
&-secondary {
@apply text-secondary hover:text-secondary-focus;
@apply text-secondary [@media(hover:hover)]:hover:text-secondary-focus;
}
&-accent {
@apply text-accent hover:text-accent-focus;
@apply text-accent [@media(hover:hover)]:hover:text-accent-focus;
}
&-neutral {
@apply text-neutral hover:text-neutral-focus;
@apply text-neutral [@media(hover:hover)]:hover:text-neutral-focus;
}
&-success {
@apply text-success hover:text-success;
@apply text-success [@media(hover:hover)]:hover:text-success;
}
&-info {
@apply text-info hover:text-info;
@apply text-info [@media(hover:hover)]:hover:text-info;
}
&-warning {
@apply text-warning hover:text-warning;
@apply text-warning [@media(hover:hover)]:hover:text-warning;
}
&-error {
@apply text-error hover:text-error;
@apply text-error [@media(hover:hover)]:hover:text-error;
}
&:focus {
@apply outline-none;

14
src/components/styled/menu.css
View File

@ -23,15 +23,21 @@
:where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)) {
&.focus,
&:focus,
&:hover {
&:focus {
@apply outline-none bg-base-content/10 cursor-pointer;
}
@media (hover: hover) {
&:hover {
@apply outline-none bg-base-content/10 cursor-pointer;
}
}
&:active,
&:where(.active),
&:where(.active):hover {
&:where(.active) {
@apply bg-neutral text-neutral-content;
}
&:where(.active) {
@apply [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
}
}
& li.disabled {
@apply text-base-content/30;

14
src/components/styled/radio.css
View File

@ -12,7 +12,7 @@
}
&-primary {
--chkbg: var(--p);
@apply border-primary hover:border-primary;
@apply border-primary [@media(hover:hover)]:hover:border-primary;
&:focus-visible {
@apply outline-primary;
}
@ -23,7 +23,7 @@
}
&-secondary {
--chkbg: var(--s);
@apply border-secondary hover:border-secondary;
@apply border-secondary [@media(hover:hover)]:hover:border-secondary;
&:focus-visible {
@apply outline-secondary;
}
@ -34,7 +34,7 @@
}
&-accent {
--chkbg: var(--a);
@apply border-accent hover:border-accent;
@apply border-accent [@media(hover:hover)]:hover:border-accent;
&:focus-visible {
@apply outline-accent;
}
@ -45,7 +45,7 @@
}
&-success {
--chkbg: var(--su);
@apply border-success hover:border-success;
@apply border-success [@media(hover:hover)]:hover:border-success;
&:focus-visible {
@apply outline-success;
}
@ -56,7 +56,7 @@
}
&-warning {
--chkbg: var(--wa);
@apply border-warning hover:border-warning;
@apply border-warning [@media(hover:hover)]:hover:border-warning;
&:focus-visible {
@apply outline-warning;
}
@ -67,7 +67,7 @@
}
&-info {
--chkbg: var(--in);
@apply border-info hover:border-info;
@apply border-info [@media(hover:hover)]:hover:border-info;
&:focus-visible {
@apply outline-info;
}
@ -78,7 +78,7 @@
}
&-error {
--chkbg: var(--er);
@apply border-error hover:border-error;
@apply border-error [@media(hover:hover)]:hover:border-error;
&:focus-visible {
@apply outline-error;
}

14
src/components/styled/tab.css
View File

@ -1,5 +1,5 @@
.tab {
@apply text-opacity-50 hover:text-opacity-100;
@apply text-opacity-50 [@media(hover:hover)]:hover:text-opacity-100;
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
@ -22,11 +22,15 @@
}
/* disabled */
&-disabled,
&-disabled:hover,
&[disabled],
&[disabled]:hover {
&[disabled] {
@apply text-base-content text-opacity-20 cursor-not-allowed;
}
@media (hover: hover) {
&[disabled],
&[disabled]:hover {
@apply text-base-content text-opacity-20 cursor-not-allowed;
}
}
}
.tab-bordered {
@apply border-base-content border-opacity-20;
@ -110,6 +114,6 @@
@apply rounded-btn;
}
.tab-active:not(.tab-disabled):not([disabled]) {
@apply bg-primary text-primary-content hover:text-primary-content;
@apply bg-primary text-primary-content [@media(hover:hover)]:hover:text-primary-content;
}
}

12
src/components/styled/table.css
View File

@ -5,21 +5,25 @@
}
tr.active,
tr.active:nth-child(even),
tr.hover:hover,
tr.hover:nth-child(even):hover,
&-zebra tbody tr:nth-child(even) {
@apply bg-base-200;
}
tr.hover,
tr.hover:nth-child(even){
@apply [@media(hover:hover)]:hover:bg-base-200
}
&-zebra {
tr.active,
tr.active:nth-child(even),
tr.hover:hover,
tr.hover:nth-child(even):hover,
&-zebra tbody tr:nth-child(even) {
@apply bg-base-300;
}
}
&-zebra tr.hover,
&-zebra tr.hover:nth-child(even){
@apply [@media(hover:hover)]:hover:bg-base-300
}
:where(thead, tbody) {
:where(tr:not(:last-child)),

2
src/components/unstyled/breadcrumbs.css
View File

@ -7,7 +7,7 @@
& > li {
@apply flex items-center;
& > a {
@apply flex cursor-pointer items-center hover:underline;
@apply flex cursor-pointer items-center [@media(hover:hover)]:hover:underline;
}
}
}

6
src/components/unstyled/dropdown.css
View File

@ -32,11 +32,15 @@
@apply bottom-0 top-auto;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown.dropdown-hover:hover .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
@apply visible opacity-100;
}
@media (hover: hover) {
.dropdown.dropdown-hover:hover .dropdown-content {
@apply visible opacity-100;
}
}
.dropdown:is(details) summary::-webkit-details-marker {
@apply hidden;
}

2
src/components/unstyled/link.css
View File

@ -1,6 +1,6 @@
.link {
@apply cursor-pointer underline;
&-hover {
@apply no-underline hover:underline;
@apply no-underline [@media(hover:hover)]:hover:underline;
}
}

25
src/docs/package-lock.json generated
View File

@ -25,7 +25,6 @@
"json-diff": "^1.0.6",
"mdsvex": "^0.10.6",
"postcss": "8.4.23",
"postcss-hover-media-feature": "^1.0.2",
"postcss-nesting": "11.2.2",
"prettier": "2.8.8",
"prettier-plugin-svelte": "2.10.0",
@ -2247,21 +2246,6 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-hover-media-feature": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/postcss-hover-media-feature/-/postcss-hover-media-feature-1.0.2.tgz",
"integrity": "sha512-o5xDUqCQ4xtilWOcvo5LKYxFVSLWcBN0IlTqa0IJwAwHTd4pxKmX4c0fGIpgLQCcBB/+aFizt2NVWNGJWG4Izg==",
"dev": true,
"dependencies": {
"postcss-selector-parser": "^6.0.4"
},
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-import": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@ -4923,15 +4907,6 @@
}
}
},
"postcss-hover-media-feature": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/postcss-hover-media-feature/-/postcss-hover-media-feature-1.0.2.tgz",
"integrity": "sha512-o5xDUqCQ4xtilWOcvo5LKYxFVSLWcBN0IlTqa0IJwAwHTd4pxKmX4c0fGIpgLQCcBB/+aFizt2NVWNGJWG4Izg==",
"dev": true,
"requires": {
"postcss-selector-parser": "^6.0.4"
}
},
"postcss-import": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",

1
src/docs/package.json
View File

@ -18,7 +18,6 @@
"json-diff": "^1.0.6",
"mdsvex": "^0.10.6",
"postcss": "8.4.23",
"postcss-hover-media-feature": "^1.0.2",
"postcss-nesting": "11.2.2",
"prettier": "2.8.8",
"prettier-plugin-svelte": "2.10.0",

1
src/docs/postcss.config.cjs
View File

@ -4,6 +4,5 @@ module.exports = {
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
require("postcss-hover-media-feature"),
],
}

1
src/full/postcss.config.js
View File

@ -3,6 +3,5 @@ module.exports = {
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/full/tailwind.config.js"),
require("postcss-hover-media-feature"),
],
}

1
src/themes/postcss.config.js
View File

@ -3,6 +3,5 @@ module.exports = {
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/themes/tailwind.config.js"),
require("postcss-hover-media-feature"),
],
}

21
src/utilities/global/glass.css
View File

@ -1,6 +1,5 @@
.glass {
&,
&:hover,
&.btn-active {
border: none;
backdrop-filter: blur(var(--glass-blur, 40px));
@ -19,4 +18,24 @@
0 0 0 2px rgb(0 0 0 / 5%);
text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
}
@media (hover: hover) {
&.btn-active {
border: none;
backdrop-filter: blur(var(--glass-blur, 40px));
background-color: transparent;
background-image: linear-gradient(
135deg,
rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
rgb(0 0 0 / 0%) 100%
),
linear-gradient(
var(--glass-reflex-degree, 100deg),
rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
rgb(0 0 0 / 0%) 25%
);
box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset,
0 0 0 2px rgb(0 0 0 / 5%);
text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
}
}
}

1
src/utilities/global/postcss.config.js
View File

@ -2,6 +2,5 @@ module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss/nesting"),
require("postcss-hover-media-feature"),
],
}

1
src/utilities/styled/postcss.config.js
View File

@ -3,6 +3,5 @@ module.exports = {
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/utilities/styled/tailwind.config.js"),
require("postcss-hover-media-feature"),
],
}

1
src/utilities/styled/tooltip.css
View File

@ -31,6 +31,7 @@
visibility: hidden;
opacity: 0;
}
.tooltip:after {
content: "";
border-style: solid;

1
src/utilities/unstyled/postcss.config.js
View File

@ -3,6 +3,5 @@ module.exports = {
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/utilities/unstyled/tailwind.config.js"),
require("postcss-hover-media-feature"),
],
}