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

Styling y boton de volver en noroute

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-03 23:14:38 -04:00
parent 386fe99711
commit fe35a503df
2 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.jsx
View File

@@ -16,11 +16,14 @@ const Main = (props) => (
</Fragment> </Fragment>
) )
const NoRoute = () => ( const NoRoute = (props) => {
return (
<div> <div>
<h1>Esa pagina no existe</h1> <h1>Esa pagina no existe</h1>
<button className='link' onClick={() => props.history.goBack()}>Volver</button>
</div> </div>
) );
}
const App = () => ( const App = () => (
<main> <main>

42
src/styles/main.css
View File

@@ -1,9 +1,11 @@
:root { :root {
--light-gray: hsl(0, 0%, 95%); --white: hsl(0, 0%, 99%);
--gray: hsl(0, 0%, 85%); --gray-1: hsl(0, 0%, 95%);
--dark-gray: hsl(0, 0%, 30%); --gray-2: hsl(0, 0%, 85%);
--gray-3: hsl(0, 0%, 30%);
--black: hsl(0, 0%, 20%); --black: hsl(0, 0%, 20%);
--emerald: hsl(138, 70%, 60%);
--red: hsl(354, 81%, 56%);
} }
body { body {
@@ -15,19 +17,31 @@ body {
} }
input { input {
border: 1px var(--gray) solid; border: 1px var(--gray-2) solid;
padding: .3em; padding: .3em;
} }
button { button {
border: 1px var(--gray) solid; border: 1px var(--gray-2) solid;
} }
a { button.link {
color: var(--emerald); display: inline;
border: none;
background-color: inherit;
padding: 0;
cursor: pointer;
}
a, button.link {
color: var(--red);
text-decoration: none; text-decoration: none;
} }
a:hover, button.link:hover {
text-decoration: underline;
}
.nav { .nav {
display: flex; display: flex;
min-height: 3.25em; min-height: 3.25em;
@@ -51,7 +65,7 @@ ul.pagination {
} }
.page-item { .page-item {
border: 1px solid var(--gray); border: 1px solid var(--gray-2);
} }
.page-link { .page-link {
@@ -61,8 +75,9 @@ ul.pagination {
} }
.page-item.active { .page-item.active {
background-color: var(--emerald); background-color: var(--red);
} }
.page-item.active a { .page-item.active a {
color: white; color: white;
} }
@@ -84,7 +99,6 @@ ul.pagination {
background: white; background: white;
} }
ul.entity_list { ul.entity_list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -93,7 +107,7 @@ ul.entity_list {
li.entity { li.entity {
height: 4em; height: 4em;
border: 1px var(--gray) solid; border: 1px var(--gray-2) solid;
} }
li.entity:not(:first-child) { li.entity:not(:first-child) {
@@ -101,7 +115,7 @@ li.entity:not(:first-child) {
} }
li.entity:hover { li.entity:hover {
background-color: var(--light-gray) background-color: var(--gray-1)
} }
li.entity a { li.entity a {
@@ -118,6 +132,6 @@ li.entity a {
li.entity a .small { li.entity a .small {
font-size: .8em; font-size: .8em;
color: var(--dark-gray); color: var(--gray-3);
} }