r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Extracts tabs into reusable CSS

Browse source
This commit is contained in:
Andrew Nicolaou 2019-05-23 13:02:52 +02:00 committed by Cassie Tarakajian
parent 067adb0052
commit 2854aa9235
6 changed files with 76 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/modules/IDE/components/Preferences.jsx
View file

@ -59,9 +59,9 @@ class Preferences extends React.Component {
</Helmet>
<Tabs>
<TabList>
<div className="preference__subheadings">
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
<div className="tabs__titles">
<Tab><h4 className="tabs__title">General Settings</h4></Tab>
<Tab><h4 className="tabs__title">Accessibility</h4></Tab>
</div>
</TabList>
<TabPanel>

6
client/modules/User/pages/AccountView.jsx
View file

@ -53,9 +53,9 @@ class AccountView extends React.Component {
<h2 className="form-container__title">My Account</h2>
<Tabs className="account__tabs">
<TabList>
<div className="preference__subheadings">
<Tab><h4 className="preference__subheading">Account</h4></Tab>
<Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
<div className="tabs__titles">
<Tab><h4 className="tabs__title">Account</h4></Tab>
<Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
</div>
</TabList>
<TabPanel>

1
client/styles/components/_account.scss
View file

@ -1,5 +1,4 @@
.account__tabs {
width: 500px;
padding-top: #{20 / $base-font-size}rem;
}

51
client/styles/components/_preferences.scss
View file

@ -60,15 +60,6 @@
text-align: left;
}
.preference__subheadings {
display: flex;
flex-wrap: wrap;
padding-bottom: #{0.1 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}
}
.preference {
display: flex;
flex-wrap: wrap;
@ -129,48 +120,6 @@
width: #{44 / $base-font-size}rem;
}
.react-tabs__tab--selected {
@include themify() {
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
.react-tabs__tab--selected .preference__subheading {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.react-tabs__tab {
text-align: center;
color: black;
display: flex;
align-items: center;
border-bottom: #{4 / $base-font-size}rem solid transparent;
& + & {
margin-left: #{45 / $base-font-size}rem;
}
}
.preference__subheading {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}
.preference__vertical-list {
display: flex;
flex-direction: column;

69
client/styles/components/_tabs.scss Normal file
View file

@ -0,0 +1,69 @@
.tabs__titles {
display: flex;
flex-wrap: wrap;
padding-bottom: #{0.1 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}
}
.tabs__title {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}
.react-tabs__tab--selected {
@include themify() {
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
.react-tabs__tab--selected .tabs__title {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.react-tabs__tab {
text-align: center;
color: black;
display: flex;
align-items: center;
border-bottom: #{4 / $base-font-size}rem solid transparent;
& + & {
margin-left: #{45 / $base-font-size}rem;
}
}
.tabs__title {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}

1
client/styles/main.scss
View file

@ -45,6 +45,7 @@
@import 'components/feedback';
@import 'components/loader';
@import 'components/uploader';
@import 'components/tabs';
@import 'layout/ide';
@import 'layout/fullscreen';