Scope install styles to install element
This commit is contained in:
lilia
Scott Nonnenberg
parent
285b5ce062
commit
45bf7330ac
3 changed files with 732 additions and 865 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -6,55 +6,33 @@
|
|||
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;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
#install {
|
||||
height: 100%;
|
||||
|
||||
// 666px is the minimum window height in chromium.js
|
||||
@media screen and (max-height: 665px) {
|
||||
height: 666px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 70px 0 50px;
|
||||
}
|
||||
.step {
|
||||
}
|
||||
.step {
|
||||
display: none;
|
||||
height: 100%;
|
||||
}
|
||||
.inner {
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -66,30 +44,30 @@ input, button, select, textarea {
|
|||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#signal-computer,
|
||||
#signal-phone {
|
||||
#signal-computer,
|
||||
#signal-phone {
|
||||
max-width: 50%;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
p {
|
||||
max-width: 35em;
|
||||
margin: 1em auto;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
a {
|
||||
cursor: pointer;
|
||||
&, &:visited, &:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
.button {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
|
|
@ -99,9 +77,9 @@ a {
|
|||
margin: 0.5em 0;
|
||||
background: white;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
.nav {
|
||||
width: 100%;
|
||||
bottom: 50px;
|
||||
margin-top: auto;
|
||||
|
|
@ -125,9 +103,9 @@ a {
|
|||
background: $blue_l;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
.link {
|
||||
&:hover, &:focus {
|
||||
background: rgba(255,255,255,0.3);
|
||||
outline: none;
|
||||
|
|
@ -139,34 +117,34 @@ a {
|
|||
border-bottom: dashed 2px white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.container {
|
||||
min-width: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
h1 {
|
||||
font-size: 30pt;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h3.step {
|
||||
h3.step {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
.help {
|
||||
border-top: 2px solid $grey_l;
|
||||
padding: 1.5em 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.install {
|
||||
.install {
|
||||
display: inline-block;
|
||||
margin-top: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
#qr {
|
||||
#qr {
|
||||
display: inline-block;
|
||||
min-height: 266px;
|
||||
img {
|
||||
|
|
@ -176,9 +154,9 @@ h3.step {
|
|||
canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#device-name {
|
||||
#device-name {
|
||||
border: none;
|
||||
border-bottom: 1px solid white;
|
||||
padding: 8px;
|
||||
|
|
@ -204,40 +182,40 @@ h3.step {
|
|||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#verifyCode,
|
||||
#code,
|
||||
#number {
|
||||
#verifyCode,
|
||||
#code,
|
||||
#number {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#request-voice,
|
||||
#request-sms {
|
||||
#request-voice,
|
||||
#request-sms {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#request-sms {
|
||||
}
|
||||
#request-sms {
|
||||
width: 57%;
|
||||
float: right;
|
||||
}
|
||||
#request-voice {
|
||||
}
|
||||
#request-voice {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.number-container {
|
||||
.number-container {
|
||||
position: relative;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.number-container .intl-tel-input,
|
||||
.number-container .number {
|
||||
}
|
||||
.number-container .intl-tel-input,
|
||||
.number-container .number {
|
||||
width: 100%;
|
||||
}
|
||||
.number-container::after {
|
||||
}
|
||||
.number-container::after {
|
||||
visibility: hidden;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
|
|
@ -251,54 +229,54 @@ h3.step {
|
|||
left: 100%;
|
||||
margin: 3px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.number-container.valid::after {
|
||||
}
|
||||
.number-container.valid::after {
|
||||
visibility: visible;
|
||||
content: '✓';
|
||||
background-color: #0f9d58;
|
||||
color: #ffffff;
|
||||
}
|
||||
.number-container.invalid::after {
|
||||
}
|
||||
.number-container.invalid::after {
|
||||
visibility: visible;
|
||||
content: '!';
|
||||
background-color: #f44336;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
#error {
|
||||
#error {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
#error { background-color: #f44336; }
|
||||
#error:before {
|
||||
}
|
||||
#error { background-color: #f44336; }
|
||||
#error:before {
|
||||
content: '\26a0';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.narrow {
|
||||
}
|
||||
.narrow {
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
width: 275px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.country-list {
|
||||
ul.country-list {
|
||||
min-width: 197px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.confirmation-dialog, .progress-dialog, .error-dialog {
|
||||
.confirmation-dialog, .progress-dialog, .error-dialog {
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
.number { text-align: center; }
|
||||
.confirmation-dialog, .error-dialog {
|
||||
}
|
||||
.number { text-align: center; }
|
||||
.confirmation-dialog, .error-dialog {
|
||||
button {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.progress-dialog {
|
||||
}
|
||||
.progress-dialog {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
|
|
@ -321,12 +299,12 @@ ul.country-list {
|
|||
&.active {
|
||||
}
|
||||
}
|
||||
}
|
||||
.error-dialog {
|
||||
}
|
||||
.error-dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
.modal-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -354,6 +332,7 @@ ul.country-list {
|
|||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intl-tel-input .country-list {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue