mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

more homepage styling

Browse Source
This commit is contained in:
Jeff
2018-01-13 17:00:50 -08:00
parent 0d62251558
commit b862761cbf
4 changed files with 184 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/homepage/assets/scss/_cyan_theme.scss
+30 -10
View File
@@ -1,30 +1,50 @@
@import 'variables'; @import 'variables';
#v-select { #v-select {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
.dropdown-toggle { .dropdown-toggle {
background: #fff; background: #fff;
border-color: rgba(82, 166, 183, 0.39); border-color: rgba(82, 166, 183, 0.39);
} }
.selected-tag { //.selected-tag {
color: #147688; // color: #147688;
background-color: #d7f3f9; // background-color: #d7f3f9;
border-color: #91ddec; // border-color: #91ddec;
.close { // .close {
color: #147688; // color: #147688;
opacity: .5; // opacity: .5;
} // }
} //}
&.dropdown.open .dropdown-toggle, &.dropdown.open .dropdown-toggle,
&.dropdown.open .dropdown-menu, &.dropdown.open .dropdown-menu,
&.dropdown.open .open-indicator:before { &.dropdown.open .open-indicator:before {
border-color: #4CC3D9; border-color: #4CC3D9;
} }
.active a { .active a {
background: rgba(50,50,50,.1); background: rgba(50, 50, 50, .1);
color: #333; 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 .highlight a,
&.dropdown li:hover a { &.dropdown li:hover a {
background: #4CC3D9; background: #4CC3D9;
docs/homepage/assets/scss/_demo.scss
+47 -4
View File
@@ -5,6 +5,10 @@ body {
height: 100vh; height: 100vh;
} }
[v-cloak] {
display: none;
}
body { body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -48,6 +52,11 @@ p.lead {
line-height: 1.4; line-height: 1.4;
} }
.accolades a {
margin-left: 0;
margin-right: 5px;
}
.btn { .btn {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
@@ -73,9 +82,30 @@ p.lead {
ul { ul {
padding-left: 0; padding-left: 0;
margin-left: 50px; margin: 2em 2em;
text-align: left; 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 { .btn-outline {
@@ -105,7 +135,20 @@ p.lead {
} }
} }
.accolades a { .overlay {
margin-left: 0; display: flex;
margin-right: 5px; 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);
}
} }
docs/homepage/home.html
+65 -16
View File
@@ -30,6 +30,46 @@
<body> <body>
<div id="app"> <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> <h1>Vue Select</h1>
<p class="accolades lead"> <p class="accolades lead">
@@ -54,40 +94,49 @@
</p> </p>
<p class="lead"> <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> </p>
<v-select <v-select @input="onInput" id="v-select" :options="options" label="title">
id="v-select" <template slot="option" slot-scope="option">
:placeholder="placeholder" <span class="octicon" :class="option.icon"></span>
:options="options" {{ option.title }}
multiple </template>
>
</v-select> </v-select>
<div class="feature-list"> <div class="feature-list">
<ul class="list-vue"> <ul class="list-vue">
<li>Custom Templating</li> <li>Supports Vuex</li>
<li>Tagging Support</li> <li>Tagging Support</li>
<li>Works with Vuex</li> <li>Custom Templating</li>
<li>Zero dependencies</li> <li>Zero JS/CSS dependencies</li>
<li>Custom Filtering Algoirthms</li>
</ul> </ul>
<ul class="list-vue"> <ul class="list-vue">
<li>+95% Test Coverage</li> <li>+95% Test Coverage</li>
<li>Select Single/Multiple</li> <li>Select Single/Multiple</li>
<li>Typeahead Suggestions</li> <li>Typeahead Suggestions</li>
<li>Supports RTL & Translations</li>
<li>Plays nice with CSS Frameworks</li> <li>Plays nice with CSS Frameworks</li>
</ul> </ul>
</div> </div>
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select"> <p>
<span class="octicon octicon-mark-github"></span> View on GitHub And so much more! Get started with: <br>
</a> <code>yarn add vue-select</code>
</p>
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/"> <div class="cta">
<span class="octicon octicon-book"></span> Read the Docs <a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
</a> <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> </div>
<script> <script>
docs/homepage/home.js
+42 -1
View File
@@ -7,5 +7,46 @@ Vue.component('v-select', vSelect);
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ 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;
}
}
}); });