Scope install styles to install element

This commit is contained in:
lilia 2017-04-04 13:24:55 -07:00 committed by Scott Nonnenberg
parent 285b5ce062
commit 45bf7330ac
No known key found for this signature in database
GPG key ID: A4931C09644C654B
3 changed files with 732 additions and 865 deletions

View file

@ -3278,77 +3278,50 @@ li.entry .error-icon-container {
.iti-flag {
background: url("../images/flags.png"); }
* {
box-sizing: border-box; }
html, body {
height: 100%; }
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
position: relative;
#install {
height: 100%;
background: #2090ea;
color: white;
text-align: center;
font-size: 16px;
overflow: auto; }
.clearfix:before,
.clearfix:after {
display: table;
content: " "; }
.clearfix:after {
clear: both; }
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit; }
#install {
height: 100%; }
@media screen and (max-height: 665px) {
#install {
height: 666px; } }
.main {
#install input, #install button, #install select, #install textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit; }
#install .main {
padding: 70px 0 50px; }
.step {
#install .step {
display: none;
height: 100%; }
.inner {
#install .inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%; }
.inner .step-body {
#install .inner .step-body {
margin-top: auto;
width: 100%;
max-width: 600px; }
#signal-computer,
#signal-phone {
#install #signal-computer,
#install #signal-phone {
max-width: 50%;
max-height: 250px; }
p {
#install p {
max-width: 35em;
margin: 1em auto;
line-height: 1.5em;
font-size: 1.2em;
font-weight: bold; }
a {
#install a {
cursor: pointer; }
a, a:visited, a:hover {
#install a, #install a:visited, #install a:hover {
text-decoration: none; }
.button {
#install .button {
display: inline-block;
text-transform: uppercase;
border: none;
@ -3358,15 +3331,14 @@ a {
margin: 0.5em 0;
background: white;
color: #2090ea; }
.nav {
#install .nav {
width: 100%;
bottom: 50px;
margin-top: auto;
padding: 0 20px; }
.nav .button {
#install .nav .button {
margin-bottom: 3em; }
.nav .dot {
#install .nav .dot {
display: inline-block;
cursor: pointer;
margin: 10px;
@ -3375,48 +3347,40 @@ a {
border-radius: 10px;
background: white;
border: solid 5px #2090ea; }
.nav .dot.selected {
#install .nav .dot.selected {
background: #a2d2f4; }
.link:hover, .link:focus {
#install .link:hover, #install .link:focus {
background: rgba(255, 255, 255, 0.3);
outline: none; }
.link, .link:visited, .link:hover {
#install .link, #install .link:visited, #install .link:hover {
padding: 0 3px;
color: white;
font-weight: bold;
border-bottom: dashed 2px white;
text-decoration: none; }
.container {
#install .container {
min-width: 650px; }
h1 {
#install h1 {
font-size: 30pt;
font-weight: normal;
padding-bottom: 10px; }
h3.step {
#install h3.step {
margin-top: 0;
font-weight: bold; }
.help {
#install .help {
border-top: 2px solid #f3f3f3;
padding: 1.5em 0.1em; }
.install {
#install .install {
display: inline-block;
margin-top: 90px; }
#qr {
#install #qr {
display: inline-block;
min-height: 266px; }
#qr img {
#install #qr img {
border: 5px solid white; }
#qr canvas {
#install #qr canvas {
display: none; }
#device-name {
#install #device-name {
border: none;
border-bottom: 1px solid white;
padding: 8px;
@ -3424,47 +3388,40 @@ h3.step {
color: white;
font-weight: bold;
text-align: center; }
#device-name::selection, #device-name a::selection {
#install #device-name::selection, #install #device-name a::selection {
color: #454545;
background: white; }
#device-name::-moz-selection, #device-name a::-moz-selection {
#install #device-name::-moz-selection, #install #device-name a::-moz-selection {
color: #454545;
background: white; }
#device-name:focus {
#install #device-name:focus {
outline: none; }
#device-name:hover, #device-name:focus {
#install #device-name:hover, #install #device-name:focus {
background: rgba(255, 255, 255, 0.1); }
#verifyCode,
#code,
#number {
#install #verifyCode,
#install #code,
#install #number {
box-sizing: border-box;
width: 100%;
display: block;
margin-bottom: 0.5em;
text-align: center; }
#request-voice,
#request-sms {
#install #request-voice,
#install #request-sms {
box-sizing: border-box; }
#request-sms {
#install #request-sms {
width: 57%;
float: right; }
#request-voice {
#install #request-voice {
width: 40%;
float: left; }
.number-container {
#install .number-container {
position: relative;
margin-bottom: 0.5em; }
.number-container .intl-tel-input,
.number-container .number {
#install .number-container .intl-tel-input,
#install .number-container .number {
width: 100%; }
.number-container::after {
#install .number-container::after {
visibility: hidden;
content: ' ';
display: inline-block;
@ -3478,74 +3435,61 @@ h3.step {
left: 100%;
margin: 3px 8px;
text-align: center; }
.number-container.valid::after {
#install .number-container.valid::after {
visibility: visible;
content: '✓';
background-color: #0f9d58;
color: #ffffff; }
.number-container.invalid::after {
#install .number-container.invalid::after {
visibility: visible;
content: '!';
background-color: #f44336;
color: #ffffff; }
#error {
#install #error {
color: white;
font-weight: bold;
padding: 0.5em;
text-align: center; }
#error {
#install #error {
background-color: #f44336; }
#error:before {
#install #error:before {
content: '\26a0';
padding-right: 0.5em; }
.narrow {
#install .narrow {
margin: auto;
box-sizing: border-box;
width: 275px;
max-width: 100%; }
ul.country-list {
#install ul.country-list {
min-width: 197px !important; }
.confirmation-dialog, .progress-dialog, .error-dialog {
#install .confirmation-dialog, #install .progress-dialog, #install .error-dialog {
padding: 1em;
text-align: left; }
.number {
#install .number {
text-align: center; }
.confirmation-dialog button, .error-dialog button {
#install .confirmation-dialog button, #install .error-dialog button {
float: right;
margin-left: 10px; }
.progress-dialog {
#install .progress-dialog {
text-align: center;
padding: 1em;
width: 100%;
max-width: 600px;
margin: auto; }
.progress-dialog .status {
#install .progress-dialog .status {
padding: 1em; }
.progress-dialog .bar-container {
#install .progress-dialog .bar-container {
height: 1em;
background-color: #f3f3f3;
border: solid 1px white; }
.progress-dialog .bar {
#install .progress-dialog .bar {
width: 0;
height: 100%;
background-color: #a2d2f4;
transition: width 0.25s; }
.error-dialog {
#install .error-dialog {
display: none; }
.modal-container {
#install .modal-container {
display: none;
position: absolute;
width: 100%;
@ -3554,7 +3498,7 @@ ul.country-list {
top: 0;
padding-top: 10em;
text-align: center; }
.modal-container .modal-main {
#install .modal-container .modal-main {
display: inline-block;
width: 80%;
max-width: 500px;
@ -3562,7 +3506,7 @@ ul.country-list {
background: white;
margin: 10% auto;
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
.modal-container .modal-main h4 {
#install .modal-container .modal-main h4 {
background-color: #2090ea;
color: white;
padding: 1em;

View file

@ -839,77 +839,50 @@
.iti-flag {
background: url("../images/flags.png"); }
* {
box-sizing: border-box; }
html, body {
height: 100%; }
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
position: relative;
#install {
height: 100%;
background: #2090ea;
color: white;
text-align: center;
font-size: 16px;
overflow: auto; }
.clearfix:before,
.clearfix:after {
display: table;
content: " "; }
.clearfix:after {
clear: both; }
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit; }
#install {
height: 100%; }
@media screen and (max-height: 665px) {
#install {
height: 666px; } }
.main {
#install input, #install button, #install select, #install textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit; }
#install .main {
padding: 70px 0 50px; }
.step {
#install .step {
display: none;
height: 100%; }
.inner {
#install .inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%; }
.inner .step-body {
#install .inner .step-body {
margin-top: auto;
width: 100%;
max-width: 600px; }
#signal-computer,
#signal-phone {
#install #signal-computer,
#install #signal-phone {
max-width: 50%;
max-height: 250px; }
p {
#install p {
max-width: 35em;
margin: 1em auto;
line-height: 1.5em;
font-size: 1.2em;
font-weight: bold; }
a {
#install a {
cursor: pointer; }
a, a:visited, a:hover {
#install a, #install a:visited, #install a:hover {
text-decoration: none; }
.button {
#install .button {
display: inline-block;
text-transform: uppercase;
border: none;
@ -919,15 +892,14 @@ a {
margin: 0.5em 0;
background: white;
color: #2090ea; }
.nav {
#install .nav {
width: 100%;
bottom: 50px;
margin-top: auto;
padding: 0 20px; }
.nav .button {
#install .nav .button {
margin-bottom: 3em; }
.nav .dot {
#install .nav .dot {
display: inline-block;
cursor: pointer;
margin: 10px;
@ -936,48 +908,40 @@ a {
border-radius: 10px;
background: white;
border: solid 5px #2090ea; }
.nav .dot.selected {
#install .nav .dot.selected {
background: #a2d2f4; }
.link:hover, .link:focus {
#install .link:hover, #install .link:focus {
background: rgba(255, 255, 255, 0.3);
outline: none; }
.link, .link:visited, .link:hover {
#install .link, #install .link:visited, #install .link:hover {
padding: 0 3px;
color: white;
font-weight: bold;
border-bottom: dashed 2px white;
text-decoration: none; }
.container {
#install .container {
min-width: 650px; }
h1 {
#install h1 {
font-size: 30pt;
font-weight: normal;
padding-bottom: 10px; }
h3.step {
#install h3.step {
margin-top: 0;
font-weight: bold; }
.help {
#install .help {
border-top: 2px solid #f3f3f3;
padding: 1.5em 0.1em; }
.install {
#install .install {
display: inline-block;
margin-top: 90px; }
#qr {
#install #qr {
display: inline-block;
min-height: 266px; }
#qr img {
#install #qr img {
border: 5px solid white; }
#qr canvas {
#install #qr canvas {
display: none; }
#device-name {
#install #device-name {
border: none;
border-bottom: 1px solid white;
padding: 8px;
@ -985,47 +949,40 @@ h3.step {
color: white;
font-weight: bold;
text-align: center; }
#device-name::selection, #device-name a::selection {
#install #device-name::selection, #install #device-name a::selection {
color: #454545;
background: white; }
#device-name::-moz-selection, #device-name a::-moz-selection {
#install #device-name::-moz-selection, #install #device-name a::-moz-selection {
color: #454545;
background: white; }
#device-name:focus {
#install #device-name:focus {
outline: none; }
#device-name:hover, #device-name:focus {
#install #device-name:hover, #install #device-name:focus {
background: rgba(255, 255, 255, 0.1); }
#verifyCode,
#code,
#number {
#install #verifyCode,
#install #code,
#install #number {
box-sizing: border-box;
width: 100%;
display: block;
margin-bottom: 0.5em;
text-align: center; }
#request-voice,
#request-sms {
#install #request-voice,
#install #request-sms {
box-sizing: border-box; }
#request-sms {
#install #request-sms {
width: 57%;
float: right; }
#request-voice {
#install #request-voice {
width: 40%;
float: left; }
.number-container {
#install .number-container {
position: relative;
margin-bottom: 0.5em; }
.number-container .intl-tel-input,
.number-container .number {
#install .number-container .intl-tel-input,
#install .number-container .number {
width: 100%; }
.number-container::after {
#install .number-container::after {
visibility: hidden;
content: ' ';
display: inline-block;
@ -1039,74 +996,61 @@ h3.step {
left: 100%;
margin: 3px 8px;
text-align: center; }
.number-container.valid::after {
#install .number-container.valid::after {
visibility: visible;
content: '✓';
background-color: #0f9d58;
color: #ffffff; }
.number-container.invalid::after {
#install .number-container.invalid::after {
visibility: visible;
content: '!';
background-color: #f44336;
color: #ffffff; }
#error {
#install #error {
color: white;
font-weight: bold;
padding: 0.5em;
text-align: center; }
#error {
#install #error {
background-color: #f44336; }
#error:before {
#install #error:before {
content: '\26a0';
padding-right: 0.5em; }
.narrow {
#install .narrow {
margin: auto;
box-sizing: border-box;
width: 275px;
max-width: 100%; }
ul.country-list {
#install ul.country-list {
min-width: 197px !important; }
.confirmation-dialog, .progress-dialog, .error-dialog {
#install .confirmation-dialog, #install .progress-dialog, #install .error-dialog {
padding: 1em;
text-align: left; }
.number {
#install .number {
text-align: center; }
.confirmation-dialog button, .error-dialog button {
#install .confirmation-dialog button, #install .error-dialog button {
float: right;
margin-left: 10px; }
.progress-dialog {
#install .progress-dialog {
text-align: center;
padding: 1em;
width: 100%;
max-width: 600px;
margin: auto; }
.progress-dialog .status {
#install .progress-dialog .status {
padding: 1em; }
.progress-dialog .bar-container {
#install .progress-dialog .bar-container {
height: 1em;
background-color: #f3f3f3;
border: solid 1px white; }
.progress-dialog .bar {
#install .progress-dialog .bar {
width: 0;
height: 100%;
background-color: #a2d2f4;
transition: width 0.25s; }
.error-dialog {
#install .error-dialog {
display: none; }
.modal-container {
#install .modal-container {
display: none;
position: absolute;
width: 100%;
@ -1115,7 +1059,7 @@ ul.country-list {
top: 0;
padding-top: 10em;
text-align: center; }
.modal-container .modal-main {
#install .modal-container .modal-main {
display: inline-block;
width: 80%;
max-width: 500px;
@ -1123,7 +1067,7 @@ ul.country-list {
background: white;
margin: 10% auto;
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
.modal-container .modal-main h4 {
#install .modal-container .modal-main h4 {
background-color: #2090ea;
color: white;
padding: 1em;

View file

@ -6,31 +6,17 @@
background: url("../images/flags.png");
}
* {
box-sizing: border-box;
}
html,body {
#install {
height: 100%;
}
body {
margin: 0;
font-family: $roboto;
position: relative;
background: #2090ea;
color: white;
text-align: center;
font-size: 16px;
overflow: auto;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
// 666px is the minimum window height in chromium.js
@media screen and (max-height: 665px) {
height: 666px;
}
input, button, select, textarea {
@ -39,14 +25,6 @@ input, button, select, textarea {
line-height: inherit;
}
#install {
height: 100%;
// 666px is the minimum window height in chromium.js
@media screen and (max-height: 665px) {
height: 666px;
}
}
.main {
padding: 70px 0 50px;
}
@ -355,6 +333,7 @@ ul.country-list {
}
}
}
.intl-tel-input .country-list {
text-align: left;