@mineui/utils 0.0.2 → 0.0.4

package/dist/scss/p4.scss

@@ -0,0 +1,428 @@
+// @mineui/p4 (EFFECTS, FILTERS, TRANSFORMS, INTERACTIONS)
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// PACK
+// ----------------------------------------------------------------------------
+    @use '../../../node_modules/@mineui/tokens' as *;
+
+
+// ----------------------------------------------------------------------------
+// 51. BOX SHADOW
+// ----------------------------------------------------------------------------
+.shadow-none { box-shadow: $shadow-none !important; }
+.shadow-xs { box-shadow: var(--shadow-xs) !important; }
+.shadow-sm { box-shadow: var(--shadow-sm) !important; }
+.shadow { box-shadow: var(--shadow-md) !important; }
+.shadow-md { box-shadow: var(--shadow-md) !important; }
+.shadow-lg { box-shadow: var(--shadow-lg) !important; }
+.shadow-xl { box-shadow: var(--shadow-xl) !important; }
+.shadow-inner { box-shadow: $shadow-inner !important; }
+
+// ----------------------------------------------------------------------------
+// 52. OPACITY
+// ----------------------------------------------------------------------------
+@each $key, $value in (
+  0: $opacity-0, 5: $opacity-5, 10: $opacity-10, 20: $opacity-20,
+  25: $opacity-25, 30: $opacity-30, 40: $opacity-40, 50: $opacity-50,
+  60: $opacity-60, 70: $opacity-70, 75: $opacity-75, 80: $opacity-80,
+  90: $opacity-90, 95: $opacity-95, 100: $opacity-100
+) {
+  .opacity-#{$key} { opacity: $value !important; }
+}
+
+// ----------------------------------------------------------------------------
+// 53. MIX BLEND MODE
+// ----------------------------------------------------------------------------
+.mix-blend-normal { mix-blend-mode: normal !important; }
+.mix-blend-multiply { mix-blend-mode: multiply !important; }
+.mix-blend-screen { mix-blend-mode: screen !important; }
+.mix-blend-overlay { mix-blend-mode: overlay !important; }
+.mix-blend-darken { mix-blend-mode: darken !important; }
+.mix-blend-lighten { mix-blend-mode: lighten !important; }
+.mix-blend-color-dodge { mix-blend-mode: color-dodge !important; }
+.mix-blend-color-burn { mix-blend-mode: color-burn !important; }
+.mix-blend-hard-light { mix-blend-mode: hard-light !important; }
+.mix-blend-soft-light { mix-blend-mode: soft-light !important; }
+.mix-blend-difference { mix-blend-mode: difference !important; }
+.mix-blend-exclusion { mix-blend-mode: exclusion !important; }
+.mix-blend-hue { mix-blend-mode: hue !important; }
+.mix-blend-saturation { mix-blend-mode: saturation !important; }
+.mix-blend-color { mix-blend-mode: color !important; }
+.mix-blend-luminosity { mix-blend-mode: luminosity !important; }
+
+// ----------------------------------------------------------------------------
+// 54. BACKGROUND BLEND MODE
+// ----------------------------------------------------------------------------
+.bg-blend-normal { background-blend-mode: normal !important; }
+.bg-blend-multiply { background-blend-mode: multiply !important; }
+.bg-blend-screen { background-blend-mode: screen !important; }
+.bg-blend-overlay { background-blend-mode: overlay !important; }
+.bg-blend-darken { background-blend-mode: darken !important; }
+.bg-blend-lighten { background-blend-mode: lighten !important; }
+.bg-blend-color-dodge { background-blend-mode: color-dodge !important; }
+.bg-blend-color-burn { background-blend-mode: color-burn !important; }
+.bg-blend-hard-light { background-blend-mode: hard-light !important; }
+.bg-blend-soft-light { background-blend-mode: soft-light !important; }
+.bg-blend-difference { background-blend-mode: difference !important; }
+.bg-blend-exclusion { background-blend-mode: exclusion !important; }
+.bg-blend-hue { background-blend-mode: hue !important; }
+.bg-blend-saturation { background-blend-mode: saturation !important; }
+.bg-blend-color { background-blend-mode: color !important; }
+.bg-blend-luminosity { background-blend-mode: luminosity !important; }
+
+// ----------------------------------------------------------------------------
+// 55. FILTERS
+// ----------------------------------------------------------------------------
+
+// Blur
+.blur-none { filter: blur(0) !important; }
+.blur-sm { filter: blur($blur-sm) !important; }
+.blur { filter: blur($blur-base) !important; }
+.blur-md { filter: blur($blur-md) !important; }
+.blur-lg { filter: blur($blur-lg) !important; }
+.blur-xl { filter: blur($blur-xl) !important; }
+.blur-2xl { filter: blur($blur-2xl) !important; }
+.blur-3xl { filter: blur($blur-3xl) !important; }
+
+// Brightness
+.brightness-0 { filter: brightness(0) !important; }
+.brightness-50 { filter: brightness(0.5) !important; }
+.brightness-75 { filter: brightness(0.75) !important; }
+.brightness-90 { filter: brightness(0.9) !important; }
+.brightness-95 { filter: brightness(0.95) !important; }
+.brightness-100 { filter: brightness(1) !important; }
+.brightness-105 { filter: brightness(1.05) !important; }
+.brightness-110 { filter: brightness(1.1) !important; }
+.brightness-125 { filter: brightness(1.25) !important; }
+.brightness-150 { filter: brightness(1.5) !important; }
+.brightness-200 { filter: brightness(2) !important; }
+
+// Contrast
+.contrast-0 { filter: contrast(0) !important; }
+.contrast-50 { filter: contrast(0.5) !important; }
+.contrast-75 { filter: contrast(0.75) !important; }
+.contrast-100 { filter: contrast(1) !important; }
+.contrast-125 { filter: contrast(1.25) !important; }
+.contrast-150 { filter: contrast(1.5) !important; }
+.contrast-200 { filter: contrast(2) !important; }
+
+// Grayscale
+.grayscale-0 { filter: grayscale(0) !important; }
+.grayscale { filter: grayscale(1) !important; }
+
+// Invert
+.invert-0 { filter: invert(0) !important; }
+.invert { filter: invert(1) !important; }
+
+// Saturate
+.saturate-0 { filter: saturate(0) !important; }
+.saturate-50 { filter: saturate(0.5) !important; }
+.saturate-100 { filter: saturate(1) !important; }
+.saturate-150 { filter: saturate(1.5) !important; }
+.saturate-200 { filter: saturate(2) !important; }
+
+// Sepia
+.sepia-0 { filter: sepia(0) !important; }
+.sepia { filter: sepia(1) !important; }
+
+// Hue Rotate
+.hue-rotate-0 { filter: hue-rotate(0deg) !important; }
+.hue-rotate-15 { filter: hue-rotate(15deg) !important; }
+.hue-rotate-30 { filter: hue-rotate(30deg) !important; }
+.hue-rotate-60 { filter: hue-rotate(60deg) !important; }
+.hue-rotate-90 { filter: hue-rotate(90deg) !important; }
+.hue-rotate-180 { filter: hue-rotate(180deg) !important; }
+
+// ----------------------------------------------------------------------------
+// 56. BACKDROP FILTER
+// ----------------------------------------------------------------------------
+.backdrop-blur-none { backdrop-filter: blur(0) !important; }
+.backdrop-blur-sm { backdrop-filter: blur($blur-sm) !important; }
+.backdrop-blur { backdrop-filter: blur($blur-base) !important; }
+.backdrop-blur-md { backdrop-filter: blur($blur-md) !important; }
+.backdrop-blur-lg { backdrop-filter: blur($blur-lg) !important; }
+.backdrop-blur-xl { backdrop-filter: blur($blur-xl) !important; }
+
+.backdrop-brightness-50 { backdrop-filter: brightness(0.5) !important; }
+.backdrop-brightness-75 { backdrop-filter: brightness(0.75) !important; }
+.backdrop-brightness-100 { backdrop-filter: brightness(1) !important; }
+.backdrop-brightness-125 { backdrop-filter: brightness(1.25) !important; }
+.backdrop-brightness-150 { backdrop-filter: brightness(1.5) !important; }
+
+.backdrop-contrast-50 { backdrop-filter: contrast(0.5) !important; }
+.backdrop-contrast-75 { backdrop-filter: contrast(0.75) !important; }
+.backdrop-contrast-100 { backdrop-filter: contrast(1) !important; }
+.backdrop-contrast-125 { backdrop-filter: contrast(1.25) !important; }
+.backdrop-contrast-150 { backdrop-filter: contrast(1.5) !important; }
+
+.backdrop-grayscale-0 { backdrop-filter: grayscale(0) !important; }
+.backdrop-grayscale { backdrop-filter: grayscale(1) !important; }
+
+.backdrop-invert-0 { backdrop-filter: invert(0) !important; }
+.backdrop-invert { backdrop-filter: invert(1) !important; }
+
+.backdrop-saturate-0 { backdrop-filter: saturate(0) !important; }
+.backdrop-saturate-50 { backdrop-filter: saturate(0.5) !important; }
+.backdrop-saturate-100 { backdrop-filter: saturate(1) !important; }
+.backdrop-saturate-150 { backdrop-filter: saturate(1.5) !important; }
+.backdrop-saturate-200 { backdrop-filter: saturate(2) !important; }
+
+.backdrop-sepia-0 { backdrop-filter: sepia(0) !important; }
+.backdrop-sepia { backdrop-filter: sepia(1) !important; }
+
+// ----------------------------------------------------------------------------
+// 57. TRANSITIONS
+// ----------------------------------------------------------------------------
+.transition-none { transition-property: none !important; }
+.transition-all {
+  transition-property: all !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+.transition {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+.transition-opacity {
+  transition-property: opacity !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+.transition-shadow {
+  transition-property: box-shadow !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+.transition-transform {
+  transition-property: transform !important;
+  transition-timing-function: $ease-in-out !important;
+  transition-duration: $dur-normal !important;
+}
+
+// Duration
+.duration-75 { transition-duration: $dur-fast !important; }
+.duration-100 { transition-duration: $dur-fast !important; }
+.duration-150 { transition-duration: $dur-normal !important; }
+.duration-200 { transition-duration: $dur-moderate !important; }
+.duration-300 { transition-duration: $dur-slow !important; }
+.duration-500 { transition-duration: $dur-slower !important; }
+.duration-700 { transition-duration: $dur-slowest !important; }
+
+// Timing Function
+.ease-linear { transition-timing-function: $ease-linear !important; }
+.ease-in { transition-timing-function: $ease-in !important; }
+.ease-out { transition-timing-function: $ease-out !important; }
+.ease-in-out { transition-timing-function: $ease-in-out !important; }
+
+// Delay
+.delay-75 { transition-delay: 75ms !important; }
+.delay-100 { transition-delay: 100ms !important; }
+.delay-150 { transition-delay: 150ms !important; }
+.delay-200 { transition-delay: 200ms !important; }
+.delay-300 { transition-delay: 300ms !important; }
+.delay-500 { transition-delay: 500ms !important; }
+.delay-700 { transition-delay: 700ms !important; }
+
+// ----------------------------------------------------------------------------
+// 58. TRANSFORMS
+// ----------------------------------------------------------------------------
+
+// Scale
+.scale-0 { transform: scale(0) !important; }
+.scale-50 { transform: scale(0.5) !important; }
+.scale-75 { transform: scale(0.75) !important; }
+.scale-90 { transform: scale(0.9) !important; }
+.scale-95 { transform: scale(0.95) !important; }
+.scale-100 { transform: scale(1) !important; }
+.scale-105 { transform: scale(1.05) !important; }
+.scale-110 { transform: scale(1.1) !important; }
+.scale-125 { transform: scale(1.25) !important; }
+.scale-150 { transform: scale(1.5) !important; }
+
+// Scale X
+.scale-x-0 { transform: scaleX(0) !important; }
+.scale-x-50 { transform: scaleX(0.5) !important; }
+.scale-x-75 { transform: scaleX(0.75) !important; }
+.scale-x-90 { transform: scaleX(0.9) !important; }
+.scale-x-95 { transform: scaleX(0.95) !important; }
+.scale-x-100 { transform: scaleX(1) !important; }
+.scale-x-105 { transform: scaleX(1.05) !important; }
+.scale-x-110 { transform: scaleX(1.1) !important; }
+.scale-x-125 { transform: scaleX(1.25) !important; }
+.scale-x-150 { transform: scaleX(1.5) !important; }
+
+// Scale Y
+.scale-y-0 { transform: scaleY(0) !important; }
+.scale-y-50 { transform: scaleY(0.5) !important; }
+.scale-y-75 { transform: scaleY(0.75) !important; }
+.scale-y-90 { transform: scaleY(0.9) !important; }
+.scale-y-95 { transform: scaleY(0.95) !important; }
+.scale-y-100 { transform: scaleY(1) !important; }
+.scale-y-105 { transform: scaleY(1.05) !important; }
+.scale-y-110 { transform: scaleY(1.1) !important; }
+.scale-y-125 { transform: scaleY(1.25) !important; }
+.scale-y-150 { transform: scaleY(1.5) !important; }
+
+// Rotate
+.rotate-0 { transform: rotate(0deg) !important; }
+.rotate-1 { transform: rotate(1deg) !important; }
+.rotate-2 { transform: rotate(2deg) !important; }
+.rotate-3 { transform: rotate(3deg) !important; }
+.rotate-6 { transform: rotate(6deg) !important; }
+.rotate-12 { transform: rotate(12deg) !important; }
+.rotate-45 { transform: rotate(45deg) !important; }
+.rotate-90 { transform: rotate(90deg) !important; }
+.rotate-180 { transform: rotate(180deg) !important; }
+
+// Negative rotate
+.-rotate-1 { transform: rotate(-1deg) !important; }
+.-rotate-2 { transform: rotate(-2deg) !important; }
+.-rotate-3 { transform: rotate(-3deg) !important; }
+.-rotate-6 { transform: rotate(-6deg) !important; }
+.-rotate-12 { transform: rotate(-12deg) !important; }
+.-rotate-45 { transform: rotate(-45deg) !important; }
+.-rotate-90 { transform: rotate(-90deg) !important; }
+.-rotate-180 { transform: rotate(-180deg) !important; }
+
+// Translate (RTL-aware)
+.translate-x-0 { transform: translateX(0) !important; }
+.translate-y-0 { transform: translateY(0) !important; }
+
+@each $key, $value in (1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8, 12: $sp-12, 16: $sp-16) {
+  .translate-x-#{$key} { transform: translateX($value) !important; }
+  .translate-y-#{$key} { transform: translateY($value) !important; }
+  .-translate-x-#{$key} { transform: translateX(calc($value * -1)) !important; }
+  .-translate-y-#{$key} { transform: translateY(calc($value * -1)) !important; }
+}
+
+// Percentage translations
+.translate-x-1\/2 { transform: translateX(50%) !important; }
+.translate-x-full { transform: translateX(100%) !important; }
+.translate-y-1\/2 { transform: translateY(50%) !important; }
+.translate-y-full { transform: translateY(100%) !important; }
+
+.-translate-x-1\/2 { transform: translateX(-50%) !important; }
+.-translate-x-full { transform: translateX(-100%) !important; }
+.-translate-y-1\/2 { transform: translateY(-50%) !important; }
+.-translate-y-full { transform: translateY(-100%) !important; }
+
+// Skew
+.skew-x-0 { transform: skewX(0deg) !important; }
+.skew-x-1 { transform: skewX(1deg) !important; }
+.skew-x-2 { transform: skewX(2deg) !important; }
+.skew-x-3 { transform: skewX(3deg) !important; }
+.skew-x-6 { transform: skewX(6deg) !important; }
+.skew-x-12 { transform: skewX(12deg) !important; }
+
+.skew-y-0 { transform: skewY(0deg) !important; }
+.skew-y-1 { transform: skewY(1deg) !important; }
+.skew-y-2 { transform: skewY(2deg) !important; }
+.skew-y-3 { transform: skewY(3deg) !important; }
+.skew-y-6 { transform: skewY(6deg) !important; }
+.skew-y-12 { transform: skewY(12deg) !important; }
+
+// Negative skew
+.-skew-x-1 { transform: skewX(-1deg) !important; }
+.-skew-x-2 { transform: skewX(-2deg) !important; }
+.-skew-x-3 { transform: skewX(-3deg) !important; }
+.-skew-x-6 { transform: skewX(-6deg) !important; }
+.-skew-x-12 { transform: skewX(-12deg) !important; }
+
+.-skew-y-1 { transform: skewY(-1deg) !important; }
+.-skew-y-2 { transform: skewY(-2deg) !important; }
+.-skew-y-3 { transform: skewY(-3deg) !important; }
+.-skew-y-6 { transform: skewY(-6deg) !important; }
+.-skew-y-12 { transform: skewY(-12deg) !important; }
+
+// Transform Origin
+.origin-center { transform-origin: center !important; }
+.origin-top { transform-origin: top !important; }
+.origin-top-right { transform-origin: top right !important; }
+.origin-right { transform-origin: right !important; }
+.origin-bottom-right { transform-origin: bottom right !important; }
+.origin-bottom { transform-origin: bottom !important; }
+.origin-bottom-left { transform-origin: bottom left !important; }
+.origin-left { transform-origin: left !important; }
+.origin-top-left { transform-origin: top left !important; }
+
+// ----------------------------------------------------------------------------
+// 59. CURSOR
+// ----------------------------------------------------------------------------
+.cursor-auto { cursor: auto !important; }
+.cursor-default { cursor: default !important; }
+.cursor-pointer { cursor: pointer !important; }
+.cursor-wait { cursor: wait !important; }
+.cursor-text { cursor: text !important; }
+.cursor-move { cursor: move !important; }
+.cursor-help { cursor: help !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-none { cursor: none !important; }
+.cursor-grab { cursor: grab !important; }
+.cursor-grabbing { cursor: grabbing !important; }
+
+// ----------------------------------------------------------------------------
+// 60. POINTER EVENTS
+// ----------------------------------------------------------------------------
+.pointer-events-none { pointer-events: none !important; }
+.pointer-events-auto { pointer-events: auto !important; }
+
+// ----------------------------------------------------------------------------
+// 61. RESIZE
+// ----------------------------------------------------------------------------
+.resize-none { resize: none !important; }
+.resize { resize: both !important; }
+.resize-y { resize: vertical !important; }
+.resize-x { resize: horizontal !important; }
+
+// ----------------------------------------------------------------------------
+// 62. USER SELECT
+// ----------------------------------------------------------------------------
+.select-none { user-select: none !important; }
+.select-text { user-select: text !important; }
+.select-all { user-select: all !important; }
+.select-auto { user-select: auto !important; }
+
+// ----------------------------------------------------------------------------
+// 63. APPEARANCE
+// ----------------------------------------------------------------------------
+.appearance-none { appearance: none !important; }
+.appearance-auto { appearance: auto !important; }
+
+// ----------------------------------------------------------------------------
+// 64. WILL CHANGE
+// ----------------------------------------------------------------------------
+.will-change-auto { will-change: auto !important; }
+.will-change-scroll { will-change: scroll-position !important; }
+.will-change-contents { will-change: contents !important; }
+.will-change-transform { will-change: transform !important; }
+
+// ----------------------------------------------------------------------------
+// 65. CONTENT VISIBILITY
+// ----------------------------------------------------------------------------
+.content-auto { content-visibility: auto !important; }
+.content-hidden { content-visibility: hidden !important; }
+.content-visible { content-visibility: visible !important; }
+
+// ----------------------------------------------------------------------------
+// 66. TOUCH ACTION
+// ----------------------------------------------------------------------------
+.touch-auto { touch-action: auto !important; }
+.touch-none { touch-action: none !important; }
+.touch-pan-x { touch-action: pan-x !important; }
+.touch-pan-left { touch-action: pan-left !important; }
+.touch-pan-right { touch-action: pan-right !important; }
+.touch-pan-y { touch-action: pan-y !important; }
+.touch-pan-up { touch-action: pan-up !important; }
+.touch-pan-down { touch-action: pan-down !important; }
+.touch-pinch-zoom { touch-action: pinch-zoom !important; }
+.touch-manipulation { touch-action: manipulation !important; }