m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

colocate tab-bar styles with the tab-bar component (#9176)

Browse Source 
Moves styles out of the itcss components folder and places them alongside the component.
This commit is contained in:
Brad Decker 2020-08-11 08:58:10 -05:00 committed by GitHub
parent b8edc32f48
commit 6ba9e65712
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/app/index.scss
View File

@ -59,6 +59,7 @@
@import '../ui/dropdown/dropdown';
@import 'permissions-connect-header/index';
@import 'permissions-connect-footer/index';
@import 'tab-bar/index';
@import 'wallet-overview/index';
@import '../ui/account-mismatch-warning/index';
@import '../ui/icon-border/icon-border';

1
ui/app/components/app/tab-bar/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './tab-bar'

80
ui/app/components/app/tab-bar/index.scss Normal file
View File

@ -0,0 +1,80 @@
.tab-bar {
display: flex;
flex-direction: column;
justify-content: flex-start;
&__tab {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
min-width: 0;
flex: 0 0 auto;
box-sizing: border-box;
font-size: 16px;
padding: 16px 24px;
opacity: 0.5;
transition: opacity 200ms ease-in-out;
@media screen and (min-width: 576px) {
&:hover {
opacity: 0.4;
}
&:active {
opacity: 0.6;
}
}
@media screen and (max-width: 575px) {
font-size: 18px;
padding: 24px;
border-bottom: 1px solid $alto;
opacity: 1;
}
&__content {
flex: 1 1 auto;
width: 0;
&__description {
display: none;
@media screen and (max-width: 575px) {
display: block;
font-size: 14px;
font-weight: 300;
margin-top: 8px;
min-height: 14px;
}
}
}
&__caret {
display: none;
@media screen and (max-width: 575px) {
display: block;
background-image: url('/images/caret-right.svg');
width: 36px;
height: 36px;
opacity: 0.5;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
&--active {
opacity: 1 !important;
}
}
&__grow-tab {
flex-grow: 1;
}
}

0
ui/app/components/app/tab-bar.js → ui/app/components/app/tab-bar/tab-bar.js
View File

1
ui/app/css/itcss/components/index.scss
View File

@ -14,7 +14,6 @@
// Tx List and Sections
@import './menu';
@import './gas-slider';
@import './tab-bar';
@import './simple-dropdown';
@import './request-signature';
@import './request-encryption-public-key';

79
ui/app/css/itcss/components/tab-bar.scss
View File

@ -1,79 +0,0 @@
.tab-bar {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.tab-bar__tab {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
min-width: 0;
flex: 0 0 auto;
box-sizing: border-box;
font-size: 16px;
padding: 16px 24px;
opacity: 0.5;
transition: opacity 200ms ease-in-out;
@media screen and (min-width: 576px) {
&:hover {
opacity: 0.4;
}
&:active {
opacity: 0.6;
}
}
@media screen and (max-width: 575px) {
font-size: 18px;
padding: 24px;
border-bottom: 1px solid $alto;
opacity: 1;
}
&__content {
flex: 1 1 auto;
width: 0;
&__description {
display: none;
@media screen and (max-width: 575px) {
display: block;
font-size: 14px;
font-weight: 300;
margin-top: 8px;
min-height: 14px;
}
}
}
&__caret {
display: none;
@media screen and (max-width: 575px) {
display: block;
background-image: url('/images/caret-right.svg');
width: 36px;
height: 36px;
opacity: 0.5;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
&--active {
opacity: 1 !important;
}
}
.tab-bar__grow-tab {
flex-grow: 1;
}