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

Aprovechando scss para simplificar el codigo

Browse Source 
Aprovecho que se pueden poner selectores dentro de selectores para
transformarlos en una especie de arbol de propiedades css :3

Es para lo unico que uso scss XD
This commit is contained in:
Daniel Cortes
2020-06-04 21:36:49 -04:00
parent b5e0d85b3b
commit bfbf488f77
1 changed files with 76 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/styles/main.scss
View File

@@ -1,4 +1,4 @@
/*Colorscheme*/ /* Colorscheme */
:root { :root {
--white: hsl(0, 0%, 99%); --white: hsl(0, 0%, 99%);
--gray-1: hsl(0, 0%, 95%); --gray-1: hsl(0, 0%, 95%);
@@ -10,11 +10,10 @@
--accent: hsl(354, 81%, 56%); --accent: hsl(354, 81%, 56%);
} }
/* Modificación básica de elementos*/
/*Modificacion basica de elementos*/
body { body {
max-width: 75rem; max-width: 75rem;
margin: 0 auto ; margin: 0 auto;
padding: 0 1rem 1em 1em; padding: 0 1rem 1em 1em;
font-family: sans-serif; font-family: sans-serif;
color: var(--black); color: var(--black);
@@ -28,23 +27,23 @@ input {
button { button {
border: 1px var(--gray-2) solid; border: 1px var(--gray-2) solid;
}
button.link { &.link {
display: inline; display: inline;
border: none; border: none;
background-color: inherit; background-color: inherit;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
}
} }
a, button.link { a, button.link {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;
}
a:hover, button.link:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@@ -52,78 +51,71 @@ h1, h2, h3, h4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
img { /* Navbar */
}
/*Navbar*/
.nav { .nav {
display: flex; display: flex;
min-height: 3.25rem; min-height: 3.25rem;
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
.nav .branding { .branding {
margin: 0; margin: 0;
} }
.nav-links { .nav-links {
display: flex; display: flex;
}
.nav-links .link { .link {
margin-left: 1rem; margin-left: 1rem;
}
}
} }
/*Pagination*/ /* Pagination */
ul.pagination { ul.pagination {
display: flex; display: flex;
margin: 1rem auto; margin: 1rem auto;
justify-content: center; justify-content: center;
}
.page-item { .page-item {
border: 1px solid var(--gray-2); border: 1px solid var(--gray-2);
}
.page-link { &.active {
background-color: var(--accent);
a {
color: white;
}
}
}
.page-link {
color: var(--black); color: var(--black);
text-decoration: none; text-decoration: none;
padding: 0 1rem; padding: 0 1rem;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.page-link {
padding: 0 .4rem; padding: 0 .4rem;
} }
}
} }
.page-item.active { /* Input with icon */
background-color: var(--accent);
}
.page-item.active a {
color: white;
}
/*Input with icon*/
.input-with-icon { .input-with-icon {
display: flex; display: flex;
}
.input-with-icon input { input {
border-right: none; border-right: none;
} }
.input-with-icon button { button {
border-left: none; border-left: none;
background: white; background: white;
}
} }
/* Lista de entidades */
/*Lista de entidades*/
ul.entity_list { ul.entity_list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -200,30 +192,29 @@ ul.entity_list {
} }
} }
/* Tabs */ /* Tabs */
ul.tabs { ul.tabs {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border-bottom: 2px var(--gray-1) solid; border-bottom: 2px var(--gray-1) solid;
margin: 1rem 0; margin: 1rem 0;
}
ul.tabs li.tab { li.tab {
padding: .5rem 1rem; padding: .5rem 1rem;
margin-bottom: -2px; margin-bottom: -2px;
cursor: pointer; cursor: pointer;
}
ul.tabs li.tab:hover { &:hover {
border-bottom: 2px var(--gray-2) solid; border-bottom: 2px var(--gray-2) solid;
} }
ul.tabs li.tab.selected { &.selected {
border-bottom: 2px var(--accent) solid; border-bottom: 2px var(--accent) solid;
}
}
} }
/*Utils*/ /* Utils */
.full-width { .full-width {
width: 100%; width: 100%;
} }
@@ -232,9 +223,13 @@ ul.tabs li.tab.selected {
animation: pulsating 1s infinite alternate ease-in-out; animation: pulsating 1s infinite alternate ease-in-out;
@keyframes pulsating { @keyframes pulsating {
from { background-color: var(--white);} from {
background-color: var(--white);
}
to { background-color: var(--gray-2);} to {
background-color: var(--gray-2);
}
} }
} }