mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-07 07:12:23 +03:00
Code Activity

convert to css properties

Browse Source
This commit is contained in:
Jeff
2020-12-23 20:32:43 -08:00
parent b1780abd40
commit 61bd8e87b6
21 changed files with 103 additions and 1710 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Deselect.vue
-7
View File
@@ -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>
src/components/HelloWorld.vue
-130
View File
@@ -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>
src/components/OpenIndicator.vue
-7
View File
@@ -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>
src/components/Select.vue
-1150
View File
File diff suppressed because it is too large Load Diff
src/components/childComponents.js
-7
View File
@@ -1,7 +0,0 @@
import Deselect from "./Deselect";
import OpenIndicator from "./OpenIndicator";
export default {
Deselect,
OpenIndicator
};
src/scss/global/_animations.scss → src/css/global/_animations.css
+6 -3
View File
@@ -1,5 +1,7 @@
$transition-timing-function: cubic-bezier(1.0, 0.5, 0.8, 1.0);
$transition-duration: .15s;
:root {
--vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);
--vs-transition-duration: 0.15s;
}
/* KeyFrames */
@-webkit-keyframes vSelectSpinner {
@@ -24,7 +26,8 @@ $transition-duration: .15s;
.vs__fade-enter-active,
.vs__fade-leave-active {
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-leave-to {
src/css/global/_states.css
+50
View File
@@ -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;
}
src/css/global/_variables.css
+44
View File
@@ -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;
}
src/css/vue-select.css
+3
View File
@@ -0,0 +1,3 @@
@import "global/_variables.css";
@import "global/_animations.css";
@import "global/_states.css";
src/scss/global/_component.scss
-9
View File
@@ -1,9 +0,0 @@
.v-select {
position: relative;
font-family: inherit;
}
.v-select,
.v-select * {
box-sizing: border-box;
}
src/scss/global/_states.scss
-53
View File
@@ -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;
}
}
src/scss/global/_variables.scss
-44
View File
@@ -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;
src/scss/modules/_clear.scss
-10
View File
@@ -1,10 +0,0 @@
/* Clear Button */
.vs__clear {
fill: $vs-controls-color;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
margin-right: 8px;
}
src/scss/modules/_dropdown-menu.scss
-38
View File
@@ -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;
}
src/scss/modules/_dropdown-option.scss
-27
View File
@@ -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;
}
}
src/scss/modules/_dropdown-toggle.scss
-54
View File
@@ -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;
}
src/scss/modules/_open-indicator.scss
-29
View File
@@ -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;
}
src/scss/modules/_search-input.scss
-62
View File
@@ -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;
}
}
src/scss/modules/_selected.scss
-41
View File
@@ -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;
}
}
src/scss/modules/_spinner.scss
-26
View File
@@ -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;
}
src/scss/vue-select.scss
-13
View File
@@ -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";