Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add styling and team suffix to name

Browse source
This commit is contained in:
Oliver-Akins 2020-12-08 17:19:03 -07:00
parent 500c3949c8
commit 17913414ae
1 changed files with 28 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/src/components/TeamRoleSelect.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div :id="`${team_name}-role-select`"> <div :id="`${team_name}-role-select`" class="team-select">
<h2 class="centre">{{ team_name }}</h2> <h2 class="centre">{{ team_name }} Team</h2>
<button <button
@click.stop="joinWriterRole" @click.stop="joinWriterRole"
> >
@ -40,7 +40,30 @@ export default {
} }
</script> </script>
<style> <style scoped>
@import "css/theme.css"; @import "../css/theme.css";
@import "css/style.css"; @import "../css/style.css";
.team-select {
background-color: var(--background2);
color: var(--background2-text);
flex-direction: column;
border-radius: 20px;
align-items: center;
padding: 0 0 10px 0;
display: flex;
margin: 5px;
width: 25%;
}
button {
background-color: var(--background3);
color: var(--background3-text);
border-radius: 50px;
outline: none;
padding: 10px;
width: 85%;
}
button:hover { background-color: var(--background3-darken); }
button:focus { background-color: var(--background3-lighten); }
</style> </style>