@stackline/angular-multiselect-dropdown 2.0.4 → 2.0.5

package/src/app/angular2-multiselect-dropdown/multiselect.component.scss

@@ -1,593 +0,0 @@
-
-$base-color: #0079FE;
-
-.stackline-dropdown{
-    position: relative;
-}
-.c-btn{
-    display: inline-block;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    font-size: 14px;
-    color: #333;
-}
-.c-btn.disabled{
-    background: #ccc;
-}
-.c-btn:focus{
-        outline: none;
-    }
-.selected-list{
-    .c-list{
-        display: flex;
-        flex: 1 1 auto;
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0;
-        float: none;
-        padding: 0px;
-        margin: 0px;
-        width: auto;
-        .c-token{
-            list-style: none;  
-            padding: 0px 5px;
-            background: $base-color; 
-            color: #fff;
-            border-radius: 2px;
-            margin-right: 4px;
-            margin-top: 2px;
-            float: left;
-            .c-label{
-                display: block;
-                float: left;
-                /*width: 50px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;*/
-            }
-            .fa-remove{
-                margin-left: 1px;
-                font-size: 12px;
-            }
-        }
-    }
-    .fa-angle-down, .fa-angle-up{
-        font-size: 15pt;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-    .countplaceholder {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        align-self: center;
-        margin: 0 0 0 6px;
-        line-height: 1;
-    }
-    .c-btn{
-        box-sizing: border-box;
-        width: 100%;
-        box-shadow: 0px 1px 5px #959595;
-        padding: 10px 36px 10px 10px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        position: relative;
-    }
-}
-.dropdown-list{
-    position: absolute;
-    padding-top: 14px;
-    width: 100%;
-    z-index: 9999;
-    ul{
-        padding: 0px;
-        list-style: none;
-        overflow: auto;
-        margin: 0px;
-        li{
-            padding: 10px 10px;
-            cursor: pointer;
-            text-align: left;
-        }
-        li:first-child{
-            padding-top: 10px;
-        }
-        li:last-child{
-            padding-bottom: 10px;
-        }
-        li:hover{
-            background: #f5f5f5;
-        }
-    }
-    ::-webkit-scrollbar{
-        width: 8px;
-    }
-    ::-webkit-scrollbar-thumb{
-        background: #cccccc;
-        border-radius: 5px;
-    }
-    ::-webkit-scrollbar-track{
-        background: #f2f2f2;
-    }
-}
-.arrow-up {
-  width: 0; 
-  height: 0; 
-  border-left: 13px solid transparent;
-  border-right: 13px solid transparent;
-  border-bottom: 15px solid #fff;
-  margin-left: 15px;
-  position: absolute;
-  top: 0;
-}
-.arrow-2{
-    border-bottom: 15px solid #ccc;
-    top: -1px;
-}
-.list-area{
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    background: #fff;
-    margin: 0px;
-    box-shadow: 0px 1px 5px #959595;
-}
-.select-all{
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-    text-align: left;
-}
-.list-filter{
-    border-bottom: 1px solid #ccc;
-    position: relative;
-    input{
-        border: 0px;
-        width: 100%;
-        height: 35px;
-        padding: 0px 0px 0px 35px;
-    }
-    input:focus{
-        outline: none;
-    }
-    .fa{
-        position: absolute;
-        top: 10px;
-        left: 13px;
-        color: #888;
-    }
-}
-.pure-checkbox input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.pure-checkbox input[type="checkbox"]:focus + label:before,
-.pure-checkbox input[type="checkbox"]:hover + label:before
- {
-  border-color: $base-color;
-  background-color: #f2f2f2;
-}
-.pure-checkbox input[type="checkbox"]:active + label:before {
-  transition-duration: 0s;
-}
-.pure-checkbox input[type="checkbox"] + label{
-  position: relative;
-  padding-left: 2em;
-  vertical-align: middle;
-  user-select: none;
-  cursor: pointer;
-  margin: 0px;
-  color: #000;
-  font-weight: 300;
-}
-.pure-checkbox input[type="checkbox"] + label:before{
-  box-sizing: content-box;
-  content: '';
-  color: $base-color;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 14px;
-  height: 14px;
-  margin-top: -9px;
-  border: 2px solid $base-color;
-  text-align: center;
-  transition: all 0.4s ease;
-}
-.pure-checkbox input[type="checkbox"] + label:after{
-  box-sizing: content-box;
-  content: '';
-  background-color: $base-color;
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  width: 10px;
-  height: 10px;
-  margin-top: -5px;
-  transform: scale(0);
-  transform-origin: 50%;
-  transition: transform 200ms ease-out;
-}
-.pure-checkbox input[type="checkbox"]:disabled + label:before{
-  border-color: #cccccc;
-}
-.pure-checkbox input[type="checkbox"]:disabled:focus + label:before
-.pure-checkbox input[type="checkbox"]:disabled:hover + label:before{
-  background-color: inherit;
-}
-.pure-checkbox input[type="checkbox"]:disabled:checked + label:before{
-  background-color: #cccccc;
-}
-.pure-checkbox input[type="checkbox"] + label:after{
-  background-color: transparent;
-  top: 50%;
-  left: 4px;
-  width: 8px;
-  height: 3px;
-  margin-top: -4px;
-  border-style: solid;
-  border-color: #ffffff;
-  border-width: 0 0 3px 3px;
-  border-image: none;
-  transform: rotate(-45deg) scale(0);
-}
-.pure-checkbox input[type="checkbox"]:checked + label:after{
-  content: '';
-  transform: rotate(-45deg) scale(1);
-  transition: transform 200ms ease-out;
-}
-.pure-checkbox input[type="radio"]:checked + label:before{
-  background-color: white;
-}
-.pure-checkbox input[type="radio"]:checked + label:after{
-  transform: scale(1);
-}
-.pure-checkbox input[type="radio"] + label:before{
-  border-radius: 50%;
-}
-.pure-checkbox input[type="checkbox"]:checked + label:before{
-  background: $base-color;
-}
-.pure-checkbox input[type="checkbox"]:checked + label:after{
-  transform: rotate(-45deg) scale(1);
-}
-.list-message{
-    text-align: center;
-}
-.list-grp{
-    padding: 0 15px !important;
-}
-.list-grp h4 {
-    text-transform: capitalize;
-    margin: 15px 0px 0px 0px;
-    font-size: 14px;
-    font-weight: 700;
-}
-.list-grp > li {
-    padding-left: 15px !important;
-}
-
-.stackline-dropdown.theme-material {
-    --ms-primary: #3f51b5;
-    --ms-primary-soft: rgba(63, 81, 181, 0.12);
-    --ms-surface: #ffffff;
-    --ms-surface-soft: #f5f7fb;
-    --ms-surface-muted: #e8eaf6;
-    --ms-outline: #c5cae9;
-    --ms-outline-strong: #7986cb;
-    --ms-on-surface: #212121;
-    --ms-on-surface-muted: #5f6368;
-    --ms-chip-bg: #e8eaf6;
-    --ms-chip-text: #303f9f;
-    --ms-chip-remove: #303f9f;
-    --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
-    --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
-    display: block;
-    width: 100%;
-    color: var(--ms-on-surface);
-    font: inherit;
-}
-
-.stackline-dropdown.theme-material .selected-list {
-    width: 100%;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-btn {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 8px;
-    width: 100%;
-    min-height: 56px;
-    padding: 11px 54px 11px 16px;
-    border-radius: 18px;
-    border: 1px solid var(--ms-outline);
-    background: var(--ms-surface);
-    box-shadow: var(--ms-shadow-soft);
-    color: var(--ms-on-surface);
-    cursor: pointer;
-    font-size: inherit;
-    line-height: 1.45;
-    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-btn:hover {
-    border-color: var(--ms-outline-strong);
-}
-
-.stackline-dropdown.theme-material .selected-list .c-btn.disabled {
-    background: var(--ms-surface);
-    cursor: not-allowed;
-    opacity: .72;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-list {
-    display: flex;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: auto;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-    float: none;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-list .c-token {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    min-height: 32px;
-    max-width: 100%;
-    padding: 6px 30px 6px 12px;
-    background: var(--ms-chip-bg);
-    color: var(--ms-chip-text);
-    border-radius: 999px;
-    box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);
-    line-height: 1.35;
-    white-space: normal;
-    overflow-wrap: anywhere;
-    margin: 0;
-    float: none;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label {
-    display: inline-flex;
-    align-items: center;
-    float: none;
-    min-width: 0;
-    max-width: 100%;
-    line-height: 1.3;
-    font-weight: 500;
-    white-space: normal;
-    overflow-wrap: anywhere;
-}
-
-.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    margin-left: 0;
-    transform: translateY(-50%);
-    color: var(--ms-chip-remove);
-    cursor: pointer;
-}
-
-.stackline-dropdown.theme-material .selected-list .countplaceholder {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    align-self: center;
-    margin: 0;
-    line-height: 1;
-    color: var(--ms-on-surface-muted);
-    font-size: .8rem;
-    font-weight: 600;
-}
-
-.stackline-dropdown.theme-material .selected-list .fa-angle-down,
-.stackline-dropdown.theme-material .selected-list .fa-angle-up {
-    position: absolute;
-    top: 50%;
-    right: 16px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    transform: translateY(-50%);
-    color: var(--ms-on-surface-muted);
-    font-size: 15pt;
-    pointer-events: none;
-}
-
-.stackline-dropdown.theme-material .dropdown-list {
-    position: absolute;
-    width: 100%;
-    padding-top: 8px;
-    z-index: 99999;
-}
-
-.stackline-dropdown.theme-material .arrow-up,
-.stackline-dropdown.theme-material .arrow-down,
-.stackline-dropdown.theme-material .arrow-2 {
-    display: none;
-}
-
-.stackline-dropdown.theme-material .list-area {
-    overflow: hidden;
-    border-radius: 22px;
-    background: var(--ms-surface);
-    border: 1px solid var(--ms-outline);
-    box-shadow: var(--ms-shadow);
-    margin: 0;
-}
-
-.stackline-dropdown.theme-material .select-all {
-    padding: 10px 14px;
-    border-bottom: 1px solid rgba(125, 119, 134, 0.16);
-    background: rgba(247, 242, 250, 0.76);
-    text-align: left;
-}
-
-.stackline-dropdown.theme-material .list-filter {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 52px;
-    padding-left: 48px;
-    padding-right: 44px;
-    border-bottom: 1px solid rgba(125, 119, 134, 0.16);
-    background: var(--ms-surface);
-}
-
-.stackline-dropdown.theme-material .list-filter input {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    background: transparent;
-    color: var(--ms-on-surface);
-    font: inherit;
-    padding: 0;
-}
-
-.stackline-dropdown.theme-material .list-filter input::placeholder {
-    color: var(--ms-on-surface-muted);
-}
-
-.stackline-dropdown.theme-material .list-filter input:focus {
-    outline: none;
-}
-
-.stackline-dropdown.theme-material .list-filter .fa {
-    position: absolute;
-    top: 50%;
-    left: 16px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    transform: translateY(-50%);
-    color: var(--ms-on-surface-muted);
-}
-
-.stackline-dropdown.theme-material .dropdown-list ul {
-    list-style: none;
-    margin: 0;
-    padding: 8px;
-    overflow: auto;
-}
-
-.stackline-dropdown.theme-material .dropdown-list ul li {
-    align-items: center;
-    min-height: 0;
-    margin: 4px;
-    padding: 12px 14px;
-    border-radius: 14px;
-    cursor: pointer;
-    text-align: left;
-    line-height: 1.35;
-    transition: background-color .16s ease, color .16s ease;
-}
-
-.stackline-dropdown.theme-material .dropdown-list ul li:first-child {
-    padding-top: 12px;
-}
-
-.stackline-dropdown.theme-material .dropdown-list ul li:last-child {
-    padding-bottom: 12px;
-}
-
-.stackline-dropdown.theme-material .dropdown-list ul li:hover {
-    background: var(--ms-surface-soft);
-}
-
-.stackline-dropdown.theme-material .pure-checkbox {
-    position: relative;
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label {
-    position: relative;
-    display: block;
-    width: 100%;
-    margin: 0;
-    padding-left: 32px;
-    color: inherit;
-    cursor: pointer;
-    font-weight: 500;
-    user-select: none;
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:before {
-    box-sizing: content-box;
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 16px;
-    height: 16px;
-    margin-top: -10px;
-    border: 2px solid var(--ms-outline-strong);
-    border-radius: 5px;
-    background: var(--ms-surface);
-    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:after {
-    box-sizing: content-box;
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 5px;
-    width: 8px;
-    height: 3px;
-    margin-top: -4px;
-    border-style: solid;
-    border-color: #ffffff;
-    border-width: 0 0 3px 3px;
-    border-image: none;
-    background: transparent;
-    transform: rotate(-45deg) scale(0);
-    transform-origin: 50%;
-    transition: transform .16s ease;
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:focus + label:before,
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:hover + label:before {
-    border-color: var(--ms-primary);
-    background: var(--ms-surface-soft);
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:before {
-    border-color: var(--ms-primary);
-    background: var(--ms-primary);
-}
-
-.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:after {
-    transform: rotate(-45deg) scale(1);
-}
-
-.stackline-dropdown.theme-material .list-message {
-    margin: 0;
-    padding: 20px 14px;
-    color: var(--ms-on-surface-muted);
-    text-align: center;
-}