Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #19280 from wilsonpage/1010490
Browse files Browse the repository at this point in the history 
Bug 1010490 - [Camera][Flame] Zoom bar overlaps recording timer
  • Loading branch information
@wilsonpage
wilsonpage committed May 20, 2014
2 parents 1609e72 + ee9a646 commit 84d12a6
Showing 1 changed file with 88 additions and 63 deletions.
151 changes: 88 additions & 63 deletions apps/camera/style/zoom-bar.css
View file
@@ -1,48 +1,48 @@
/**
Zoom Bar Container
*/

/** Zoom Bar (portrait)
---------------------------------------------------------*/

.zoom-bar {
position: absolute;
width: 0.2rem; /* 0.2rem(spec) */
top: 12.5rem;
right: 4rem;
bottom: 12.5rem;
width: 0.2rem; /* 0.2rem (spec) */
height: auto;
min-height: 16.4rem; /* 16.4rem(spec) */
min-height: 16.4rem; /* 16.4rem (spec) */
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}

/**
* zooming
*/

.zoom-bar.zooming {
opacity: 1;
pointer-events: auto;
}

/**
Portrait Orientation (0deg)
* deg90 (landscape)
*/
.zoom-bar {
top: 12.5rem;
right: 4rem;
bottom: 12.5rem;
left: auto;
height: auto;
}

/**
Landscape Orientation (90deg)
*/
body.deg90 .zoom-bar {
top: calc(-50vh + 12rem);
top: 13.5rem;
right: 3rem;
bottom: auto;
left: auto;
height: calc(100vw - 6rem);
transform: rotate(-90deg);
transform-origin: 100% 100%;
transform-origin: 0 0;
transform:
rotate(-90deg)
translate(0px, -100%);
}

/**
Upside-Down Portrait Orientation (180deg)
* deg180 (upside-down portrait)
*/

body.deg180 .zoom-bar {
top: 12.5rem;
right: auto;
Expand All @@ -52,37 +52,43 @@ body.deg180 .zoom-bar {
}

/**
Landscape Orientation (270deg)
* deg270 (landscape)
*/

body.deg270 .zoom-bar {
top: calc(50vh - 15.6rem);
top: auto;
right: auto;
bottom: auto;
bottom: 16rem;
left: 3rem;
height: calc(100vw - 6rem);
transform: rotate(90deg);
transform-origin: 0% 100%;
transform-origin: 0 100% 0;
transform:
translate(0%, 0%)
rotate(90deg);
}

/**
Zoom Bar Max Indicator
*/
/** Zoom Bar Max Indicator
---------------------------------------------------------*/

.zoom-bar-max-indicator {
background-color: #719198;
border-radius: 50%;
opacity: 0.75;
position: absolute;
top: 0;
left: -0.4rem; /* -(width / 2) + (bar-width / 2) */
left: -0.4rem; /* -(width / 2) + (bar-width / 2) */
width: 1rem;
height: 1rem;
z-index: 1;
transition: background-color 0.15s ease, opacity 0.15s ease;
opacity: 0.75;
border-radius: 50%;
background-color: #719198;
transition:
background-color 0.15s ease,
opacity 0.15s ease;
}

/**
Expanded Touch Target for Max Indicator (4rem x 4rem)
* Expanded Touch Target (4rem x 4rem)
*/

.zoom-bar-max-indicator:before {
content: '';
display: block;
Expand All @@ -93,30 +99,37 @@ body.deg270 .zoom-bar {
left: -1.5rem;
}

/**
* active
*/

.zoom-bar-max-indicator.active {
background-color: #ffffff;
opacity: 1;
}

/**
Zoom Bar Min Indicator
*/
/** Zoom Bar Min Indicator
---------------------------------------------------------*/

.zoom-bar-min-indicator {
background-color: #ffffff;
border-radius: 50%;
opacity: 0.75;
position: absolute;
bottom: 0;
left: -0.15rem; /* -(width / 2) + (bar-width / 2) */
left: -0.15rem; /* -(width / 2) + (bar-width / 2) */
width: 0.5rem;
height: 0.5rem;
z-index: 1;
transition: background-color 0.15s ease, opacity 0.15s ease;
opacity: 0.75;
border-radius: 50%;
background-color: #ffffff;
transition:
background-color 0.15s ease,
opacity 0.15s ease;
}

/**
Expanded Touch Target for Min Indicator (4rem x 4rem)
* Expanded Touch Target (4rem x 4rem)
*/

.zoom-bar-min-indicator:before {
content: '';
display: block;
Expand All @@ -127,54 +140,62 @@ body.deg270 .zoom-bar {
left: -1.75rem;
}

/**
* active
*/

.zoom-bar-min-indicator.active {
background-color: #ffffff;
opacity: 1;
}

/**
Zoom Bar Max Inner/Track
*/
/** Zoom Bar Inner
---------------------------------------------------------*/

.zoom-bar-inner {
background-color: rgba(113, 145, 152, 0.75);
position: absolute;
top: 2.8rem; /* max-indicator-height + 1.8rem(spec) */
top: 2.8rem; /* max-indicator-height + 1.8rem(spec) */
right: 0;
bottom: 2.8rem; /* min-indicator-height + 2.3rem(spec) */
bottom: 2.8rem; /* min-indicator-height + 2.3rem(spec) */
left: 0;
z-index: 2;
background-color: rgba(113, 145, 152, 0.75);
}

/** Zoom Bar Track
---------------------------------------------------------*/

.zoom-bar-track {
background-color: #ffffff;
position: absolute;
top: 100%; /* 100% - 0% */
top: 100%; /* 100% - 0% */
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
transition: top 0.08s linear;
}

/**
Zoom Bar Scrubber
*/
/** Zoom Bar Scrubber
---------------------------------------------------------*/

.zoom-bar-scrubber {
background-color: #93bac2;
border: 0.15rem solid #ffffff;
border-radius: 50%;
box-sizing: padding-box;
position: absolute;
margin-bottom: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
bottom: 0%; /* 0% - 100% */
left: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
bottom: 0; /* 0% - 100% */
left: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
width: 1.3rem;
height: 1.3rem;
box-sizing: padding-box;
margin-bottom: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
border-radius: 50%;
border: 0.15rem solid #ffffff;
background-color: #93bac2;
transition: background-color 0.15s ease, bottom 0.08s linear;
}

/**
Expanded Touch Target for Scrubber (5.3rem x 4.3rem)
* Expanded touch target (5.3rem x 4.3rem)
*/

.zoom-bar-scrubber:before {
content: '';
display: block;
Expand All @@ -185,6 +206,10 @@ body.deg270 .zoom-bar {
left: -2rem;
}

/**
* active
*/

.zoom-bar-scrubber.active {
background-color: #008eab;
}

0 comments on commit 84d12a6

Please sign in to comment.