react-animated-select 0.5.6 → 0.6.0

package/demo/src/rac.css

@@ -1,746 +0,0 @@
-  :root {
-    --def-white: white;
-    --blck-bc: #151515;
-    --blck-bc-hvr: #252525ff;
-    --blck-bc-fcs: gray;
-    --def-btn: #5ea500;
-    --def-btn-hvr: #3e6c00;
-    --del-btn: #e7000b;
-    --del-btn-hvr: #950007;
-    overflow-x: hidden;
-    --rcp-background: #111111;
-    --rcp-input-bg: #181818;
-    --rcp-border: #222222;
-    --rcp-text-main: #ffffff;
-    --rcp-text-secondary: #888888;
-    --rcp-radius: 8px;
-  }
-
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  a {
-    outline: none;
-  }
-
-  html {
-    height: 100%;
-  }
-
-  body {
-    background-color: black;
-    color: white;
-    scroll-behavior: smooth;
-    height: 100%;
-    margin: 0;
-  }
-
-  #root {
-    height: 100%;
-  }
-
-  input[type=radio] {
-    display: none;
-  }
-
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--blck-bc);
-  border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-  transition: background-color 300ms ease, opacity 300ms ease;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: var(--blck-bc-hvr);
-}
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--blck-bc-hvr) var(--blck-bc);
-}
-
-  .app-main {
-    overflow: hidden;
-    display: flex;
-    height: 100%;
-    --screen: 'desktop';
-
-    @media (max-width: 1024px) {
-      flex-direction: var(--direction);
-      justify-content: var(--justify);
-      text-align: center;
-      --screen: 'mobile';
-    }
-  }
-
-  .fade-main {
-    width: 100%;
-  }
-
-  .page-list {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      
-    @media (max-width: 1024px) {
-      flex-direction: column;
-    }
-  }
-
-  /* STYLES FOR slideDown ANIMATION */
-
-  .slideDown-enter {
-    overflow: hidden;
-    height: 0;
-  }
-
-  .slideDown-enter-active {
-    overflow: hidden;
-    transition: height 300ms ease;
-  }
-
-  .slideDown-enter-done {
-    height: auto;
-  }
-
-  .slideDown-exit {
-    overflow: hidden;
-  }
-
-  .slideDown-exit-active {
-    overflow: hidden;
-    height: 0;
-    transition: height 300ms ease;
-  }
-
-  /*  */
-
-  .slide-left-enter {
-    overflow: hidden;
-    width: 0;
-  }
-
-  .slide-left-enter-active {
-    overflow: hidden;
-    transition: width 300ms ease;
-  }
-
-  .slide-left-enter-done {
-    width: auto;
-  }
-
-  .slide-left-exit {
-    overflow: hidden;
-  }
-
-  .slide-left-exit-active {
-    overflow: hidden;
-    width: 0;
-    transition: width 300ms ease;
-  }
-
-  .content-wrapper {
-    position: relative;
-    overflow-x: hidden;
-    width: 100%;
-    display: flex;
-    height: 100%;
-  }
-
-  .nav-change-enter {
-    opacity: 0;
-    transform: scale(0.5);
-    transition: 300ms transform, 300ms opacity, 300ms filter;
-  }
-
-  .nav-change-enter-active {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .nav-change-exit {
-    opacity: 1;
-    transform: scale(0.5);
-    transition: 300ms transform, 300ms opacity, 300ms filter;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    height: 100%;
-  }
-
-  .nav-change-exit-active {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-.rac-demo-checkbox {
-    display: initial !important;
-    margin: 0;
-    width: 3vw;
-    height: 3vw;
-    accent-color: #252525;
-    cursor: pointer;
-
-    @media (max-width: 1024px) {
-        width: 7vw;
-        height: 7vw;
-    }
-}
-
-.select-arrow-wrapper {
-  margin-left: 0.5vw;
-}
-
-.rac-demo-select {
-    --rac-list-background: #111111;
-    --rac-scroll-color: var(--blck-bc-hvr);
-    --rac-scroll-track: var(--blck-bc);
-    --rac-arrow-padding: 0;
-    --rac-arrow-height: 1.5em;
-    --rac-arrow-width: 1.5em;
-    --rac-group-arrow-height: 1.5em;
-    --rac-group-arrow-width: 1.5em;
-    --rac-cancel-height: 1.5em;
-    --rac-cancel-width: 1.5em;
-
-    --rac-option-hover: #777;
-    --rac-option-highlight: #606060;
-    --rac-option-selected: #4a4a4a;
-    min-height: 4vw;
-    width: 100%;
-    background-color: var(--blck-bc-hvr);
-    color: var(--def-white);
-    border: 0.1vw solid transparent;
-    outline: none;
-    border-radius: 1vw;
-    display: flex;
-    align-items: center;
-    padding: 1vw;
-    font-size: 1.25vw;
-
-    @media (max-width: 1024px) {
-        font-size: 6vw;
-        height: 10vw;
-        border-radius: 2vw;
-        padding: 2vw;
-    }
-}
-
-.rac-group-header {
-  background-color: #1e1e1e;
-  border-radius: 10px;
-}
-
-.rac-error-style {
-    border-color: red;
-}
-
-.rac-disabled-style, .rac-loading-style, .rac-error-style {
-    opacity: 0.75;
-}
-
-.rac-main {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    background-color: #171a1f;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    scroll-behavior: smooth;
-}
-
-.rac-lead-title {
-    margin: 0;
-    padding: 2.25vw 0vw 1vw;
-    font-size: 2.5vw;
-
-    @media (max-width: 1024px) {
-        padding: 4vw 0vw 2vw;
-        font-size: 8vw;
-    }
-}
-
-.rac-groups {
-    height: auto;
-    justify-content: space-evenly;
-    align-items: stretch;
-    border: 0.1px solid #444850;
-    background-color: #1a1b23;
-    border-radius: 15px;
-    display: flex;
-    margin: 2vw;
-
-    @media (max-width: 1024px) {
-        margin: 0;
-        border: 0;
-        flex-direction: column-reverse;
-        padding: 0vw 2vw;
-    }
-}
-
-.rac-props {
-    display: flex;
-    flex-direction: column;
-    min-width: 20%;
-    align-items: baseline;
-    padding: 1.25vw;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-gutter: stable;
-    height: 0; 
-    min-height: 100%;
-
-    @media (max-width: 1024px) {
-        min-height: auto;
-        height: fit-content;
-    }
-}
-
-.rac-props-title {
-    margin: 0;
-    width: 100%;
-}
-
-.rac-animation {
-    display: flex;
-    flex-direction: column;
-}
-
-.rac-animation-title {
-    margin: 0;
-}
-
-.rac-texts {
-    display: flex;
-    flex-direction: column;
-}
-
-.rac-placeholders-title {
-    margin: 0;
-
-    @media (max-width: 1024px) {
-        font-size: 4vw;
-    }
-}
-
-.rac-placeholders-list {
-    padding-top: 1vw;
-    display: flex;
-    flex-direction: column;
-
-    @media (max-width: 1024px) {
-        gap: 2vw;
-    }
-}
-
-.rac-range-label {
-    display: flex;
-    flex-direction: column;
-    padding: 0.75vw 0vw;
-    gap: 1vw;
-    width: 100%;
-
-    @media (max-width: 1024px) {
-        gap: 1vw;
-    }
-}
-
-.rac-opacity-label {
-    display: flex;
-}
-
-.rac-select-wrapper {
-    min-width: 33%;
-    padding: 1.25vw;
-    height: auto;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    text-align: start;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-gutter: stable;
-    min-height: 100%;
-
-    @media (max-width: 1024px) {
-      min-height: auto;
-      height: fit-content;
-      overflow: visible;
-    }
-}
-
-.rac-visual {
-    background-color: #17181e;
-    border-left: 1px solid #33353e;
-    border-right: 1px solid #33353e;
-    padding: 1.25vw;
-    min-width: 33%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-gutter: stable;
-    height: 0;
-    min-height: 100%;
-
-    @media (max-width: 1024px) {
-        border: none;
-        background-color: initial;
-        min-height: auto;
-        height: fit-content;
-    }
-    
-}
-
-.rac-option-title {
-    width: 100%;
-    text-align: center;
-    padding: 1vw 0vw 0vw;
-    font-size: 1.75vw;
-    margin: 1vw 0vw 0vw;
-    border-top: 0.1px solid #43464f;
-
-    @media (max-width: 1024px) {
-        padding: 2vw 0vw 0vw;
-        margin: 3vw 0vw 2vw;
-        font-size: 4vw;
-    }
-}
-
-.rac-prop-label {
-    display: flex;
-    flex-direction: column;
-    text-align: start;
-    width: 100%;
-
-    @media (max-width: 1024px) {
-        gap: 1vw;
-    }
-}
-
-.rac-prop-span {
-    padding-left: 1vw;
-    font-size: 1.25vw;
-
-    @media (max-width: 1024px) {
-        font-size: 5vw;
-    }
-}
-
-.rac-prop-value {
-    margin: 0.75vw 0vw;
-    padding: 1vw;
-    background-color: #252525;
-    outline: none;
-    border: 0.1px solid transparent;
-    border-radius: 20px;
-    color: white;
-    font-size: 1.5vw;
-
-    &::placeholder {
-        color: gray;
-    }
-
-    @media (max-width: 1024px) {
-        font-size: 5vw;
-        padding: 1vw 2vw;
-        border-radius: 10px;
-    }
-}
-
-.rac-add-option {
-    margin: 0.75vw 0vw;
-    padding: 1vw;
-    width: 100%;
-    background-color: #252525;
-    outline: none;
-    border: 0.1px solid transparent;
-    border-radius: 20px;
-    color: white;
-    font-size: 1.5vw;
-    transition: 300ms border;
-
-    &::placeholder {
-        color: gray;
-    }
-
-    &:hover {
-        border: 0.1vw solid var(--def-btn);
-    }
-    
-    @media (max-width: 1024px) {
-        font-size: 6vw;
-        padding: 1vw 3vw;
-        border-radius: 10px;
-    }
-}
-
-.rac-checkbox-wrapper {
-    cursor: pointer;
-    padding: 0.75vw 1vw;
-    gap: 1vw;
-    display: flex;
-    align-items: center;
-    font-size: 1.5vw;
-    
-    @media (max-width: 1024px) {
-        gap: 3vw;
-        font-size: 5.75vw;
-        padding: 2vw 1vw;
-    }
-}
-
-.rac-add-option-button {
-    outline: none;
-    width: 95%;
-    border: 0.1px solid transparent;
-    height: 4vw;
-    border-radius: 10px;
-    background-color: #2d5a3c;
-    color: white;
-    font-size: 1.5vw;
-    padding: 0vw 1vw;
-    margin: 1vw 1vw;
-    transition: 300ms background-color;
-    
-    @media (max-width: 1024px) {
-        font-size: 5vw;
-        margin: 1vw 0vw;
-        border-radius: 10px;
-        height: 8vw;
-        width: 100%;
-    }
-
-    &:hover,
-    &:focus {
-        border: 0.1px solid transparent;
-        background-color: #274e34;
-    }
-}
-
-.rac-form-group {
-    border-bottom: 0.1px solid #43464f;
-    margin-bottom: 1vw;
-    padding-bottom: 1vw;
-}
-
-.rac-select-overview-title {
-    font-size: 2vw;
-    margin: 0;
-    padding: 0vw 0vw 2vw;
-    text-align: center;
-    
-    @media (max-width: 1024px) {
-        font-size: 5vw;
-        padding: 1vw 0vw 3vw;
-    }
-}
-
-.rac-option-demo {
-    width: min-content;
-    text-wrap: nowrap;
-    display: flex;
-    gap: 0.5vw;
-    font-size: 1.25vw;
-    background-color: #111;
-    padding: 1vw;
-    border-radius: 15px;
-    align-items: center;
-    
-    @media (max-width: 1024px) {
-        gap: 2.5vw;
-        font-size: 6vw;
-        padding: 2vw;
-        border-radius: 10px;
-    }
-}
-
-.rac-demo-option-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5vw;
-    
-    @media (max-width: 1024px) {
-        gap: 2.5vw;
-        padding-top: 2vw;
-    }
-}
-
-.rac-delete-demo-option {
-    outline: none;
-    border: none;
-    border-radius: 3px;
-    background-color: red;
-    color: white;
-
-    &:hover,
-    &:focus {
-        border: none;
-    }
-}
-
-.rac-delete-button-icon {
-    height: 1.5vw;
-    padding: 0.5vw;
-    
-    @media (max-width: 1024px) {
-        height: 4.5vw;
-        padding: 1.25vw;
-    }
-}
-
-.rac-option-list-button {
-    outline: none;
-    border: none;
-    background-color: #c96a2d;
-    width: 95%;
-    border: 0.1px solid transparent;
-    min-height: 4vw;
-    border-radius: 10px;
-    color: white;
-    font-size: 1.5vw;
-    padding: 0vw 1vw;
-    margin: 1vw 1vw;
-    transition: 300ms background-color;
-
-    &:hover,
-    &:focus {
-        border: 0.1px solid transparent;
-        background-color: #994e20;
-    }
-    
-    @media (max-width: 1024px) {
-        font-size: 5vw;
-        margin: 1vw 0vw;
-        border-radius: 10px;
-        height: 8vw;
-        width: 100%;
-    }
-}
-
-.rac-fade-text {
-  animation: fadeIn 200ms ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.rac-added-option {
-    width: 100%;
-    display: block;
-    text-align: center;
-    color: #35bb61;
-    font-size: 1.25vw;
-    
-    @media (max-width: 1024px) {
-        font-size: 4vw;
-        padding: 2vw;
-    }
-}
-
-.rac-range-input {
-  appearance: none;
-  width: 100%;
-  height: 8px;
-  border-radius: 4px;
-  background: #ddd;
-  outline: none;
-  margin: 8px 0;
-  transition: background 0.3s;
-}
-
-.rac-range-input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #3b82f6;
-  cursor: pointer;
-  box-shadow: 0 0 4px rgba(0,0,0,0.2);
-  transition: background 0.3s, transform 0.2s;
-}
-.rac-range-input::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-.rac-range-input::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #3b82f6;
-  cursor: pointer;
-  box-shadow: 0 0 4px rgba(0,0,0,0.2);
-  transition: background 0.3s, transform 0.2s;
-}
-.rac-range-input::-moz-range-thumb:hover {
-  transform: scale(1.2);
-}
-
-.rac-range-input::-webkit-slider-runnable-track {
-  height: 8px;
-  border-radius: 4px;
-  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--value, 50%), #ddd var(--value, 50%), #ddd 100%);
-}
-
-.rac-range-input::-moz-range-track {
-  height: 8px;
-  border-radius: 4px;
-  background: #ddd;
-}
-
-.rac-options {
-    border-radius: 1vw;
-}
-
-.rac-select-list {
-    max-height: 350px;
-    color: white;
-    border: var(--select-border);
-    padding: 1vw;
-    width: 100%;
-    opacity: var(--opacity);
-    
-    @media (max-width: 1024px) {
-        padding: 2.5vw 2.5vw;
-    }
-}
-
-.rac-select-title {
-    margin: 0;
-    display: inline-flex;
-    width: fit-content;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    transition: 300ms color;
-
-    @media (max-width: 1024px) {
-        padding-left: 1vw;
-    }
-}
-
-.rac-select-option {
-    border-radius: 1vw;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}