Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Move input styling into a global scoped file.

Browse source
This commit is contained in:
Tyler-A 2020-07-30 21:37:31 -06:00
parent ece839e276
commit 2206a46453
2 changed files with 54 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/ControlBar.vue
View file

@ -122,40 +122,15 @@ export default {
color: var(--error); color: var(--error);
text-align: center; text-align: center;
border-width: 2px; border-width: 2px;
padding: 15px; padding: 10px;
width: 100%; height: 25px;
width: 90%;
} }
select { @media only screen and (min-width: 768px) {
background-color: var(--input-background); #control {
border-radius: var(--corner-rounding); flex-direction: row;
border-color: transparent; flex-wrap: wrap;
font-family: var(--fonts);
color: var(--input-text);
border-style: solid;
border-width: 2px;
outline: none;
padding: 15px;
border: none;
} }
select:hover { cursor: pointer; }
select:active, select:focus {
border-color: var(--input-active-border);
}
input[type=number] {
background-color: var(--input-background);
border-radius: var(--corner-rounding);
font-family: var(--fonts);
border-color: transparent;
color: var(--input-text);
border-style: solid;
border-width: 2px;
outline: none;
padding: 15px;
width: 100px;
}
input[type=number]:focus {
border-color: var(--input-active-border);
} }
</style> </style>

46
src/css/inputs.css Normal file
View file

@ -0,0 +1,46 @@
button {
background-color: var(--button-background);
color: var(--button-text);
font-family: var(--fonts);
border-radius: 50px;
padding: 10px 20px;
border-style: none;
font-size: larger;
outline: none;
}
button:hover { cursor: pointer; }
input[type=number] {
background-color: var(--input-background);
border-radius: var(--corner-rounding);
font-family: var(--fonts);
border-color: transparent;
color: var(--input-text);
border-style: solid;
border-width: 2px;
outline: none;
padding: 15px;
width: 100px;
}
input[type=number]:focus {
border-color: var(--input-active-border);
}
select {
background-color: var(--input-background);
border-radius: var(--corner-rounding);
border-color: transparent;
font-family: var(--fonts);
color: var(--input-text);
border-style: solid;
border-width: 2px;
outline: none;
padding: 15px;
border: none;
}
select:hover { cursor: pointer; }
select:active, select:focus {
border-color: var(--input-active-border);
}