mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Use 1px borders on inputs and buttons (#9766)
This commit is contained in:
parent
77dc0ab008
commit
a74aa45bdd
@ -34,7 +34,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 17px;
|
padding-top: 17px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 2px solid $spindle;
|
border-color: $spindle;
|
||||||
background: $white;
|
background: $white;
|
||||||
color: $scorpion;
|
color: $scorpion;
|
||||||
|
|
||||||
@ -52,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button-group__button--active {
|
.button-group__button--active {
|
||||||
border: 2px solid $primary-blue;
|
border-color: $primary-blue;
|
||||||
color: $scorpion;
|
color: $scorpion;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
@ -222,10 +222,10 @@
|
|||||||
|
|
||||||
.button-group__button--active {
|
.button-group__button--active {
|
||||||
background: #f7fcff;
|
background: #f7fcff;
|
||||||
border: 2px solid #2c8bdc;
|
border-color: #2c8bdc;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border: 2px solid #2c8bdc;
|
border-color: #2c8bdc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-check-wrapper {
|
.button-check-wrapper {
|
||||||
|
@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& &__ignore-button {
|
& &__ignore-button {
|
||||||
border: 2px solid #6a737d;
|
border-color: #6a737d;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: $white;
|
color: $white;
|
||||||
@ -75,7 +75,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& &__accept-button {
|
& &__accept-button {
|
||||||
border: 2px solid #6a737d;
|
border-color: #6a737d;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
@ -39,7 +39,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
color: $Blue-500;
|
color: $Blue-500;
|
||||||
border: 2px solid $hover-secondary;
|
border: 1px solid $hover-secondary;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -60,7 +60,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
color: $Orange-500;
|
color: $Orange-500;
|
||||||
border: 2px solid $hover-orange;
|
border: 1px solid $hover-orange;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -81,7 +81,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
color: $Red-500;
|
color: $Red-500;
|
||||||
border: 2px solid $hover-red;
|
border: 1px solid $hover-red;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -102,7 +102,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-danger-primary {
|
.btn-danger-primary {
|
||||||
color: $white;
|
color: $white;
|
||||||
border: 2px solid $Red-500;
|
border: 1px solid $Red-500;
|
||||||
background-color: $Red-500;
|
background-color: $Red-500;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -125,7 +125,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-default {
|
.btn-default {
|
||||||
color: $Grey-500;
|
color: $Grey-500;
|
||||||
border: 2px solid $hover-default;
|
border: 1px solid $hover-default;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $Grey-500;
|
border-color: $Grey-500;
|
||||||
@ -145,7 +145,7 @@ $warning-light-orange: #f8b588;
|
|||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
color: $white;
|
color: $white;
|
||||||
border: 2px solid $Blue-500;
|
border: 1px solid $Blue-500;
|
||||||
background-color: $Blue-500;
|
background-color: $Blue-500;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -61,7 +61,7 @@ const styles = {
|
|||||||
'label + &': {
|
'label + &': {
|
||||||
marginTop: '9px',
|
marginTop: '9px',
|
||||||
},
|
},
|
||||||
border: '2px solid #BBC0C5',
|
border: '1px solid #BBC0C5',
|
||||||
height: '48px',
|
height: '48px',
|
||||||
borderRadius: '6px',
|
borderRadius: '6px',
|
||||||
padding: '0 16px',
|
padding: '0 16px',
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.network-component.pointer {
|
.network-component.pointer {
|
||||||
border: 2px solid $Grey-200;
|
border: 1px solid $Grey-200;
|
||||||
border-radius: 82px;
|
border-radius: 82px;
|
||||||
padding: 6px 3px;
|
padding: 6px 3px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
@ -784,7 +784,7 @@
|
|||||||
width: 56px;
|
width: 56px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid #b0d7f2;
|
border: 1px solid #b0d7f2;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -804,7 +804,7 @@
|
|||||||
|
|
||||||
input:checked + &__button {
|
input:checked + &__button {
|
||||||
background-color: $primary-blue;
|
background-color: $primary-blue;
|
||||||
border: 2px solid $primary-blue;
|
border: 1px solid $primary-blue;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,15 +20,15 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid transparent;
|
border: 1px solid transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 2px solid rgba($malibu-blue, 0.5);
|
border-color: rgba($malibu-blue, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--selected {
|
&--selected {
|
||||||
border: 2px solid $malibu-blue !important;
|
border-color: $malibu-blue !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
|
@ -45,7 +45,7 @@
|
|||||||
|
|
||||||
&__btn {
|
&__btn {
|
||||||
background: #fbfbfb;
|
background: #fbfbfb;
|
||||||
border: 2px solid #e5e5e5;
|
border: 1px solid #e5e5e5;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__btn.selected {
|
&__btn.selected {
|
||||||
border: 2px solid #00a8ee;
|
border-color: #00a8ee;
|
||||||
width: 149px;
|
width: 149px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,7 +54,7 @@
|
|||||||
&__input {
|
&__input {
|
||||||
@include H4;
|
@include H4;
|
||||||
|
|
||||||
border: 2px solid $Grey-200;
|
border: 1px solid $Grey-200;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: $Grey-800;
|
color: $Grey-800;
|
||||||
padding: 0.875rem 1rem;
|
padding: 0.875rem 1rem;
|
||||||
@ -230,7 +230,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border-width: 2px;
|
border-width: 1px;
|
||||||
background: $primary-blue;
|
background: $primary-blue;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -72,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--selected {
|
&--selected {
|
||||||
border: 2px solid $malibu-blue !important;
|
border: 1px solid $malibu-blue !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
|
@ -83,7 +83,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 2px solid $Blue-500;
|
border: 1px solid $Blue-500;
|
||||||
width: 101%;
|
width: 101%;
|
||||||
padding-right: 11px;
|
padding-right: 11px;
|
||||||
padding-left: 19.5px;
|
padding-left: 19.5px;
|
||||||
|
Loading…
Reference in New Issue
Block a user