@lion-npm/ui 1.0.2 → 1.0.4

package/src/assets/css/inputs/inputs-android.css

@@ -1,259 +0,0 @@
-/* ==========================================================================
-   Android Material Design 3 - Isolated Input Configuration
-   ========================================================================== */
-
-.android-input-container {
-    --android-input-color: var(--bs-primary, #0d6efd);
-    --android-input-label-bg: var(--bs-body-bg, #ffffff);
-    --android-input-border-color: var(--bs-border-color, #ccc);
-    --android-input-error-color: var(--bs-danger, #dc3545);
-
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 100%;
-    font-family: var(--bs-body-font-family, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
-    box-sizing: border-box;
-}
-
-.android-input-field-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    transition: all 0.4s ease-in-out;
-}
-
-/* --- Real Input Element --- */
-.android-input-element {
-    width: 100%;
-    max-width: 100%;
-    border: 1px solid var(--android-input-border-color);
-    border-radius: var(--bs-border-radius-sm, 4px);
-    background-color: transparent;
-    color: var(--bs-body-color, #212529);
-    font: inherit;
-    font-size: 1rem;
-    outline: none;
-    box-sizing: border-box;
-    transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
-}
-
-/* Android Sizes */
-.android-input-field-wrapper.android-size-normal .android-input-element {
-    padding: 14.5px 14px;
-}
-
-.android-input-field-wrapper.android-size-small .android-input-element {
-    padding: 10px 12px;
-    font-size: 0.875rem;
-}
-
-/* --- Outlined Style (Default) --- */
-.android-input-field-wrapper.android-style-outlined {
-    background-color: transparent;
-}
-
-.android-input-field-wrapper.android-style-outlined .android-input-element:focus,
-.android-input-field-wrapper.android-style-outlined .android-input-element:not(:placeholder-shown) {
-    border-color: var(--android-active-color, var(--android-input-color));
-}
-
-.android-input-field-wrapper.android-style-outlined .android-input-element:focus {
-    box-shadow: 0 0 0 1px var(--android-active-color, var(--android-input-color));
-}
-
-/* --- Filled Style --- */
-.android-input-field-wrapper.android-style-filled {
-    background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 8%, var(--bs-body-bg, #ffffff));
-    border-radius: 4px 4px 0 0;
-    border-bottom: 1px solid var(--android-input-border-color);
-}
-
-.android-input-field-wrapper.android-style-filled .android-input-element {
-    border: none;
-    background: transparent;
-}
-
-/* Specific top padding for Filled based on size */
-.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element {
-    padding: 22px 14px 6px 14px;
-}
-
-.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element {
-    padding: 18px 12px 4px 12px;
-}
-
-/* Active bottom border and background for Filled with focus or value */
-.android-input-field-wrapper.android-style-filled.is-focused,
-.android-input-field-wrapper.android-style-filled:has(.android-input-element:not(:placeholder-shown)) {
-    border-bottom: 2px solid var(--android-active-color, var(--android-input-color));
-    background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 14%, var(--bs-body-bg, #ffffff));
-}
-
-/* ==========================================================================
-   Android Floating Label Logic (Proportional to Normal and Small sizes)
-   ========================================================================== */
-
-.android-input-label {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    color: var(--bs-secondary-color, #777);
-    font-size: 1rem;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: transparent;
-    padding: 0 4px;
-    z-index: 2;
-    margin: 0;
-    white-space: nowrap;
-    max-width: calc(100% - 28px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.android-input-field-wrapper.android-size-small .android-input-label {
-    left: 12px;
-    font-size: 0.875rem;
-    max-width: calc(100% - 24px);
-}
-
-/* --- Outlined Floating States --- */
-.android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:focus ~ .android-input-label,
-.android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
-    top: 0;
-    transform: translateY(-50%);
-    font-size: 0.75rem;
-    color: var(--android-active-color, var(--android-input-color));
-    background-color: var(--android-input-label-bg);
-}
-
-.android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:focus ~ .android-input-label,
-.android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
-    top: 0;
-    transform: translateY(-50%);
-    font-size: 0.68rem;
-    color: var(--android-active-color, var(--android-input-color));
-    background-color: var(--android-input-label-bg);
-}
-
-/* --- Filled Floating States (Proportionally adjusted for Normal and Small) --- */
-.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:focus ~ .android-input-label,
-.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
-    top: 8px;
-    transform: translateY(0);
-    font-size: 0.75rem;
-    color: var(--android-active-color, var(--android-input-color));
-    background-color: transparent;
-}
-
-.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:focus ~ .android-input-label,
-.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
-    top: 5px;
-    transform: translateY(0);
-    font-size: 0.68rem;
-    color: var(--android-active-color, var(--android-input-color));
-    background-color: transparent;
-}
-
-/* Hide placeholder at rest */
-.android-input-element:not(:focus)::placeholder {
-    color: transparent !important;
-}
-
-.android-input-element:focus::placeholder {
-    color: var(--bs-secondary-color, #aaa);
-    opacity: 0.7;
-}
-
-/* ==========================================================================
-   Android Color Variants Mapping
-   ========================================================================== */
-.android-input-container.android-variant-primary {
-    --android-active-color: var(--bs-primary, #0d6efd);
-}
-
-.android-input-container.android-variant-secondary {
-    --android-active-color: var(--bs-secondary, #6c757d);
-}
-
-.android-input-container.android-variant-success {
-    --android-active-color: var(--bs-success, #198754);
-}
-
-.android-input-container.android-variant-danger {
-    --android-active-color: var(--bs-danger, #dc3545);
-}
-
-.android-input-container.android-variant-warning {
-    --android-active-color: var(--bs-warning, #ffc107);
-}
-
-.android-input-container.android-variant-info {
-    --android-active-color: var(--bs-info, #0dcaf0);
-}
-
-.android-input-container.android-variant-dark {
-    --android-active-color: var(--bs-dark, #212529);
-}
-
-/* Custom Lion Variants */
-.android-input-container.android-variant-lion-packages {
-    --android-active-color: var(--lion-packages, #6f42c1);
-}
-
-.android-input-container.android-variant-lion-parking {
-    --android-active-color: var(--lion-parking, #20c997);
-}
-
-.android-input-container.android-variant-lion-tech {
-    --android-active-color: var(--lion-tech, #fd7e14);
-}
-
-.android-input-container.android-variant-lion-glam {
-    --android-active-color: var(--lion-glam, #e83e8c);
-}
-
-/* --- Error States & Subtext --- */
-.android-input-field-wrapper.has-error {
-    border-color: var(--android-input-error-color) !important;
-}
-
-.android-input-field-wrapper.has-error .android-input-element {
-    border-color: var(--android-input-error-color) !important;
-}
-
-.android-input-field-wrapper.has-error .android-input-label {
-    color: var(--android-input-error-color) !important;
-}
-
-.android-input-subtext-container {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.25rem 0.25rem 0 0.25rem;
-}
-
-.android-input-error-text {
-    font-size: 0.78rem;
-    color: var(--android-input-error-color);
-    margin-top: 0.25rem;
-    font-weight: 500;
-}
-
-.android-input-helper-text {
-    font-size: 0.78rem;
-    color: var(--bs-secondary-color, #777);
-    margin-top: 0.25rem;
-}
-
-.android-input-counter {
-    margin-left: auto;
-    margin-top: 0.25rem;
-    color: var(--bs-secondary-color, #777);
-    font-size: 0.78rem;
-}

package/src/assets/css/inputs/inputs-bootstrap.css

@@ -1,74 +0,0 @@
-/* ==========================================================================
-   LION UI LIBRARY - BOOTSTRAP 5 INPUT SYSTEM
-   ========================================================================== */
-
-/* --- Color Variables Mapping per Variant --- */
-.form-control.bootstrap-variant-primary { --bootstrap-active-color: var(--bs-primary, #0d6efd); }
-.form-control.bootstrap-variant-secondary { --bootstrap-active-color: var(--bs-secondary, #6c757d); }
-.form-control.bootstrap-variant-success { --bootstrap-active-color: var(--bs-success, #198754); }
-.form-control.bootstrap-variant-danger { --bootstrap-active-color: var(--bs-danger, #dc3545); }
-.form-control.bootstrap-variant-warning { --bootstrap-active-color: var(--bs-warning, #ffc107); }
-.form-control.bootstrap-variant-info { --bootstrap-active-color: var(--bs-info, #0dcaf0); }
-.form-control.bootstrap-variant-dark { --bootstrap-active-color: var(--bs-dark, #212529); }
-
-/* Custom Lion Variants */
-.form-control.bootstrap-variant-lion-packages { --bootstrap-active-color: var(--lion-packages, #6f42c1); }
-.form-control.bootstrap-variant-lion-parking { --bootstrap-active-color: var(--lion-parking, #20c997); }
-.form-control.bootstrap-variant-lion-tech { --bootstrap-active-color: var(--lion-tech, #fd7e14); }
-.form-control.bootstrap-variant-lion-glam { --bootstrap-active-color: var(--lion-glam, #e83e8c); }
-
-/* --- Native Bootstrap Focus Overrides --- */
-.form-control.bootstrap-variant-primary:focus,
-.form-control.bootstrap-variant-secondary:focus,
-.form-control.bootstrap-variant-success:focus,
-.form-control.bootstrap-variant-danger:focus,
-.form-control.bootstrap-variant-warning:focus,
-.form-control.bootstrap-variant-info:focus,
-.form-control.bootstrap-variant-dark:focus,
-.form-control.bootstrap-variant-lion-packages:focus,
-.form-control.bootstrap-variant-lion-parking:focus,
-.form-control.bootstrap-variant-lion-tech:focus,
-.form-control.bootstrap-variant-lion-glam:focus {
-    border-color: var(--bootstrap-active-color);
-    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bootstrap-active-color) 25%, transparent);
-}
-
-/* --- Floating Label Color Synchronization --- */
-.form-floating:has(.form-control.bootstrap-variant-primary:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-primary:not(:placeholder-shown)) > label { color: var(--bs-primary); }
-
-.form-floating:has(.form-control.bootstrap-variant-secondary:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-secondary:not(:placeholder-shown)) > label { color: var(--bs-secondary); }
-
-.form-floating:has(.form-control.bootstrap-variant-success:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-success:not(:placeholder-shown)) > label { color: var(--bs-success); }
-
-.form-floating:has(.form-control.bootstrap-variant-danger:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-danger:not(:placeholder-shown)) > label { color: var(--bs-danger); }
-
-.form-floating:has(.form-control.bootstrap-variant-warning:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-warning:not(:placeholder-shown)) > label { color: var(--bs-warning); }
-
-.form-floating:has(.form-control.bootstrap-variant-info:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-info:not(:placeholder-shown)) > label { color: var(--bs-info); }
-
-.form-floating:has(.form-control.bootstrap-variant-dark:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-dark:not(:placeholder-shown)) > label { color: var(--bs-dark); }
-
-.form-floating:has(.form-control.bootstrap-variant-lion-packages:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-lion-packages:not(:placeholder-shown)) > label { color: var(--lion-packages, #6f42c1); }
-
-.form-floating:has(.form-control.bootstrap-variant-lion-parking:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-lion-parking:not(:placeholder-shown)) > label { color: var(--lion-parking, #20c997); }
-
-.form-floating:has(.form-control.bootstrap-variant-lion-tech:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-lion-tech:not(:placeholder-shown)) > label { color: var(--lion-tech, #fd7e14); }
-
-.form-floating:has(.form-control.bootstrap-variant-lion-glam:focus) > label,
-.form-floating:has(.form-control.bootstrap-variant-lion-glam:not(:placeholder-shown)) > label { color: var(--lion-glam, #e83e8c); }
-
-/* --- Shape Utility Overrides --- */
-.form-control.rounded-pill {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-}

package/src/assets/css/inputs/inputs-ios.css

@@ -1,268 +0,0 @@
-/* ==========================================================================
-   LION UI LIBRARY - IOS INPUT SYSTEM (STANDARDIZED & ISOLATED)
-   ========================================================================== */
-
-.ios-input-container {
-    --ios-input-bg: var(--bs-body-bg, #ffffff);
-    --ios-input-color: var(--bs-body-color, #212529);
-    --ios-input-border-color: var(--bs-border-color, #dee2e6);
-    --ios-input-placeholder-color: var(--bs-secondary-color, #6c757d);
-    --ios-input-focus-color: var(--bs-primary, #0d6efd);
-    --ios-input-error-color: var(--bs-danger, #dc3545);
-    --ios-input-disabled-bg: var(--bs-tertiary-bg, #f8f9fa);
-
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.ios-input-label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--ios-input-color);
-    margin-left: 4px;
-    letter-spacing: -0.08px;
-}
-
-/* Wrapper Base */
-.ios-input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background-color: var(--ios-input-bg);
-    color: var(--ios-input-color);
-    transition: all 0.2s ease-in-out;
-    box-sizing: border-box;
-    width: 100%;
-    overflow: hidden;
-}
-
-/* --- Sizes (Scoped with ios-size-) --- */
-.ios-input-wrapper.ios-size-sx {
-    min-height: 30px;
-    font-size: 12px;
-    padding: 0 8px;
-}
-
-.ios-input-wrapper.ios-size-sm {
-    min-height: 36px;
-    font-size: 14px;
-    padding: 0 10px;
-}
-
-.ios-input-wrapper.ios-size-md {
-    min-height: 44px;
-    font-size: 16px;
-    padding: 0 14px;
-}
-
-.ios-input-wrapper.ios-size-lg {
-    min-height: 52px;
-    font-size: 18px;
-    padding: 0 16px;
-}
-
-/* --- Shapes (Scoped with ios-shape-) --- */
-.ios-input-wrapper.ios-shape-rounded {
-    border-radius: 12px !important;
-}
-
-.ios-input-wrapper.ios-shape-pill {
-    border-radius: 9999px !important;
-    padding-left: 18px !important;
-    padding-right: 18px !important;
-}
-
-.ios-input-wrapper.ios-shape-square {
-    border-radius: 4px !important;
-}
-
-/* --- Style Types (Scoped with ios-style-) --- */
-
-.ios-input-wrapper.ios-style-rounded-border,
-.ios-input-wrapper.ios-style-outlined {
-    border: 1.5px solid var(--ios-input-border-color);
-    background-color: transparent;
-}
-
-.ios-input-wrapper.ios-style-rounded-border.is-focused,
-.ios-input-wrapper.ios-style-outlined.is-focused {
-    border-color: var(--ios-active-color, var(--ios-input-focus-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-active-color, var(--ios-input-focus-color)) 20%, transparent);
-}
-
-.ios-input-wrapper.ios-style-form {
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid var(--ios-input-border-color);
-    border-radius: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.ios-input-wrapper.ios-style-form.is-focused {
-    border-bottom-color: var(--ios-active-color, var(--ios-input-focus-color));
-    box-shadow: none;
-}
-
-.ios-input-wrapper.ios-style-filled {
-    background-color: var(--bs-tertiary-bg, #f1f3f5);
-    border: 1px solid transparent;
-}
-
-.ios-input-wrapper.ios-style-filled.is-focused {
-    background-color: var(--ios-input-bg);
-    border-color: var(--ios-active-color, var(--ios-input-focus-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-active-color, var(--ios-input-focus-color)) 20%, transparent);
-}
-
-.ios-input-wrapper.ios-style-plain {
-    background-color: transparent;
-    border: none;
-    padding: 0 !important;
-}
-
-/* --- Variants Mapping (Scoped with ios-variant-) --- */
-.ios-input-container.ios-variant-primary {
-    --ios-active-color: var(--bs-primary, #0d6efd);
-}
-
-.ios-input-container.ios-variant-secondary {
-    --ios-active-color: var(--bs-secondary, #6c757d);
-}
-
-.ios-input-container.ios-variant-success {
-    --ios-active-color: var(--bs-success, #198754);
-}
-
-.ios-input-container.ios-variant-danger {
-    --ios-active-color: var(--bs-danger, #dc3545);
-}
-
-.ios-input-container.ios-variant-warning {
-    --ios-active-color: var(--bs-warning, #ffc107);
-}
-
-.ios-input-container.ios-variant-info {
-    --ios-active-color: var(--bs-info, #0dcaf0);
-}
-
-.ios-input-container.ios-variant-dark {
-    --ios-active-color: var(--bs-dark, #212529);
-}
-
-/* Custom Lion Variants */
-.ios-input-container.ios-variant-lion-packages {
-    --ios-active-color: var(--lion-packages, #6f42c1);
-}
-
-.ios-input-container.ios-variant-lion-parking {
-    --ios-active-color: var(--lion-parking, #20c997);
-}
-
-.ios-input-container.ios-variant-lion-tech {
-    --ios-active-color: var(--lion-tech, #fd7e14);
-}
-
-.ios-input-container.ios-variant-lion-glam {
-    --ios-active-color: var(--lion-glam, #e83e8c);
-}
-
-/* --- States --- */
-.ios-input-wrapper.has-error {
-    border-color: var(--ios-input-error-color) !important;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-input-error-color) 20%, transparent) !important;
-}
-
-.ios-input-wrapper.is-disabled {
-    background-color: var(--ios-input-disabled-bg);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.ios-input-wrapper.is-readonly {
-    background-color: var(--ios-input-disabled-bg);
-}
-
-/* --- Internal Elements --- */
-.ios-input-element {
-    width: 100%;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: inherit;
-    padding: 6px 0;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.ios-input-element::placeholder {
-    color: var(--ios-input-placeholder-color);
-    opacity: 1;
-}
-
-.ios-input-icon-left,
-.ios-input-icon-right {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--ios-input-placeholder-color);
-    flex-shrink: 0;
-}
-
-.ios-input-icon-left {
-    margin-right: 8px;
-}
-
-.ios-input-icon-right {
-    margin-left: 8px;
-}
-
-.input-prefix {
-    margin-right: 6px;
-    color: var(--ios-input-placeholder-color);
-}
-
-.input-suffix {
-    margin-left: 6px;
-    color: var(--ios-input-placeholder-color);
-}
-
-.ios-clear-button {
-    border: none;
-    background: var(--bs-secondary-bg, #e9ecef);
-    color: var(--ios-input-color);
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10px;
-    cursor: pointer;
-    padding: 0;
-    margin-left: 6px;
-    flex-shrink: 0;
-    transition: background 0.2s;
-}
-
-.ios-clear-button:hover {
-    background: var(--bs-secondary, #6c757d);
-    color: #fff;
-}
-
-.ios-input-helper-text {
-    font-size: 12px;
-    color: var(--ios-input-placeholder-color);
-    margin-left: 4px;
-}
-
-.ios-input-error-text {
-    font-size: 12px;
-    color: var(--ios-input-error-color);
-    margin-left: 4px;
-    font-weight: 500;
-}

package/src/assets/css/loadings/loading-bar.css

@@ -1,86 +0,0 @@
-.custom-progress-bar {
-    position: relative;
-    height: 4px;
-    background-color: #E0E0E0;
-    overflow: hidden;
-    border-radius: 4px;
-    --lion-active-color: var(--bs-primary, #0d6efd);
-}
-
-.custom-progress-bar.loading-variant-primary {
-    --lion-active-color: var(--bs-primary, #0d6efd);
-}
-
-.custom-progress-bar.loading-variant-secondary {
-    --lion-active-color: var(--bs-secondary, #6c757d);
-}
-
-.custom-progress-bar.loading-variant-success {
-    --lion-active-color: var(--bs-success, #198754);
-}
-
-.custom-progress-bar.loading-variant-danger {
-    --lion-active-color: var(--bs-danger, #dc3545);
-}
-
-.custom-progress-bar.loading-variant-warning {
-    --lion-active-color: var(--bs-warning, #ffc107);
-}
-
-.custom-progress-bar.loading-variant-info {
-    --lion-active-color: var(--bs-info, #0dcaf0);
-}
-
-.custom-progress-bar.loading-variant-light {
-    --lion-active-color: var(--bs-dark, #212529);
-}
-
-.custom-progress-bar.loading-variant-dark {
-    --lion-active-color: var(--bs-dark, #212529);
-}
-
-.custom-progress-bar.loading-variant-link {
-    --lion-active-color: var(--bs-primary, #0d6efd);
-}
-
-.custom-progress-bar.loading-variant-lion-packages {
-    --lion-active-color: var(--lion-packages, #6f42c1);
-}
-
-.custom-progress-bar.loading-variant-lion-parking {
-    --lion-active-color: var(--lion-parking, #20c997);
-}
-
-.custom-progress-bar.loading-variant-lion-tech {
-    --lion-active-color: var(--lion-tech, #fd7e14);
-}
-
-.custom-progress-bar.loading-variant-lion-glam {
-    --lion-active-color: var(--lion-glam, #e83e8c);
-}
-
-.custom-progress-bar .indeterminate {
-    position: absolute;
-    background-color: var(--lion-active-color);
-    top: 0;
-    left: -40%;
-    height: 100%;
-    width: 40%;
-    animation: indeterminate 1.2s infinite;
-    border-radius: 4px;
-}
-
-@keyframes indeterminate {
-    0% {
-        left: -40%;
-        width: 40%;
-    }
-    50% {
-        left: 20%;
-        width: 60%;
-    }
-    100% {
-        left: 100%;
-        width: 40%;
-    }
-}