mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
406 lines
6.9 KiB
Sass
406 lines
6.9 KiB
Sass
@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%
|
|
|
|
|