"color"
Bootstrap 3.0.0 Snippet by armis

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /> <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /> <title>CodePen - Vue Pantone Color Search + Clipboard</title> <style> @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400); * { box-sizing: border-box; } body { margin: 0; font: 1.15em "Source Sans Pro", sans-serif; letter-spacing: 0.5px; background: #EEEEEE; color: black; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 2em; margin-bottom: 0; } p { margin-top: 0; } input { display: block; appearance: none; margin: 0.5em auto; padding: 0.5em; padding-left: 0.1em; vertical-align: middle; border: 1px solid transparent; border-bottom: 1px solid black; border-radius: 2px; color: black; background: transparent; font-size: 1em; width: 90%; width: calc(100% - 1em); max-width: 20.25em; outline: 0; } .slideUp-enter-active { transform: translateY(0); transition: all .3s ease; } .slideUp-leave-active { position: absolute; } .slideUp-enter { transform: translateY(25%); opacity: 0; } .openUp-enter-active, .openUp-leave-active { transition: all 0.5s; } .openUp-enter, .openUp-leave-active { opacity: 0; transform: translateY(25%); } .vueApp { text-align: center; padding: 0.5em; } .vueApp .colors { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1200px; margin: 0 auto; } .vueApp .colors .color { height: 200px; margin: 0.5em; padding: 0.5em; color: white; display: flex; align-items: flex-end; flex-grow: 1; transition: all 0.1s; cursor: pointer; } .vueApp .colors .color:hover { text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); } .vueApp .colors .color span:first-of-type { align-self: flex-end; text-align: left; font-size: 2em; width: 100%; } .vueApp .colors .color span:nth-of-type(2) { text-align: right; align-self: flex-start; font-size: 0.75em; width: 100%; } .vueApp .messages { position: fixed; bottom: 0; left: 0; width: 100%; } .vueApp .messages .message { padding: 1em; background: rgba(0, 0, 0, 0.25); color: white; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no" > <div id="vue"></div> <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script> <script src='https://unpkg.com/vue@2.0.3/dist/vue.js'></script> <script src='https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js'></script> <script > /*----------------- Vue 2.0.3 ----------- https://vuejs.org/guide/ https://vuejs.org/api/ -----------------*/ let app = new Vue({ el: '#vue', template: `<div class="vueApp"> <h1>Pantone Color Search</h1> <input placeholder="Search a color, season, year, or hex code" v-model="colorSearch" /> <transition name="openUp"> <div v-if="colors.length > 0"> <h2>Pantone Colors</h2> <p>(Click to copy to clipboard)</p> <transition-group name="openUp" class="colors"> <div class="color" v-for="(color, index) in filteredColors" v-bind:key="index" v-bind:data-clipboard-text="color.hex" v-bind:style="{ backgroundColor: color.hex }" @click="addedToClipboard(color.color, color.hex)"> <span>{{ color.color }}</span> <span>{{ color.season }} {{ color.year }}</span> </div> </transition-group> <transition-group name="slideUp" class="messages"> <div class="message" v-for="(message, index) in messages" v-bind:key="index" v-bind:style="{ backgroundColor: message.hex }" @click="removeMessage(index)"> {{ message.message }} </div> </transition-group> </div> </transition> </div>`, mounted: function() { new Clipboard('.color'); }, data: { colorSearch: '', colors: [ //Spring 2017 { color: "Primrose Yellow", hex: "#f6d258", year: "2017", season: "Spring" }, { color: "Pale Dogwood", hex: "#efcec5", year: "2017", season: "Spring" }, { color: "Hazelwood", hex: "#d1af94", year: "2017", season: "Spring" }, { color: "Island Paradise", hex: "#97d5e0", year: "2017", season: "Spring" }, { color: "Greenery", hex: "#88b14b", year: "2017", season: "Spring" }, { color: "Flame", hex: "#ef562d", year: "2017", season: "Spring" }, { color: "Pink Yarrow", hex: "#d13076", year: "2017", season: "Spring" }, { color: "Niagra", hex: "#5587a2", year: "2017", season: "Spring" }, { color: "Kale", hex: "#5c7148", year: "2017", season: "Spring" }, { color: "Lapis Blue", hex: "#0c4c8a", year: "2017", season: "Spring" }, //Fall 2016 { color: "Riverside", hex: "#4c6a92", year: "2016", season: "Fall" }, { color: "Airy Blue", hex: "#92b6d5", year: "2016", season: "Fall" }, { color: "Shark Skin", hex: "#838487", year: "2016", season: "Fall" }, { color: "Aurora Red", hex: "#b93a32", year: "2016", season: "Fall" }, { color: "Warm Taupe", hex: "#af9483", year: "2016", season: "Fall" }, { color: "Dusty Cedar", hex: "#ad5d5d", year: "2016", season: "Fall" }, { color: "Lush Meadow", hex: "#006e51", year: "2016", season: "Fall" }, { color: "Spicy Mustard", hex: "#d8ae47", year: "2016", season: "Fall" }, { color: "Potters Clay", hex: "#9e4624", year: "2016", season: "Fall" }, { color: "Bodacious", hex: "#b76ba3", year: "2016", season: "Fall" }, //Spring 2016 { color: "Rose Quartz", hex: "#f7cac9", year: "2016", season: "Spring" }, { color: "Peach Echo", hex: "#f7786b", year: "2016", season: "Spring" }, { color: "Serenity", hex: "#91a8d0", year: "2016", season: "Spring" }, { color: "Snorkel Blue", hex: "#034f84", year: "2016", season: "Spring" }, { color: "Buttercup", hex: "#fae03c", year: "2016", season: "Spring" }, { color: "Limpet Shell", hex: "#98ddde", year: "2016", season: "Spring" }, { color: "Lilac Gray", hex: "#9896a4", year: "2016", season: "Spring" }, { color: "Fiesta", hex: "#dd4132", year: "2016", season: "Spring" }, { color: "Iced Coffee", hex: "#b18f6a", year: "2016", season: "Spring" }, { color: "Green Flash", hex: "#79c753", year: "2016", season: "Spring" }, //Fall 2015 { color: "Dried Herb", hex: "#847A59", year: "2015", season: "Fall" }, { color: "Desert Sage", hex: "#A7AE9E", year: "2015", season: "Fall" }, { color: "Stormy Weather", hex: "#58646D ", year: "2015", season: "Fall" }, { color: "Oak Buff", hex: "#CF9C63", year: "2015", season: "Fall" }, { color: "Marsala", hex: "#964F4C", year: "2015", season: "Fall" }, { color: "Biscay Bay", hex: "#097988", year: "2015", season: "Fall" }, { color: "Reflecting Pond", hex: "#203E4A", year: "2015", season: "Fall" }, { color: "Cadmium Orange", hex: "#F99471", year: "2015", season: "Fall" }, { color: "Cashmere Rose", hex: "#CE879F", year: "2015", season: "Fall" }, { color: "Amethyst Orchid", hex: "#926AA6", year: "2015", season: "Fall" }, //Spring 2015 { color: "Aquamarine", hex: "#9DC3D4", year: "2015", season: "Spring" }, { color: "Scuba Blue", hex: "#00ABC0", year: "2015", season: "Spring" }, { color: "Beveled Glass", hex: "#7ACCB8", year: "2015", season: "Spring" }, { color: "Classic Blue", hex: "#0F4C81", year: "2015", season: "Spring" }, { color: "Toasted Almond", hex: "#D2B49C", year: "2015", season: "Spring" }, { color: "Strawberry Ice", hex: "#E78B90", year: "2015", season: "Spring" }, { color: "Tangerine", hex: "#F88F58", year: "2015", season: "Spring" }, { color: "Custard", hex: "#E5D68E", year: "2015", season: "Spring" }, { color: "Marsala", hex: "#964F4C", year: "2015", season: "Spring" }, { color: "Glacier Gray", hex: "#C5C6C7", year: "2015", season: "Spring" }, //Fall 2014 { color: "Radiant Orchid", hex: "#8b4584", year: "2014", season: "Fall" }, { color: "Royal Blue", hex: "#1e3176", year: "2014", season: "Fall" }, { color: "Aluminum", hex: "#75796a", year: "2014", season: "Fall" }, { color: "Aurora Red", hex: "#a90118", year: "2014", season: "Fall" }, { color: "Misted Yellow", hex: "#d9b74b", year: "2014", season: "Fall" }, { color: "Sangria", hex: "#760030", year: "2014", season: "Fall" }, { color: "Mauve Mist", hex: "#af8ea9", year: "2014", season: "Fall" }, { color: "Cognac", hex: "#60413c", year: "2014", season: "Fall" }, { color: "Bright Cobalt", hex: "#014983", year: "2014", season: "Fall" }, { color: "Cypress", hex: "#363b25", year: "2014", season: "Fall" }, //Spring 2014 { color: "Dazzling Blue", hex: "#1464ab", year: "2014", season: "Spring" }, { color: "Violet Tulip", hex: "#9096c8", year: "2014", season: "Spring" }, { color: "Freesia", hex: "#fcd800", year: "2014", season: "Spring" }, { color: "Paloma", hex: "#a7b0ad", year: "2014", season: "Spring" }, { color: "Placid Blue", hex: "#82b8dc", year: "2014", season: "Spring" }, { color: "Celosa Orange", hex: "#f38047", year: "2014", season: "Spring" }, { color: "Hemlock", hex: "#9cccb2", year: "2014", season: "Spring" }, { color: "Radiant Orchid", hex: "#ac70ae", year: "2014", season: "Spring" }, { color: "Cayenne", hex: "#e0655d", year: "2014", season: "Spring" }, { color: "Sand", hex: "#cfb38c", year: "2014", season: "Spring" } ], messages: [] }, computed: { filteredColors: function() { let self = this; return this.colors.filter(function(color) { let parts = self.colorSearch.trim().split(" "); for(let part of parts) {if (window.CP.shouldStopExecution(1)){break;} let searchRegex = new RegExp(part, 'i'); if(!( searchRegex.test(color.hex) || searchRegex.test(color.color) || searchRegex.test(color.year) || searchRegex.test(color.season) )) { return false; } } window.CP.exitedLoop(1); return true; }) } }, methods: { addedToClipboard: function(color, hex) { let self = this, newMessage = { message: color + " (" + hex + ") copied to clipboard", hex: hex, timeout: "" }; newMessage.timeout = setTimeout(function() { self.messages.shift(); }, 3000) this.messages.push(newMessage); }, removeMessage: function(index) { clearTimeout(this.messages[index].timeout); this.messages.splice(index, 1); } } }) //# sourceURL=pen.js </script> </body> </html>

Related: See More


Questions / Comments: