skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Estilos decentes en Tabs

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-04 02:14:47 -04:00
parent 14b528d080
commit bf81681053
3 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Search.jsx
View File

@@ -113,10 +113,10 @@ class SearchTabs extends React.Component {
render() { render() {
return ( return (
<Tabs selectedIndex={this.nameToIndex(this.props.selected)} onSelect={this.handleSelect}> <Tabs selectedIndex={this.nameToIndex(this.props.selected)} onSelect={this.handleSelect}>
<TabList> <TabList className='tabs'>
<Tab>Artistas</Tab> <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
<Tab>Discos</Tab> <Tab className='tab' selectedClassName='selected'>Discos</Tab>
<Tab>Canciones</Tab> <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
</TabList> </TabList>
<TabPanel><SearchArtists query={this.props.query} onPageChange={this.handlePageChange('artist')}/></TabPanel> <TabPanel><SearchArtists query={this.props.query} onPageChange={this.handlePageChange('artist')}/></TabPanel>
<TabPanel><p>Discos</p></TabPanel> <TabPanel><p>Discos</p></TabPanel>

1
src/index.jsx
View File

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
import {Search} from './components/Search'; import {Search} from './components/Search';
import SearchBar from "./components/SearchBar"; import SearchBar from "./components/SearchBar";
import 'react-tabs/style/react-tabs.css'
import './styles/reset.css'; import './styles/reset.css';
import './styles/main.css'; import './styles/main.css';

33
src/styles/main.css
View File

@@ -6,7 +6,7 @@
--gray-3: hsl(0, 0%, 30%); --gray-3: hsl(0, 0%, 30%);
--black: hsl(0, 0%, 20%); --black: hsl(0, 0%, 20%);
--red: hsl(354, 81%, 56%); --accent: hsl(354, 81%, 56%);
} }
@@ -17,6 +17,7 @@ body {
padding: 0 1rem; padding: 0 1rem;
font-family: sans-serif; font-family: sans-serif;
color: var(--black); color: var(--black);
overflow-y: scroll;
} }
input { input {
@@ -37,7 +38,7 @@ button.link {
} }
a, button.link { a, button.link {
color: var(--red); color: var(--accent);
text-decoration: none; text-decoration: none;
} }
@@ -46,8 +47,8 @@ a:hover, button.link:hover {
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
margin-top: .5rem; margin-top: 1rem;
margin-bottom: .2rem; margin-bottom: 1rem;
} }
/*Navbar*/ /*Navbar*/
@@ -89,7 +90,7 @@ ul.pagination {
} }
.page-item.active { .page-item.active {
background-color: var(--red); background-color: var(--accent);
} }
.page-item.active a { .page-item.active a {
@@ -148,6 +149,28 @@ li.entity a .small {
color: var(--gray-3); color: var(--gray-3);
} }
/* Tabs */
ul.tabs {
display: flex;
align-items: stretch;
border-bottom: 2px var(--gray-1) solid;
margin: 1rem 0;
}
ul.tabs li.tab {
padding: .5rem 1rem;
margin-bottom: -2px;
cursor: pointer;
}
ul.tabs li.tab:hover {
border-bottom: 2px var(--gray-2) solid;
}
ul.tabs li.tab.selected {
border-bottom: 2px var(--accent) solid;
}
/*Utils*/ /*Utils*/
.full-width { .full-width {
width: 100%; width: 100%;