From 37e34acd5dafe213f68ee116c29306a68e1693c7 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Tue, 8 Nov 2022 16:35:59 +0300 Subject: [PATCH] added missing css class names --- presets.js | 20 ++- public/css/app.css | 362 +++++++++++++++++++++++++++++++++++++-------- 2 files changed, 322 insertions(+), 60 deletions(-) diff --git a/presets.js b/presets.js index dc4615dcc..9b8763454 100644 --- a/presets.js +++ b/presets.js @@ -37,7 +37,25 @@ module.exports = { { pattern: /^right-/, variants: ['ltr', 'rtl'], - } + }, + { + pattern: /^w/, + }, + { + pattern: /^h/, + }, + { + pattern: /^inset/, + }, + { + pattern: /^top/, + }, + { + pattern: /^bottom/, + }, + { + pattern: /^translate/, + }, ], darkMode: 'class', // or 'media' or 'class', diff --git a/public/css/app.css b/public/css/app.css index 1c9ae2cb2..4f467dea1 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -2139,6 +2139,42 @@ button, input, optgroup, select, textarea{ bottom: 8.5rem; left: 8.5rem; } +.inset-1\/2{ + top: 50%; + right: 50%; + bottom: 50%; + left: 50%; +} +.inset-1\/3{ + top: 33.333333%; + right: 33.333333%; + bottom: 33.333333%; + left: 33.333333%; +} +.inset-2\/3{ + top: 66.666667%; + right: 66.666667%; + bottom: 66.666667%; + left: 66.666667%; +} +.inset-1\/4{ + top: 25%; + right: 25%; + bottom: 25%; + left: 25%; +} +.inset-2\/4{ + top: 50%; + right: 50%; + bottom: 50%; + left: 50%; +} +.inset-3\/4{ + top: 75%; + right: 75%; + bottom: 75%; + left: 75%; +} .inset-full{ top: 100%; right: 100%; @@ -2625,6 +2661,30 @@ button, input, optgroup, select, textarea{ left: 8.5rem; right: 8.5rem; } +.inset-x-1\/2{ + left: 50%; + right: 50%; +} +.inset-x-1\/3{ + left: 33.333333%; + right: 33.333333%; +} +.inset-x-2\/3{ + left: 66.666667%; + right: 66.666667%; +} +.inset-x-1\/4{ + left: 25%; + right: 25%; +} +.inset-x-2\/4{ + left: 50%; + right: 50%; +} +.inset-x-3\/4{ + left: 75%; + right: 75%; +} .inset-x-full{ left: 100%; right: 100%; @@ -3013,6 +3073,30 @@ button, input, optgroup, select, textarea{ top: 8.5rem; bottom: 8.5rem; } +.inset-y-1\/2{ + top: 50%; + bottom: 50%; +} +.inset-y-1\/3{ + top: 33.333333%; + bottom: 33.333333%; +} +.inset-y-2\/3{ + top: 66.666667%; + bottom: 66.666667%; +} +.inset-y-1\/4{ + top: 25%; + bottom: 25%; +} +.inset-y-2\/4{ + top: 50%; + bottom: 50%; +} +.inset-y-3\/4{ + top: 75%; + bottom: 75%; +} .inset-y-full{ top: 100%; bottom: 100%; @@ -3353,6 +3437,24 @@ button, input, optgroup, select, textarea{ .top-32\.5{ top: 8.5rem; } +.top-1\/2{ + top: 50%; +} +.top-1\/3{ + top: 33.333333%; +} +.top-2\/3{ + top: 66.666667%; +} +.top-1\/4{ + top: 25%; +} +.top-2\/4{ + top: 50%; +} +.top-3\/4{ + top: 75%; +} .top-full{ top: 100%; } @@ -3953,6 +4055,24 @@ button, input, optgroup, select, textarea{ .bottom-32\.5{ bottom: 8.5rem; } +.bottom-1\/2{ + bottom: 50%; +} +.bottom-1\/3{ + bottom: 33.333333%; +} +.bottom-2\/3{ + bottom: 66.666667%; +} +.bottom-1\/4{ + bottom: 25%; +} +.bottom-2\/4{ + bottom: 50%; +} +.bottom-3\/4{ + bottom: 75%; +} .bottom-full{ bottom: 100%; } @@ -4409,12 +4529,6 @@ button, input, optgroup, select, textarea{ .-left-full{ left: -100%; } -.top-1\/4{ - top: 25%; -} -.top-1\/2{ - top: 50%; -} .isolate{ isolation: isolate; } @@ -7300,6 +7414,51 @@ button, input, optgroup, select, textarea{ .h-32\.5{ height: 8.5rem; } +.h-1\/2{ + height: 50%; +} +.h-1\/3{ + height: 33.333333%; +} +.h-2\/3{ + height: 66.666667%; +} +.h-1\/4{ + height: 25%; +} +.h-2\/4{ + height: 50%; +} +.h-3\/4{ + height: 75%; +} +.h-1\/5{ + height: 20%; +} +.h-2\/5{ + height: 40%; +} +.h-3\/5{ + height: 60%; +} +.h-4\/5{ + height: 80%; +} +.h-1\/6{ + height: 16.666667%; +} +.h-2\/6{ + height: 33.333333%; +} +.h-3\/6{ + height: 50%; +} +.h-4\/6{ + height: 66.666667%; +} +.h-5\/6{ + height: 83.333333%; +} .h-full{ height: 100%; } @@ -7321,9 +7480,6 @@ button, input, optgroup, select, textarea{ height: -moz-fit-content; height: fit-content; } -.h-5\/6{ - height: 83.333333%; -} .max-h-0{ max-height: 0px; } @@ -7657,6 +7813,84 @@ button, input, optgroup, select, textarea{ .w-32\.5{ width: 8.5rem; } +.w-1\/2{ + width: 50%; +} +.w-1\/3{ + width: 33.333333%; +} +.w-2\/3{ + width: 66.666667%; +} +.w-1\/4{ + width: 25%; +} +.w-2\/4{ + width: 50%; +} +.w-3\/4{ + width: 75%; +} +.w-1\/5{ + width: 20%; +} +.w-2\/5{ + width: 40%; +} +.w-3\/5{ + width: 60%; +} +.w-4\/5{ + width: 80%; +} +.w-1\/6{ + width: 16.666667%; +} +.w-2\/6{ + width: 33.333333%; +} +.w-3\/6{ + width: 50%; +} +.w-4\/6{ + width: 66.666667%; +} +.w-5\/6{ + width: 83.333333%; +} +.w-1\/12{ + width: 8.333333%; +} +.w-2\/12{ + width: 16.666667%; +} +.w-3\/12{ + width: 25%; +} +.w-4\/12{ + width: 33.333333%; +} +.w-5\/12{ + width: 41.666667%; +} +.w-6\/12{ + width: 50%; +} +.w-7\/12{ + width: 58.333333%; +} +.w-8\/12{ + width: 66.666667%; +} +.w-9\/12{ + width: 75%; +} +.w-10\/12{ + width: 83.333333%; +} +.w-11\/12{ + width: 91.666667%; +} .w-full{ width: 100%; } @@ -7678,51 +7912,6 @@ button, input, optgroup, select, textarea{ width: -moz-fit-content; width: fit-content; } -.w-8\/12{ - width: 66.666667%; -} -.w-4\/12{ - width: 33.333333%; -} -.w-6\/12{ - width: 50%; -} -.w-3\/12{ - width: 25%; -} -.w-2\/12{ - width: 16.666667%; -} -.w-9\/12{ - width: 75%; -} -.w-7\/12{ - width: 58.333333%; -} -.w-5\/12{ - width: 41.666667%; -} -.w-1\/2{ - width: 50%; -} -.w-10\/12{ - width: 83.333333%; -} -.w-1\/12{ - width: 8.333333%; -} -.w-2\/4{ - width: 50%; -} -.w-1\/3{ - width: 33.333333%; -} -.w-1\/4{ - width: 25%; -} -.w-3\/4{ - width: 75%; -} .min-w-0{ min-width: 0px; } @@ -8965,6 +9154,36 @@ button, input, optgroup, select, textarea{ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-x-1\/2{ + --tw-translate-x: 50%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-x-1\/3{ + --tw-translate-x: 33.333333%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-x-2\/3{ + --tw-translate-x: 66.666667%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-x-1\/4{ + --tw-translate-x: 25%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-x-2\/4{ + --tw-translate-x: 50%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-x-3\/4{ + --tw-translate-x: 75%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} .translate-x-full{ --tw-translate-x: 100%; -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -9445,6 +9664,36 @@ button, input, optgroup, select, textarea{ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-y-1\/2{ + --tw-translate-y: 50%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-y-1\/3{ + --tw-translate-y: 33.333333%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-y-2\/3{ + --tw-translate-y: 66.666667%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-y-1\/4{ + --tw-translate-y: 25%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-y-2\/4{ + --tw-translate-y: 50%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.translate-y-3\/4{ + --tw-translate-y: 75%; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} .translate-y-full{ --tw-translate-y: 100%; -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -9700,11 +9949,6 @@ button, input, optgroup, select, textarea{ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.translate-x-1\/2{ - --tw-translate-x: 50%; - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} .rotate-0{ --tw-rotate: 0deg; -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));