Commit d68c8aec authored by David Burke's avatar David Burke

Merge branch '235-change-pw-font' into 'dev'

Resolve "Make visible password field a different font"

Closes #235

See merge request !216
parents d67ca397 b5293122
Pipeline #63540750 failed with stages
in 6 minutes and 54 seconds
......@@ -106,6 +106,10 @@ ActionBar,
width: 78%;
}
.monoInput {
font-family: monospace;
}
.landscape .urlInput {
width: 84%;
}
......@@ -189,3 +193,7 @@ ActionBar,
background-color: #0092a8;
color: #0092a8;
}
.monospace {
font-family: monospace;
}
......@@ -78,7 +78,7 @@
[ngrxFormControlState]="form.controls.password"
autocomplete="off"
#realPasswordInput
class="form-field__input secret__input form-field--dirty-feedback form-field--dirty-feedback-next form-field__input--two-actions"
class="form-field__input secret__input secret__input--mono form-field--dirty-feedback form-field--dirty-feedback-next form-field__input--two-actions"
>
<div class="form-field__actions">
<button
......@@ -98,7 +98,7 @@
autocomplete="off"
[class.u-invisible]="passwordIsMasked"
#realPasswordInput
class="form-field__input secret__input form-field--dirty-feedback form-field--dirty-feedback-next form-field__input--two-actions"
class="form-field__input secret__input secret__input--mono form-field--dirty-feedback form-field--dirty-feedback-next form-field__input--two-actions"
(blur)="togglePassword()"
>
<input
......
......@@ -85,7 +85,7 @@
[class.newPasswordInput]="isNew"
[class.tabletPasswordInput]="isTablet"
[class.passwordInput]="!isNew && !isTablet"
class="detailInput"
class="detailInput monospace"
></TextField>
<FlexboxLayout width="30%">
<Button
......
@import '~breakpoint-sass/stylesheets/breakpoint';
@import '~susy/sass/susy';
@import '../../../styles/breakpoints';
@import '../../../styles/colors';
@import "~breakpoint-sass/stylesheets/breakpoint";
@import "~susy/sass/susy";
@import "../../../styles/breakpoints";
@import "../../../styles/colors";
@keyframes progress {
from {
......@@ -48,7 +48,7 @@
bottom: 0;
&:after {
content: '';
content: "";
position: absolute;
bottom: 0;
left: 0;
......@@ -57,9 +57,9 @@
background-color: transparent;
transition: background-color 0.5s;
}
&--is-saving:before {
content: '';
content: "";
position: absolute;
bottom: 0;
left: -100vw;
......@@ -70,14 +70,14 @@
opacity: 0.25;
overflow: hidden;
}
&--is-saving:after {
&--is-saving:after {
background-color: $color-malibu;
transform-origin: left;
width: 500px;
animation: progress 2s linear infinite;
}
&--is-saved:after {
background-color: $color-de-york;
}
......@@ -112,6 +112,10 @@
}
&__input {
&--mono {
font-family: "Overpass-Mono" !important;
}
&--mask {
color: $color-tiara;
}
......@@ -130,7 +134,7 @@
margin-left: 15px;
@include breakpoint($small) {
&:nth-child(n+2) {
&:nth-child(n + 2) {
margin-top: 5px;
}
}
......@@ -184,6 +188,3 @@
line-height: 19px;
}
}
/* Webfont: Overpass-Bold */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-Bold */
@font-face {
font-family: "Overpass";
font-style: normal;
font-weight: 700;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Bold.woff') format('woff');
src: url("./assets/fonts/Overpass-Bold.woff") format("woff");
}
/* Webfont: Overpass-BoldItalic */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-BoldItalic */
@font-face {
font-family: "Overpass";
font-style: italic;
font-weight: 700;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Bold-Italic.woff') format('woff');
src: url("./assets/fonts/Overpass-Bold-Italic.woff") format("woff");
}
/* Webfont: Overpass-Reg */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-Reg */
@font-face {
font-family: "Overpass";
font-style: normal;
font-weight: 600;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Regular.woff') format('woff');
src: url("./assets/fonts/Overpass-Regular.woff") format("woff");
}
/* Webfont: Overpass-Italic */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-Italic */
@font-face {
font-family: "Overpass";
font-style: italic;
font-weight: 600;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Italic.woff') format('woff');
src: url("./assets/fonts/Overpass-Italic.woff") format("woff");
}
/* Webfont: Overpass-Light */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-Light */
@font-face {
font-family: "Overpass";
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Light.woff') format('woff');
src: url("./assets/fonts/Overpass-Light.woff") format("woff");
}
/* Webfont: Overpass-LightItalic */@font-face {
font-family: 'Overpass';
/* Webfont: Overpass-LightItalic */
@font-face {
font-family: "Overpass";
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
src: url('./assets/fonts/Overpass-Light-Italic.woff') format('woff');
src: url("./assets/fonts/Overpass-Light-Italic.woff") format("woff");
}
/* Webfont: Overpass-Mono-Regular */
@font-face {
font-family: "Overpass-Mono";
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
src: url("./assets/fonts/Overpass-Mono-Regular.woff") format("woff");
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment