mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
convert to css properties
This commit is contained in:
Jeff
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
|
|
||||||
<path
|
|
||||||
d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br />
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-cli documentation</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>babel</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>eslint</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>unit-jest</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>e2e-cypress</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Forum</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Community Chat</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
|
||||||
>Twitter</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-router</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>vue-devtools</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-loader</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/awesome-vue"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>awesome-vue</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "HelloWorld",
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10">
|
|
||||||
<path
|
|
||||||
d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +0,0 @@
|
|||||||
import Deselect from "./Deselect";
|
|
||||||
import OpenIndicator from "./OpenIndicator";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
Deselect,
|
|
||||||
OpenIndicator
|
|
||||||
};
|
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
$transition-timing-function: cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
:root {
|
||||||
$transition-duration: .15s;
|
--vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);
|
||||||
|
--vs-transition-duration: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
/* KeyFrames */
|
/* KeyFrames */
|
||||||
@-webkit-keyframes vSelectSpinner {
|
@-webkit-keyframes vSelectSpinner {
|
||||||
@@ -24,7 +26,8 @@ $transition-duration: .15s;
|
|||||||
.vs__fade-enter-active,
|
.vs__fade-enter-active,
|
||||||
.vs__fade-leave-active {
|
.vs__fade-leave-active {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity $transition-duration $transition-timing-function;
|
transition: opacity var(--vs-transition-duration)
|
||||||
|
var(--vs-transition-timing-function);
|
||||||
}
|
}
|
||||||
.vs__fade-enter,
|
.vs__fade-enter,
|
||||||
.vs__fade-leave-to {
|
.vs__fade-leave-to {
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
/** Component States */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Disabled
|
||||||
|
*
|
||||||
|
* When the component is disabled, all interaction
|
||||||
|
* should be prevented. Here we modify the bg color,
|
||||||
|
* and change the cursor displayed on the interactive
|
||||||
|
* components.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vs-disabled-bg: var(--vs-state-disabled-bg);
|
||||||
|
--vs-disabled-color: var(--vs-state-disabled-color);
|
||||||
|
--vs-disabled-cursor: var(--vs-state-disabled-cursor);
|
||||||
|
}
|
||||||
|
.vs--disabled.vs__dropdown-toggle,
|
||||||
|
.vs--disabled.vs__clear,
|
||||||
|
.vs--disabled.vs__search,
|
||||||
|
.vs--disabled.vs__selected,
|
||||||
|
.vs--disabled.vs__open-indicator {
|
||||||
|
cursor: var(--vs-disabled-cursor);
|
||||||
|
background-color: var(--vs-disabled-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* RTL - Right to Left Support
|
||||||
|
*
|
||||||
|
* Because we're using a flexbox layout, the `dir="rtl"`
|
||||||
|
* HTML attribute does most of the work for us by
|
||||||
|
* rearranging the child elements visually.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.v-select[dir="rtl"].vs__actions {
|
||||||
|
padding: 0 3px 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-select[dir="rtl"].vs__clear {
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-select[dir="rtl"].vs__deselect {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-select[dir="rtl"].vs__dropdown-menu {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
:root {
|
||||||
|
--vs-colors-lightest: rgba(60, 60, 60, 0.26);
|
||||||
|
--vs-colors-light: rgba(60, 60, 60, 0.5);
|
||||||
|
--vs-colors-dark: #333;
|
||||||
|
--vs-colors-darkest: rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
/* Global Component Variables*/
|
||||||
|
--vs-component-line-height: 1.4;
|
||||||
|
--vs-component-placeholder-color: inherit;
|
||||||
|
|
||||||
|
/* Active State*/
|
||||||
|
--vs-state-active-bg: #5897fb;
|
||||||
|
--vs-state-active-color: #fff;
|
||||||
|
|
||||||
|
/* Disabled State*/
|
||||||
|
--vs-state-disabled-bg: rgb(248, 248, 248);
|
||||||
|
--vs-state-disabled-color: var(--vs-colors-light);
|
||||||
|
--vs-state-disabled-controls-color: var(--vs-colors-light);
|
||||||
|
--vs-state-disabled-cursor: not-allowed;
|
||||||
|
|
||||||
|
/* Borders*/
|
||||||
|
--vs-border-width: 1px;
|
||||||
|
--vs-border-style: solid;
|
||||||
|
--vs-border-radius: 4px;
|
||||||
|
--vs-border-color: var(--vs-colors-lightest);
|
||||||
|
|
||||||
|
/* Component Controls: Clear, Open Indicator*/
|
||||||
|
--vs-controls-color: var(--vs-colors-light);
|
||||||
|
--vs-controls-size: 1;
|
||||||
|
--vs-controls-deselect-text-shadow: 0 1px 0 #fff;
|
||||||
|
|
||||||
|
/* Selected*/
|
||||||
|
--vs-selected-bg: #f0f0f0;
|
||||||
|
--vs-selected-border-color: var(--vs-border-color);
|
||||||
|
--vs-selected-border-style: var(--vs-border-style);
|
||||||
|
--vs-selected-border-width: var(--vs-border-width);
|
||||||
|
|
||||||
|
/* Dropdown*/
|
||||||
|
--vs-dropdown-z-index: 1000;
|
||||||
|
--vs-dropdown-min-width: 160px;
|
||||||
|
--vs-dropdown-max-height: 350px;
|
||||||
|
--vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors-darkest);
|
||||||
|
--vs-dropdown-bg: #fff;
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
@import "global/_variables.css";
|
||||||
|
@import "global/_animations.css";
|
||||||
|
@import "global/_states.css";
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
.v-select {
|
|
||||||
position: relative;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-select,
|
|
||||||
.v-select * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
/** Component States */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Disabled
|
|
||||||
*
|
|
||||||
* When the component is disabled, all interaction
|
|
||||||
* should be prevented. Here we modify the bg color,
|
|
||||||
* and change the cursor displayed on the interactive
|
|
||||||
* components.
|
|
||||||
*/
|
|
||||||
|
|
||||||
$disabled-bg: $vs-state-disabled-bg;
|
|
||||||
$disabled-color: $vs-state-disabled-color;
|
|
||||||
$disabled-cursor: $vs-state-disabled-cursor;
|
|
||||||
|
|
||||||
.vs--disabled {
|
|
||||||
.vs__dropdown-toggle,
|
|
||||||
.vs__clear,
|
|
||||||
.vs__search,
|
|
||||||
.vs__selected,
|
|
||||||
.vs__open-indicator {
|
|
||||||
cursor: $disabled-cursor;
|
|
||||||
background-color: $disabled-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* RTL - Right to Left Support
|
|
||||||
*
|
|
||||||
* Because we're using a flexbox layout, the `dir="rtl"`
|
|
||||||
* HTML attribute does most of the work for us by
|
|
||||||
* rearranging the child elements visually.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.v-select[dir="rtl"] {
|
|
||||||
.vs__actions {
|
|
||||||
padding: 0 3px 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__clear {
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__deselect {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__dropdown-menu {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
$vs-colors: (
|
|
||||||
lightest: rgba(60, 60, 60, 0.26),
|
|
||||||
light: rgba(60, 60, 60, 0.5),
|
|
||||||
dark: #333,
|
|
||||||
darkest: rgba(0, 0, 0, .15),
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// Global Component Variables
|
|
||||||
$vs-component-line-height: 1.4 !default;
|
|
||||||
$vs-component-placeholder-color: inherit !default;
|
|
||||||
|
|
||||||
// Active State
|
|
||||||
$vs-state-active-bg: #5897fb !default;
|
|
||||||
$vs-state-active-color: #fff !default;
|
|
||||||
|
|
||||||
// Disabled State
|
|
||||||
$vs-state-disabled-bg: rgb(248, 248, 248) !default;
|
|
||||||
$vs-state-disabled-color: map_get($vs-colors, 'light') !default;
|
|
||||||
$vs-state-disabled-controls-color: map_get($vs-colors, 'light') !default;
|
|
||||||
$vs-state-disabled-cursor: not-allowed !default;
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
$vs-border-width: 1px !default;
|
|
||||||
$vs-border-style: solid !default;
|
|
||||||
$vs-border-radius: 4px !default;
|
|
||||||
$vs-border-color: map_get($vs-colors, 'lightest') !default;
|
|
||||||
|
|
||||||
// Component Controls: Clear, Open Indicator
|
|
||||||
$vs-controls-color: map_get($vs-colors, 'light') !default;
|
|
||||||
$vs-controls-size: 1 !default;
|
|
||||||
$vs-controls-deselect-text-shadow: 0 1px 0 #fff;
|
|
||||||
|
|
||||||
// Selected
|
|
||||||
$vs-selected-bg: #f0f0f0 !default;
|
|
||||||
$vs-selected-border-color: $vs-border-color !default;
|
|
||||||
$vs-selected-border-style: $vs-border-style !default;
|
|
||||||
$vs-selected-border-width: $vs-border-width !default;
|
|
||||||
|
|
||||||
// Dropdown
|
|
||||||
$vs-dropdown-z-index: 1000 !default;
|
|
||||||
$vs-dropdown-min-width: 160px !default;
|
|
||||||
$vs-dropdown-max-height: 350px !default;
|
|
||||||
$vs-dropdown-box-shadow: 0px 3px 6px 0px map_get($vs-colors, 'darkest') !default;
|
|
||||||
$vs-dropdown-bg: #fff !default;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
/* Clear Button */
|
|
||||||
|
|
||||||
.vs__clear {
|
|
||||||
fill: $vs-controls-color;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
/* Dropdown Menu */
|
|
||||||
|
|
||||||
$border-width: $vs-border-width;
|
|
||||||
$border-style: solid;
|
|
||||||
$border-color: $vs-border-color;
|
|
||||||
$border-radius: $vs-border-radius;
|
|
||||||
$box-shadow: $vs-dropdown-box-shadow;
|
|
||||||
|
|
||||||
$bg-color: $vs-dropdown-bg;
|
|
||||||
$z-index: $vs-dropdown-z-index;
|
|
||||||
$min-width: $vs-dropdown-min-width;
|
|
||||||
$max-height: $vs-dropdown-max-height;
|
|
||||||
|
|
||||||
.vs__dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% - #{$border-width}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
|
|
||||||
left: 0;
|
|
||||||
z-index: $z-index;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-height: $max-height;
|
|
||||||
min-width: $min-width;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: $box-shadow;
|
|
||||||
border: $border-width $border-style $border-color;
|
|
||||||
border-top-style: none;
|
|
||||||
border-radius: 0 0 $border-radius $border-radius;
|
|
||||||
text-align: left;
|
|
||||||
list-style: none;
|
|
||||||
background: $bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__no-options {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
/* List Items */
|
|
||||||
.vs__dropdown-option {
|
|
||||||
line-height: 1.42857143; /* Normalize line height */
|
|
||||||
display: block;
|
|
||||||
padding: 3px 20px;
|
|
||||||
clear: both;
|
|
||||||
color: #333; /* Overrides most CSS frameworks */
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__dropdown-option--highlight {
|
|
||||||
background: $vs-state-active-bg;
|
|
||||||
color: $vs-state-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__dropdown-option--disabled {
|
|
||||||
background: inherit;
|
|
||||||
color: $vs-state-disabled-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
/**
|
|
||||||
Dropdown Toggle
|
|
||||||
|
|
||||||
The dropdown toggle is the primary wrapper of the component. It
|
|
||||||
has two direct descendants: .vs__selected-options, and .vs__actions.
|
|
||||||
|
|
||||||
.vs__selected-options holds the .vs__selected's as well as the
|
|
||||||
main search input.
|
|
||||||
|
|
||||||
.vs__actions holds the clear button and dropdown toggle.
|
|
||||||
*/
|
|
||||||
|
|
||||||
$border-width: $vs-border-width;
|
|
||||||
$border-style: $vs-border-style;
|
|
||||||
$border-color: $vs-border-color;
|
|
||||||
$border-radius: $vs-border-radius;
|
|
||||||
|
|
||||||
.vs__dropdown-toggle {
|
|
||||||
appearance: none;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 0 4px 0;
|
|
||||||
background: none;
|
|
||||||
border: $border-width $border-style $border-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__selected-options {
|
|
||||||
display: flex;
|
|
||||||
flex-basis: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 2px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px 6px 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown Toggle States */
|
|
||||||
.vs--searchable .vs__dropdown-toggle {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
.vs--unsearchable .vs__dropdown-toggle {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.vs--open .vs__dropdown-toggle {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
// Open Indicator
|
|
||||||
|
|
||||||
// The open indicator appears as a down facing
|
|
||||||
// caret on the right side of the select.
|
|
||||||
|
|
||||||
$transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
|
|
||||||
$transition-duration: 150ms;
|
|
||||||
|
|
||||||
$open-indicator-color: $vs-controls-color;
|
|
||||||
$open-indicator-size: $vs-controls-size;
|
|
||||||
|
|
||||||
.vs__open-indicator {
|
|
||||||
fill: $open-indicator-color;
|
|
||||||
transform: scale($open-indicator-size);
|
|
||||||
transition: transform $transition-duration $transition-timing-function;
|
|
||||||
transition-timing-function: $transition-timing-function;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Open State
|
|
||||||
|
|
||||||
.vs--open .vs__open-indicator {
|
|
||||||
transform: rotate(180deg) scale($open-indicator-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Loading State
|
|
||||||
|
|
||||||
.vs--loading .vs__open-indicator {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
/* Search Input */
|
|
||||||
|
|
||||||
$line-height: $vs-component-line-height;
|
|
||||||
$font-size: 1em;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Super weird bug... If this declaration is grouped
|
|
||||||
* below, the cancel button will still appear in chrome.
|
|
||||||
* If it's up here on it's own, it'll hide it.
|
|
||||||
*/
|
|
||||||
.vs__search::-webkit-search-cancel-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__search::-webkit-search-decoration,
|
|
||||||
.vs__search::-webkit-search-results-button,
|
|
||||||
.vs__search::-webkit-search-results-decoration,
|
|
||||||
.vs__search::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__search,
|
|
||||||
.vs__search:focus {
|
|
||||||
appearance: none;
|
|
||||||
line-height: $line-height;
|
|
||||||
font-size: $font-size;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-left: none;
|
|
||||||
outline: none;
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
padding: 0 7px;
|
|
||||||
background: none;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__search::placeholder {
|
|
||||||
color: $vs-component-placeholder-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
States
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Unsearchable
|
|
||||||
.vs--unsearchable {
|
|
||||||
.vs__search {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&:not(.vs--disabled) .vs__search:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Single, when searching but not loading or open
|
|
||||||
.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
|
|
||||||
.vs__search {
|
|
||||||
opacity: .2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
/* Selected Tags */
|
|
||||||
.vs__selected {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: $vs-selected-bg;
|
|
||||||
border: $vs-selected-border-width $vs-selected-border-style $vs-selected-border-color;
|
|
||||||
border-radius: $vs-border-radius;
|
|
||||||
color: map_get($vs-colors, 'dark');
|
|
||||||
line-height: $vs-component-line-height;
|
|
||||||
margin: 4px 2px 0px 2px;
|
|
||||||
padding: 0 0.25em;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__deselect {
|
|
||||||
display: inline-flex;
|
|
||||||
appearance: none;
|
|
||||||
margin-left: 4px;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none;
|
|
||||||
fill: $vs-controls-color;
|
|
||||||
text-shadow: $vs-controls-deselect-text-shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* States */
|
|
||||||
|
|
||||||
.vs--single {
|
|
||||||
.vs__selected {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
&.vs--open .vs__selected {
|
|
||||||
position: absolute;
|
|
||||||
opacity: .4;
|
|
||||||
}
|
|
||||||
&.vs--searching .vs__selected {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
/* Loading Spinner */
|
|
||||||
.vs__spinner {
|
|
||||||
align-self: center;
|
|
||||||
opacity: 0;
|
|
||||||
font-size: 5px;
|
|
||||||
text-indent: -9999em;
|
|
||||||
overflow: hidden;
|
|
||||||
border-top: .9em solid rgba(100, 100, 100, .1);
|
|
||||||
border-right: .9em solid rgba(100, 100, 100, .1);
|
|
||||||
border-bottom: .9em solid rgba(100, 100, 100, .1);
|
|
||||||
border-left: .9em solid rgba(60, 60, 60, .45);
|
|
||||||
transform: translateZ(0);
|
|
||||||
animation: vSelectSpinner 1.1s infinite linear;
|
|
||||||
transition: opacity .1s;
|
|
||||||
}
|
|
||||||
.vs__spinner,
|
|
||||||
.vs__spinner:after {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 5em;
|
|
||||||
height: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Loading Spinner States */
|
|
||||||
.vs--loading .vs__spinner {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
@import "global/variables";
|
|
||||||
@import "global/component";
|
|
||||||
@import "global/animations";
|
|
||||||
@import "global/states";
|
|
||||||
|
|
||||||
@import "modules/dropdown-toggle";
|
|
||||||
@import "modules/open-indicator";
|
|
||||||
@import "modules/clear";
|
|
||||||
@import "modules/dropdown-menu";
|
|
||||||
@import "modules/dropdown-option";
|
|
||||||
@import "modules/selected";
|
|
||||||
@import "modules/search-input";
|
|
||||||
@import "modules/spinner";
|
|
||||||
Reference in New Issue
Block a user