CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-09-05 08:37:43 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refine color picker styles

Browse Source
This commit is contained in:
Keegan
2016-03-14 01:01:58 +11:00
parent 12b0ae9bd6
commit 005ac939b1
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/clay/_base.scss
+1
View File
@@ -107,6 +107,7 @@ label {
.tap-highlight { .tap-highlight {
@include tap-highlight(); @include tap-highlight();
border-radius: $border-radius;
} }
.component { .component {
src/styles/clay/_vars.scss
+2 -3
View File
@@ -11,8 +11,6 @@ $item-spacing-v: $base-height / 2;
$item-spacing-h: 0.75rem; $item-spacing-h: 0.75rem;
$small-component-width: $base-height * $golden; $small-component-width: $base-height * $golden;
// ---- Colors ------ // ---- Colors ------
$color-orange: #ff4700; $color-orange: #ff4700;
$color-orange-dark: #993d19; $color-orange-dark: #993d19;
@@ -37,4 +35,5 @@ $color-gray-11: #f2f2f2;
$button-padding: 0.6rem; $button-padding: 0.6rem;
$button-padding-ios: 0.5rem; $button-padding-ios: 0.5rem;
$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem; $box-shadow-small-components: 0 0.1rem 0.1rem $color-gray-1;
$box-shadow-large-components: 0 rem(3px) rem(15px) rgba(0,0,0,0.4);
src/styles/clay/components/color.scss
+14 -7
View File
@@ -20,17 +20,25 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
padding: 1rem; padding: $item-spacing-v $item-spacing-h /2;
background: rgba(0,0,0,0.7); background: rgba(0, 0, 0, 0.65);
opacity: 0; opacity: 0;
transition: opacity 70ms ease-in 175ms; transition: opacity 100ms ease-in 175ms;
pointer-events: none; pointer-events: none;
z-index: 100; z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.picker { .picker {
padding: 1rem; padding: $item-spacing-v $item-spacing-h;
background: $color-gray-11; background: $color-gray-4;
box-shadow: $box-shadow-large-components;
border-radius: $border-radius; border-radius: $border-radius;
width: 100%;
max-width: 26rem;
overflow: auto;
} }
&.show { &.show {
@@ -46,7 +54,6 @@
height: 0; height: 0;
width: 100%; width: 100%;
padding: 0 0 100% 0; // overridden with inline style padding: 0 0 100% 0; // overridden with inline style
margin: 0.6em 0 0;
.color-box-container { .color-box-container {
position: absolute; position: absolute;
@@ -77,7 +84,7 @@
} }
&.selected { &.selected {
transform: scale(1.15); transform: scale(1.1);
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: #111 0 0 0.24rem; box-shadow: #111 0 0 0.24rem;
position: relative; position: relative;