mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
more homepage styling
This commit is contained in:
Jeff
@@ -1,30 +1,50 @@
|
||||
@import 'variables';
|
||||
|
||||
#v-select {
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
.dropdown-toggle {
|
||||
background: #fff;
|
||||
border-color: rgba(82, 166, 183, 0.39);
|
||||
}
|
||||
.selected-tag {
|
||||
color: #147688;
|
||||
background-color: #d7f3f9;
|
||||
border-color: #91ddec;
|
||||
.close {
|
||||
color: #147688;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
//.selected-tag {
|
||||
// color: #147688;
|
||||
// background-color: #d7f3f9;
|
||||
// border-color: #91ddec;
|
||||
// .close {
|
||||
// color: #147688;
|
||||
// opacity: .5;
|
||||
// }
|
||||
//}
|
||||
&.dropdown.open .dropdown-toggle,
|
||||
&.dropdown.open .dropdown-menu,
|
||||
&.dropdown.open .open-indicator:before {
|
||||
border-color: #4CC3D9;
|
||||
}
|
||||
.active a {
|
||||
background: rgba(50,50,50,.1);
|
||||
background: rgba(50, 50, 50, .1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.dropdown li {
|
||||
border-bottom: 1px solid rgba($code-grey, .1);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown li a {
|
||||
padding: 10px 20px;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
.octicon {
|
||||
font-size: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
&.dropdown .highlight a,
|
||||
&.dropdown li:hover a {
|
||||
background: #4CC3D9;
|
||||
|
||||
@@ -5,6 +5,10 @@ body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -48,6 +52,11 @@ p.lead {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.accolades a {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
@@ -73,9 +82,30 @@ p.lead {
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-left: 50px;
|
||||
margin: 2em 2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: $code-grey;
|
||||
font-family: 'Fira Code', 'monospace';
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 5px;
|
||||
background: rgba(255,255,255,.5);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cta .btn {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@@ -105,7 +135,20 @@ p.lead {
|
||||
}
|
||||
}
|
||||
|
||||
.accolades a {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
.overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba($code-black, .8);
|
||||
transform: translateY(200vh);
|
||||
transition: .25s transform;
|
||||
&.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
+65
-16
@@ -30,6 +30,46 @@
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<div class="overlay" :class="{ active: loading }" v-cloak v-show="loading">
|
||||
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
|
||||
<g fill="none" fill-rule="evenodd" stroke-width="2">
|
||||
<circle cx="22" cy="22" r="1">
|
||||
<animate attributeName="r"
|
||||
begin="0s" dur="1.8s"
|
||||
values="1; 20"
|
||||
calcMode="spline"
|
||||
keyTimes="0; 1"
|
||||
keySplines="0.165, 0.84, 0.44, 1"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-opacity"
|
||||
begin="0s" dur="1.8s"
|
||||
values="1; 0"
|
||||
calcMode="spline"
|
||||
keyTimes="0; 1"
|
||||
keySplines="0.3, 0.61, 0.355, 1"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="22" cy="22" r="1">
|
||||
<animate attributeName="r"
|
||||
begin="-0.9s" dur="1.8s"
|
||||
values="1; 20"
|
||||
calcMode="spline"
|
||||
keyTimes="0; 1"
|
||||
keySplines="0.165, 0.84, 0.44, 1"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-opacity"
|
||||
begin="-0.9s" dur="1.8s"
|
||||
values="1; 0"
|
||||
calcMode="spline"
|
||||
keyTimes="0; 1"
|
||||
keySplines="0.3, 0.61, 0.355, 1"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<p class="accolades lead">
|
||||
@@ -54,40 +94,49 @@
|
||||
</p>
|
||||
|
||||
<p class="lead">
|
||||
A Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.
|
||||
A Vue.js select component that provides similar functionality
|
||||
to Select2/Chosen without the overhead of jQuery.
|
||||
</p>
|
||||
|
||||
<v-select
|
||||
id="v-select"
|
||||
:placeholder="placeholder"
|
||||
:options="options"
|
||||
multiple
|
||||
>
|
||||
<v-select @input="onInput" id="v-select" :options="options" label="title">
|
||||
<template slot="option" slot-scope="option">
|
||||
<span class="octicon" :class="option.icon"></span>
|
||||
{{ option.title }}
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<div class="feature-list">
|
||||
<ul class="list-vue">
|
||||
<li>Custom Templating</li>
|
||||
<li>Supports Vuex</li>
|
||||
<li>Tagging Support</li>
|
||||
<li>Works with Vuex</li>
|
||||
<li>Zero dependencies</li>
|
||||
<li>Custom Templating</li>
|
||||
<li>Zero JS/CSS dependencies</li>
|
||||
<li>Custom Filtering Algoirthms</li>
|
||||
</ul>
|
||||
|
||||
<ul class="list-vue">
|
||||
<li>+95% Test Coverage</li>
|
||||
<li>Select Single/Multiple</li>
|
||||
<li>Typeahead Suggestions</li>
|
||||
<li>Supports RTL & Translations</li>
|
||||
<li>Plays nice with CSS Frameworks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||
</a>
|
||||
<p>
|
||||
And so much more! Get started with: <br>
|
||||
<code>yarn add vue-select</code>
|
||||
</p>
|
||||
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/">
|
||||
<span class="octicon octicon-book"></span> Read the Docs
|
||||
</a>
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||
</a>
|
||||
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/">
|
||||
<span class="octicon octicon-book"></span> Read the Docs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
+42
-1
@@ -7,5 +7,46 @@ Vue.component('v-select', vSelect);
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app'
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options: [
|
||||
{
|
||||
title: 'Read the Docs',
|
||||
icon: 'octicon-book',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View on GitHub',
|
||||
icon: 'octicon-mark-github',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View on NPM',
|
||||
icon: 'octicon-database',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View Code Climate Analysis',
|
||||
icon: 'octicon-graph',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View Codepen Examples',
|
||||
icon: 'octicon-pencil',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(option) {
|
||||
this.loading = true;
|
||||
this.go(option.url);
|
||||
},
|
||||
go(url) {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user