@lemonadejs/dropdown 3.1.12 → 3.2.1

package/dist/style.css

@@ -1,308 +1,374 @@
-.lm-dropdown {
-    display: inline-block;
-    user-select: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    outline-offset: 1px;
-}
-
-.lm-dropdown-header {
-    display: flex;
-    position: relative;
-    align-items: center;
-}
-
-.lm-dropdown-header button {
-    display: none;
-    border: 1px solid transparent;
-    background-color: transparent;
-    text-transform: uppercase;
-    cursor: pointer;
-    padding: 15px;
-    font-weight: bold;
-    outline: 0;
-}
-
-.lm-dropdown .lm-modal {
-    padding: 0;
-    min-width: initial;
-    min-height: 5px;
-    border: 1px solid #ccc;
-    border-radius: 0;
-}
-
-.lm-dropdown .lm-lazy {
-    max-height: 300px;
-}
-
-.lm-dropdown-input {
-    padding: 5px 24px 5px 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    appearance: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    width: 100%;
-    border: 1px solid #ccc;
-    min-height: 1em;
-}
-
-.lm-dropdown-input::after {
-    content: '';
-    position: absolute;
-    width: 24px;
-    height: 100%;
-    top: 0;
-    right: 4px;
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
-    background-position: center;
-    transition: transform .1s ease-in-out;
-}
-
-.lm-dropdown-add {
-    position: absolute;
-    padding: 12px;
-    right: 20px;
-    display: none;
-}
-
-.lm-dropdown-add::after {
-    content: '+';
-}
-
-.lm-dropdown[data-insert="true"] .lm-dropdown-input {
-    padding-right: 35px;
-}
-
-.lm-dropdown[data-state="true"][data-insert="true"] .lm-dropdown-add {
-    display: initial;
-}
-
-.lm-dropdown[data-state="true"] .lm-dropdown-input::after {
-    transform: rotate(-180deg);
-}
-
-.lm-dropdown-input:empty::before {
-    content: "\00a0";
-}
-
-.lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
-    content: "\00a0" attr(placeholder);
-    color: #aaa;
-}
-
-.lm-dropdown-options {
-    width: 100%;
-}
-
-.lm-dropdown-item {
-    box-sizing: border-box;
-}
-
-.lm-dropdown-item[data-group]::before {
-    content: attr(data-group);
-    display: block;
-    padding: 8px;
-    font-weight: bold;
-    width: 100%;
-    background-color: #FFF;
-    color: #000;
-    box-sizing: border-box;
-}
-
-.lm-dropdown-item > div {
-    white-space: nowrap;
-    text-align: left;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: #000;
-    display: flex;
-    align-items: center;
-    padding: 4px 40px 4px 16px;
-    position: relative;
-    box-sizing: border-box;
-}
-
-.lm-dropdown-item > div > img {
-    width: 24px;
-    height: 24px;
-    margin-left: -6px;
-    margin-right: 6px;
-}
-
-.lm-dropdown-item > div > img[src=''] {
-    display: none;
-}
-
-.lm-dropdown-item > div:hover {
-    background-color: dodgerblue !important;
-    color: white;
-}
-
-.lm-dropdown-item[data-cursor="true"] > div {
-    background-color: #eee;
-}
-
-.lm-dropdown-item[data-cursor="true"]:hover > div {
-    background-color: dodgerblue;
-}
-
-.lm-dropdown-item[data-selected="true"] > div {
-    background-color: dodgerblue;
-    color: white;
-}
-
-.lm-dropdown-item[data-selected="true"] > div::after {
-    content: '✓';
-    position: absolute;
-    right: 10px;
-    line-height: 24px;
-}
-
-/** Picker */
-
-.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header button {
-    display: initial;
-    position: absolute;
-    border: 1px solid #ccc;
-    text-align: right;
-    bottom: 300px;
-    left: 0;
-    width: 100% !important;
-}
-
-.lm-dropdown[data-type="picker"] .lm-modal {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100% !important;
-    height: 300px !important;
-}
-
-.lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
-    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
-    text-transform: uppercase;
-    font-size: 1.1em;
-    padding: 16px;
-}
-
-.lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
-    text-align: center;
-    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
-    padding: 16px;
-}
-
-/** Searchbar */
-
-.lm-dropdown[data-type="searchbar"][data-state="true"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-}
-
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-done {
-    display: initial;
-    border-left: 1px solid #ccc;
-    border-bottom: 1px solid #eee;
-    height: 100%;
-}
-
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
-    font-size: 1.5em;
-    border-radius: 0;
-    border: 0;
-    border-bottom: 1px solid #eee;
-    outline: none;
-    background-color: #fff;
-    padding-top: 0;
-    padding-bottom: 0;
-    line-height: 60px;
-    height: 60px;
-}
-
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
-    background: initial;
-}
-
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
-    right: 100px;
-}
-
-.lm-dropdown[data-type="searchbar"] .lm-modal {
-    max-height: initial;
-    bottom: 0;
-    width: 100% !important;
-    height: calc(100% - 60px) !important;
-    border: 0;
-}
-
-.lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
-    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
-    text-transform: uppercase;
-    font-size: 1.1em;
-    padding: 16px;
-}
-
-.lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
-    text-align: center;
-    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
-    padding: 16px;
-}
-
-.lm-dropdown[data-type="searchbar"] .lm-lazy {
-    max-height: initial;
-}
-
-/** Lazyloading */
-
-.lm-lazy {
-    position: relative;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    box-sizing: border-box;
-    height: 100%;
-}
-
-.lm-lazy-scroll {
-    position: absolute;
-    width: 1px;
-}
-
-.lm-lazy-items {
-    position: sticky;
-    top: 0;
-    box-sizing: border-box;
-    width: 100%;
-}
-
-.lm-dropdown-loading .lm-dropdown-add::after {
-    content: '';
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    margin-top: -7px;
-    margin-left: -12px;
-    border-style: solid;
-    border-color: #888;
-    border-top-color: transparent;
-    border-width: 1px;
-    border-radius: 50%;
-    animation: spin .8s linear infinite;
-}
-
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
+.lm-dropdown {
+    display: inline-block;
+    user-select: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    outline-offset: 1px;
+}
+
+.lm-dropdown-header {
+    display: flex;
+    position: relative;
+    align-items: center;
+}
+
+.lm-dropdown-header-controls {
+    display: none;
+}
+
+.lm-application .lm-dropdown-header-controls button,
+.lm-dropdown-header-controls button {
+    background-color: transparent;
+    text-transform: uppercase;
+    cursor: pointer;
+    padding: 15px;
+    font-weight: bold;
+    outline: 0;
+    border: 0;
+    color: var(--lm-main-color);
+}
+
+.lm-dropdown-content {
+    position: relative;
+}
+
+.lm-dropdown .lm-modal {
+    padding: 0;
+    min-width: initial;
+    min-height: 5px;
+    border: 1px solid var(--lm-border-color, #ccc);
+    border-radius: 0;
+}
+
+.lm-dropdown .lm-lazy {
+    max-height: 300px;
+}
+
+.lm-dropdown-input {
+    padding: 5px 24px 5px 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    appearance: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    background: var(--lm-background-color, #fff);
+    border: 1px solid var(--lm-border-color, #ccc);
+    min-height: 1em;
+    border-radius: 2px;
+}
+
+.lm-dropdown-input:focus {
+    outline: 2px solid var(--lm-border-outline, #000);
+    outline-offset: -1px;
+}
+
+.lm-dropdown-input::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 100%;
+    top: 0;
+    right: 4px;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
+    background-position: center;
+    transition: transform .1s ease-in-out;
+}
+
+.lm-dropdown-add {
+    position: absolute;
+    padding: 12px;
+    right: 20px;
+    display: none;
+}
+
+.lm-dropdown-add::after {
+    content: '+';
+}
+
+.lm-dropdown[data-insert="true"] .lm-dropdown-input {
+    padding-right: 35px;
+}
+
+.lm-dropdown[data-state="true"][data-insert="true"] .lm-dropdown-add {
+    display: initial;
+}
+
+.lm-dropdown[data-state="true"] .lm-dropdown-input::after {
+    transform: rotate(-180deg);
+}
+
+.lm-dropdown-input:empty::before {
+    content: "\00a0";
+}
+
+.lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
+    content: "\00a0" attr(placeholder);
+    color: #aaa;
+}
+
+.lm-dropdown-options {
+    width: 100%;
+}
+
+.lm-dropdown-item {
+    box-sizing: border-box;
+}
+
+.lm-dropdown-item[data-group]::before {
+    content: attr(data-group);
+    display: block;
+    padding: 8px;
+    font-weight: bold;
+    width: 100%;
+    background-color: #FFF;
+    color: #000;
+    box-sizing: border-box;
+}
+
+.lm-dropdown-item > div {
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: #000;
+    display: flex;
+    align-items: center;
+    padding: 4px 40px 4px 16px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.lm-dropdown-item > div > span:empty::before {
+    content: "\00a0";
+}
+
+.lm-dropdown-item > div > img {
+    width: 24px;
+    height: 24px;
+    margin-left: -6px;
+    margin-right: 6px;
+}
+
+.lm-dropdown-item > div > img[src=''] {
+    display: none;
+}
+
+.lm-dropdown-item > div:hover {
+    background-color: dodgerblue !important;
+    color: white;
+}
+
+.lm-dropdown-item[data-cursor="true"] > div {
+    background-color: #eee;
+}
+
+.lm-dropdown-item[data-cursor="true"]:hover > div {
+    background-color: dodgerblue;
+}
+
+.lm-dropdown-item[data-selected="true"] > div {
+    background-color: dodgerblue;
+    color: white;
+}
+
+.lm-dropdown-item[data-selected="true"] > div::after {
+    content: '✓';
+    position: absolute;
+    right: 10px;
+    line-height: 24px;
+}
+
+/** Picker */
+
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-content .lm-modal {
+    box-shadow: initial;
+    border: initial;
+}
+
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-content {
+    position: initial;
+}
+
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header-controls {
+    display: flex;
+    position: fixed;
+    bottom: 300px;
+    left: 0;
+    width: 100% !important;
+    background-color: #fff;
+    z-index: 1;
+    box-sizing: border-box;
+    border-top: 1px solid var(--lm-border-color);
+    border-bottom: 1px solid var(--lm-border-color);
+    box-shadow: 0 0 12px rgb(0 0 0 / 22%);
+    justify-content: right;
+}
+
+.lm-dropdown[data-type="picker"] .lm-modal {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100% !important;
+    height: 300px !important;
+}
+
+.lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
+    text-transform: uppercase;
+    font-size: 1.1em;
+    padding: 16px;
+}
+
+.lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
+    text-align: center;
+    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
+    padding: 16px;
+}
+
+/** Searchbar */
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    z-index: 1;
+    box-sizing: border-box;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-content .lm-modal {
+    box-shadow: initial;
+    border: initial;
+    border-top: 1px solid var(--lm-border-color);
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-content {
+    position: initial;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header-controls {
+    display: initial;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background-color: #fff;
+    z-index: 1;
+    padding-top: 5px;
+    box-sizing: border-box;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
+    font-size: 1.5em;
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid #eee;
+    outline: none;
+    background-color: #fff;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 60px;
+    height: 60px;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
+    background: initial;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
+    right: 100px;
+}
+
+.lm-dropdown[data-type="searchbar"] .lm-modal {
+    max-height: initial;
+    bottom: 0;
+    width: 100% !important;
+    height: calc(100% - 60px) !important;
+    border: 0;
+}
+
+.lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
+    text-transform: uppercase;
+    font-size: 1.1em;
+    padding: 16px;
+}
+
+.lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
+    text-align: center;
+    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
+    padding: 16px;
+}
+
+.lm-dropdown[data-type="searchbar"] .lm-lazy {
+    max-height: initial;
+}
+
+.lm-dropdown .lm-lazy {
+    scrollbar-width: thin;
+}
+
+.lm-dropdown .lm-lazy::-webkit-scrollbar {
+    height: 12px;
+}
+
+.lm-dropdown .lm-lazy::-webkit-scrollbar {
+    width: 12px;
+}
+
+.lm-dropdown-loading .lm-dropdown-add::after {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    margin-top: -7px;
+    margin-left: -12px;
+    border-style: solid;
+    border-color: #888;
+    border-top-color: transparent;
+    border-width: 1px;
+    border-radius: 50%;
+    animation: lm-dropdown-spin .8s linear infinite;
+}
+
+@keyframes lm-dropdown-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.lm-dark-mode .lm-dropdown-item > div {
+    color: white;
+}
+
+/** Lazyloading */
+
+.lm-lazy {
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.lm-lazy-scroll {
+    position: absolute;
+    width: 1px;
+}
+
+.lm-lazy-items {
+    position: sticky;
+    top: 0;
+    box-sizing: border-box;
+    width: 100%;
 }