joshua/bl3skills.com
1
0
Fork 0
mirror of https://github.com/seigler/bl3skills.com synced 2025-07-27 09:46:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding Styling For 4th Tree and Default State

Browse source
This commit is contained in:
Anthony Jung 2020-11-17 13:06:36 -08:00
parent 303de17ff5
commit 9e66cd16f2
3 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Skill/index.css
View file

@ -3,8 +3,8 @@
flex: 0 1 auto; flex: 0 1 auto;
margin: 0.5rem; margin: 0.5rem;
padding: 0rem; padding: 0rem;
height: 2.5rem; height: 2rem;
width: 2.5rem; width: 2rem;
line-height: 1; line-height: 1;
display: flex; display: flex;
text-align: center; text-align: center;
@ -80,12 +80,13 @@
.augment, .actionSkill { .augment, .actionSkill {
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
height: 3.5em; height: 3em;
width: 3.5em; width: 3em;
} }
.augment { .augment {
background-color: var(--themeColor); background-color: var(--themeColor);
z-index: 0;
} }
.augment:first-child { .augment:first-child {
@ -111,7 +112,7 @@
mix-blend-mode: luminosity; mix-blend-mode: luminosity;
} }
.image > img { .image > img {
width: 2.3em; width: 1.8em;
opacity: 0.5; opacity: 0.5;
} }

9
src/components/VaultHunter/index.css
View file

@ -100,7 +100,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 1rem; margin: 1rem;
padding: 0 3.5rem; padding: 0 3rem;
background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor)); background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor));
background-size: 100% calc(100% - 1.5rem); background-size: 100% calc(100% - 1.5rem);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -112,11 +112,12 @@
.skills { .skills {
position: relative; position: relative;
user-select: none; user-select: none;
height: calc(3.5rem * 7) height: calc(3rem * 7)
} }
.skills:before { .skills:before {
--gradientStop: calc(var(--invested)* 0.7rem + 3.5rem + 1.65rem); /* --gradientStop: calc(var(--invested)* 0.7rem + 3.5rem + 1.65rem); */
--gradientStop: calc(var(--invested)* 0.6rem + 3rem + 1rem);
content: ''; content: '';
position: absolute; position: absolute;
top: 1.85rem; top: 1.85rem;
@ -133,7 +134,7 @@
} }
.tier { .tier {
width: calc(3.5rem * 3 + 0.5em); width: calc(3.5rem * 3);
justify-content: center; justify-content: center;
position: relative; position: relative;
} }

4
src/components/VaultHunter/index.js
View file

@ -17,7 +17,7 @@ export default class VaultHunter extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
invested: [0, 0, 0], invested: [0, 0, 0, 0],
skills: props.skills || {}, skills: props.skills || {},
}; };
} }
@ -52,7 +52,7 @@ export default class VaultHunter extends Component {
const resetSkills = () => { const resetSkills = () => {
setHash(initialSkills); setHash(initialSkills);
this.setState({ this.setState({
invested: [0, 0, 0], invested: [0, 0, 0, 0],
skills: initialSkills || {}, skills: initialSkills || {},
}); });
}; };