mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
Reorganize files for Bower distro
This commit is contained in:
Lokesh Dhakar
224
examples/sass/_normalize.sass
Normal file
224
examples/sass/_normalize.sass
Normal file
@@ -0,0 +1,224 @@
|
||||
/**! normalize.css v2.1.1 | MIT License | git.io/normalize
|
||||
|
||||
// HTML5 display definitions
|
||||
|
||||
// Correct `block` display not defined in IE 8/9.
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
|
||||
display: block
|
||||
|
||||
// Correct `inline-block` display not defined in IE 8/9.
|
||||
audio, canvas, video
|
||||
display: inline-block
|
||||
|
||||
audio:not([controls])
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
display: none
|
||||
|
||||
// Remove excess height in iOS 5 devices.
|
||||
height: 0
|
||||
|
||||
// Address styling not present in IE 8/9.
|
||||
[hidden]
|
||||
display: none
|
||||
|
||||
|
||||
// Base
|
||||
|
||||
html
|
||||
// Prevent system color scheme's background color being used in Firefox, IE, and Opera.
|
||||
background: #fff
|
||||
|
||||
// Prevent system color scheme's text color being used in Firefox, IE, and Opera.
|
||||
color: #000
|
||||
|
||||
// Set default font family to sans-serif.
|
||||
font-family: sans-serif
|
||||
|
||||
// Prevent iOS text size adjust after orientation change, without disabling user zoom.
|
||||
-ms-text-size-adjust: 100%
|
||||
-webkit-text-size-adjust: 100%
|
||||
|
||||
// Remove default margin.
|
||||
body
|
||||
margin: 0
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a
|
||||
// Address `outline` inconsistency between Chrome and other browsers.
|
||||
&:focus
|
||||
outline: thin dotted
|
||||
|
||||
// Improve readability when focused and also mouse hovered in all browsers.
|
||||
&:active, &:hover
|
||||
outline: 0
|
||||
|
||||
|
||||
// Typography
|
||||
|
||||
// Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
h1
|
||||
font-size: 2em
|
||||
margin: 0.67em 0
|
||||
|
||||
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
abbr[title]
|
||||
border-bottom: 1px dotted
|
||||
|
||||
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
b, strong
|
||||
font-weight: bold
|
||||
|
||||
// Address styling not present in Safari 5 and Chrome.
|
||||
dfn
|
||||
font-style: italic
|
||||
|
||||
// Address differences between Firefox and other browsers.
|
||||
hr
|
||||
-moz-box-sizing: content-box
|
||||
box-sizing: content-box
|
||||
height: 0
|
||||
|
||||
// Address styling not present in IE 8/9.
|
||||
mark
|
||||
background: #ff0
|
||||
color: #000
|
||||
|
||||
// Correct font family set oddly in Safari 5 and Chrome.
|
||||
code, kbd, pre, samp
|
||||
font-family: monospace, serif
|
||||
font-size: 1em
|
||||
|
||||
// Improve readability of pre-formatted text in all browsers.
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
// Set consistent quote types.
|
||||
q
|
||||
quotes: '\201C' '\201D' '\2018' '\2019'
|
||||
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
small
|
||||
font-size: 80%
|
||||
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
sub, sup
|
||||
font-size: 75%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
|
||||
sup
|
||||
top: -0.5em
|
||||
|
||||
sub
|
||||
bottom: -0.25em
|
||||
|
||||
|
||||
// Embedded content
|
||||
|
||||
// Remove border when inside `a` element in IE 8/9.
|
||||
img
|
||||
border: 0
|
||||
|
||||
// Correct overflow displayed oddly in IE 9.
|
||||
svg:not(:root)
|
||||
overflow: hidden
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
// Address margin not present in IE 8/9 and Safari 5.
|
||||
figure
|
||||
margin: 0
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
// Define consistent border, margin, and padding.
|
||||
fieldset
|
||||
border: 1px solid #c0c0c0
|
||||
margin: 0 2px
|
||||
padding: 0.35em 0.625em 0.75em
|
||||
|
||||
legend
|
||||
// Correct `color` not being inherited in IE 8/9.
|
||||
border: 0
|
||||
|
||||
// Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
padding: 0
|
||||
|
||||
button, input, select, textarea
|
||||
// Correct font family not being inherited in all browsers.
|
||||
font-family: inherit
|
||||
|
||||
// Correct font size not being inherited in all browsers.
|
||||
font-size: 100%
|
||||
|
||||
// Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
margin: 0
|
||||
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
|
||||
button, input
|
||||
line-height: normal
|
||||
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
// Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
button, select
|
||||
text-transform: none
|
||||
|
||||
button, html input[type='button'], input[type='reset'], input[type='submit']
|
||||
// Avoid the WebKit bug in Android 4.0.* where `html input[type='button'] { -webkit-appearance: button }` destroys native `audio` and `video` controls.
|
||||
// Correct inability to style clickable `input` types in iOS.
|
||||
-webkit-appearance: button
|
||||
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
cursor: pointer
|
||||
|
||||
// Re-set default cursor for disabled elements.
|
||||
button[disabled], html input[disabled]
|
||||
cursor: default
|
||||
|
||||
input
|
||||
&[type='checkbox'], &[type='radio']
|
||||
// Address box sizing set to `content-box` in IE 8/9.
|
||||
box-sizing: border-box
|
||||
|
||||
// Remove excess padding in IE 8/9.
|
||||
padding: 0
|
||||
|
||||
&[type='search']
|
||||
// Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
-webkit-appearance: textfield
|
||||
|
||||
// Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).
|
||||
-moz-box-sizing: content-box
|
||||
-webkit-box-sizing: content-box
|
||||
box-sizing: content-box
|
||||
|
||||
// Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.
|
||||
&::-webkit-search-cancel-button, &::-webkit-search-decoration
|
||||
-webkit-appearance: none
|
||||
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
button::-moz-focus-inner, input::-moz-focus-inner
|
||||
border: 0
|
||||
padding: 0
|
||||
|
||||
textarea
|
||||
// Remove default vertical scrollbar in IE 8/9.
|
||||
overflow: auto
|
||||
|
||||
// Improve readability and alignment in all browsers.
|
||||
vertical-align: top
|
||||
|
||||
|
||||
// Tables
|
||||
|
||||
// Remove most spacing between table cells.
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
405
examples/sass/screen.sass
Normal file
405
examples/sass/screen.sass
Normal file
@@ -0,0 +1,405 @@
|
||||
@import "compass/css3"
|
||||
@import "compass/utilities/general/clearfix"
|
||||
|
||||
@import "normalize"
|
||||
|
||||
// COLORS & BACKGROUNDS --------------------------------------------------------
|
||||
|
||||
$yellow: #fdf485
|
||||
$orange: #e67e39
|
||||
$blue: #4ae
|
||||
$green: #61c227
|
||||
$gray: #777
|
||||
$gray-light: #aaa
|
||||
$gray-dark: #222
|
||||
|
||||
$color: $gray
|
||||
$bg-color: #f3f3f3
|
||||
$border-color: darken($bg-color, 5%)
|
||||
$header-bg-color: #fff
|
||||
$section-heading-color: $orange
|
||||
$heading-color: $gray-dark
|
||||
$link-color: $blue
|
||||
$code-color: $gray-light
|
||||
|
||||
// TYPE --------------------------------------------------------
|
||||
|
||||
$body-font-family: "Karla", "lucida grande", sans-serif
|
||||
$heading-font-family: "Montserrat", "Helvetica", sans-serif
|
||||
$code-font-family: "Karla", "lucida grande", sans-serif
|
||||
|
||||
// LAYOUT --------------------------------------------------------
|
||||
|
||||
$gutter: 30px
|
||||
$max-column-width: 600px
|
||||
|
||||
$sharing-section-z-index: 10
|
||||
|
||||
// UI COMPONENTS --------------------------------------------------------
|
||||
|
||||
$radius: 8px
|
||||
|
||||
|
||||
/* Typography
|
||||
*----------------------------------------------- */
|
||||
|
||||
html
|
||||
font: 87% / 1.5 $body-font-family, sans-serif
|
||||
font-weight: 400
|
||||
|
||||
@media (min-width: 40rem)
|
||||
html
|
||||
font-size: 100%
|
||||
|
||||
@media (min-width: 64rem)
|
||||
html
|
||||
font-size: 106%
|
||||
|
||||
body
|
||||
color: $color
|
||||
background-color: $bg-color
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
color: $heading-color
|
||||
line-height: 1.2em
|
||||
font-family: $heading-font-family
|
||||
font-weight: 700
|
||||
|
||||
h1
|
||||
font-size: 4rem
|
||||
margin: 0 0 0.2em 0
|
||||
line-height: 1.1em
|
||||
|
||||
@media (min-width: 40rem)
|
||||
h1
|
||||
font-size: 4.5rem
|
||||
|
||||
@media (min-width: 64rem)
|
||||
h1
|
||||
font-size: 5rem
|
||||
|
||||
h2
|
||||
color: $section-heading-color
|
||||
margin-bottom: 1.5rem
|
||||
font-size: 1.5rem
|
||||
text-transform: uppercase
|
||||
|
||||
@media (min-width: 40rem)
|
||||
h2
|
||||
font-size: 2rem
|
||||
|
||||
h3
|
||||
font-size: 1.2rem
|
||||
margin-bottom: .5rem
|
||||
|
||||
p
|
||||
margin: 0 auto 2em auto
|
||||
text-align: left
|
||||
|
||||
.lead
|
||||
max-width: 50rem
|
||||
margin-bottom: 1.4rem
|
||||
font-size: 1.1rem
|
||||
|
||||
@media (min-width: 40rem)
|
||||
.lead
|
||||
font-size: 1.25rem
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
a
|
||||
color: $link-color
|
||||
text-decoration: none
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
::-moz-selection,
|
||||
::selection
|
||||
background: $orange
|
||||
color: white
|
||||
|
||||
|
||||
/* Code
|
||||
* ========================================================================== */
|
||||
|
||||
code
|
||||
color: $code-color
|
||||
+border-radius($radius)
|
||||
font-family: Consolas, Courier, monospace
|
||||
font-size: 0.9rem
|
||||
padding: 0.1rem 0.3rem
|
||||
position: relative
|
||||
top: -1px
|
||||
|
||||
|
||||
/* Lists
|
||||
* ========================================================================== */
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
text-align: left
|
||||
|
||||
@media (min-width: 40rem)
|
||||
ul
|
||||
display: inline-block
|
||||
|
||||
|
||||
/* Buttons
|
||||
* ========================================================================== */
|
||||
|
||||
.button
|
||||
display: block
|
||||
padding: 0.7rem 2rem
|
||||
margin-bottom: 0.5rem
|
||||
border: none
|
||||
color: #fff
|
||||
background-color: $link-color
|
||||
font-size: 1.1rem
|
||||
font-weight: bold
|
||||
text-transform: uppercase
|
||||
+border-radius($radius)
|
||||
vertical-align: middle
|
||||
white-space: nowrap
|
||||
&:hover
|
||||
background: darken($link-color, 10%)
|
||||
text-decoration: none
|
||||
|
||||
@media (min-width: 40rem)
|
||||
.button
|
||||
display: inline-block
|
||||
margin: 0 0.25rem
|
||||
|
||||
.button-minor
|
||||
padding: 0.35rem 1rem
|
||||
border: 2px solid $link-color
|
||||
color: $link-color
|
||||
background-color: transparent
|
||||
font-size: 0.8rem
|
||||
&:hover
|
||||
color: white
|
||||
|
||||
|
||||
/* Elements
|
||||
* ========================================================================== */
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-top: 2px solid $border-color
|
||||
margin: 2rem auto
|
||||
width: 3rem
|
||||
|
||||
@media (min-width: 40rem)
|
||||
hr
|
||||
margin: 2.5rem auto
|
||||
|
||||
/* -- Layout ------------------------------------------------------------------ */
|
||||
|
||||
*, *:before, *:after
|
||||
+box-sizing("border-box")
|
||||
|
||||
body
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: $bg-color
|
||||
|
||||
section
|
||||
border-top: 2px solid $border-color
|
||||
text-align: center
|
||||
padding: 1.5rem 0
|
||||
&:first-of-type
|
||||
border-top: none
|
||||
|
||||
@media (min-width: 40rem)
|
||||
section
|
||||
padding: 2rem 0
|
||||
|
||||
.container
|
||||
margin: 0 auto
|
||||
max-width: 40rem
|
||||
width: 90%
|
||||
|
||||
/* -- Header -- */
|
||||
|
||||
header
|
||||
padding: 4rem 0 2rem 0
|
||||
background-color: $header-bg-color
|
||||
text-align: center
|
||||
p
|
||||
text-align: center
|
||||
|
||||
@media (min-width: 40rem)
|
||||
header
|
||||
padding: 2rem 0
|
||||
|
||||
|
||||
/* -- Examples -- */
|
||||
|
||||
.image-section
|
||||
margin-bottom: 80px
|
||||
.image-wrap
|
||||
position: relative
|
||||
line-height: 1em
|
||||
|
||||
.examples-section
|
||||
.image-section
|
||||
.target-image
|
||||
+border-bottom-radius($radius)
|
||||
.image-section.with-color-thief-output
|
||||
.target-image
|
||||
+border-bottom-radius(0)
|
||||
|
||||
.run-functions-button
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
width: 8rem
|
||||
height: 8rem
|
||||
margin-top: -4rem
|
||||
margin-left: -4rem
|
||||
border: none
|
||||
+border-radius(50%)
|
||||
color: $color
|
||||
background-color: $yellow
|
||||
font-size: 2rem
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
text-transform: uppercase
|
||||
outline: none
|
||||
&:hover
|
||||
+scale(1.1)
|
||||
+transition(transform .2s)
|
||||
&:active
|
||||
+scale(0.9)
|
||||
&.hide
|
||||
background-color: $yellow
|
||||
color: $color
|
||||
+transition(transform .6s, top .6s cubic-bezier(0.220, -0.370, 0.750, 0.750))
|
||||
top: 105%
|
||||
+scale(0)
|
||||
|
||||
// Use Modernizr to check for touch support
|
||||
.touch
|
||||
.touch-label
|
||||
display: inline
|
||||
.no-touch-label
|
||||
display: none
|
||||
.no-touch
|
||||
.touch-label
|
||||
display: none
|
||||
.no-touch-label
|
||||
display: inline
|
||||
|
||||
.target-image
|
||||
display: block
|
||||
width: 100%
|
||||
+border-top-radius($radius)
|
||||
|
||||
.color-thief-output
|
||||
display: none
|
||||
padding: 1.5rem
|
||||
background-color: white
|
||||
border: 1px solid $border-color
|
||||
border-top-width: 0
|
||||
+border-bottom-radius($radius)
|
||||
|
||||
.function-title
|
||||
margin-top: 0
|
||||
|
||||
.function
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.swatch
|
||||
display: inline-block
|
||||
margin: 0
|
||||
background: #dddddd
|
||||
|
||||
@media (min-width: 40rem)
|
||||
.swatch
|
||||
margin-right: -2px
|
||||
|
||||
.get-color
|
||||
.swatch
|
||||
width: 6rem
|
||||
height: 3rem
|
||||
|
||||
.get-palette
|
||||
.swatch
|
||||
width: 3rem
|
||||
height: 2rem
|
||||
|
||||
@media (min-width: 40rem)
|
||||
.get-palette
|
||||
.swatch
|
||||
width: 4rem
|
||||
height: 2.7rem
|
||||
|
||||
canvas
|
||||
display: none
|
||||
|
||||
|
||||
/* -- Credits -- */
|
||||
|
||||
footer
|
||||
padding: 2rem 0
|
||||
background-color: $header-bg-color
|
||||
text-align: center
|
||||
p
|
||||
text-align: center
|
||||
.button
|
||||
margin-top: 0.5rem
|
||||
|
||||
/* -- Sharing -- */
|
||||
|
||||
.sharing-section
|
||||
position: fixed
|
||||
z-index: $sharing-section-z-index
|
||||
top: 20px
|
||||
right: 0
|
||||
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
|
||||
.drag-drop-section
|
||||
display: none
|
||||
|
||||
.drop-zone
|
||||
height: 25rem
|
||||
margin-bottom: 4rem
|
||||
background-color: $gray-dark
|
||||
+border-radius($radius)
|
||||
&.dragging
|
||||
font-weight: 700
|
||||
+box-shadow(inset 0 0 0 8px $link-color)
|
||||
.drop-zone-label
|
||||
color: $link-color
|
||||
.default-label
|
||||
display: none
|
||||
.dragging-label
|
||||
display: block
|
||||
|
||||
.drop-zone-label
|
||||
position: relative
|
||||
top: 11rem
|
||||
color: $yellow
|
||||
font-size: 1.8rem
|
||||
text-align: center
|
||||
pointer-events: none
|
||||
text-transform: uppercase
|
||||
+border-radius($radius)
|
||||
|
||||
@media (min-width: 40rem)
|
||||
.drop-zone-label
|
||||
top: 10.5rem
|
||||
font-size: 2.4rem
|
||||
|
||||
.dragging-label
|
||||
display: none
|
||||
|
||||
.dropped-image
|
||||
.run-functions-button
|
||||
display: none
|
||||
.targetImage
|
||||
// width: 100%
|
||||
|
||||
|
||||
Reference in New Issue
Block a user