ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add a subtle icon style

This commit is contained in:
Ramon Wenger 2022-02-15 17:22:36 +01:00
parent 13a5ea9534
commit d1250e76a4
6 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/icons/BookmarkIcon.vue
View File

@ -24,7 +24,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "~styles/variables";
.bookmark-icon { .bookmark-icon {
width: 24px; width: 24px;

2
client/src/components/objective-groups/ObjectiveForm.vue
View File

@ -10,7 +10,7 @@
class="icon-button" class="icon-button"
@click="$emit('delete')" @click="$emit('delete')"
> >
<trash-icon class="icon-button__icon" /> <trash-icon class="icon-button__icon icon-button__icon--subtle" />
</a> </a>
</div> </div>
</template> </template>

2
client/src/components/profile/Profile.vue
View File

@ -14,7 +14,7 @@
class="profile-avatar__remove icon-button" class="profile-avatar__remove icon-button"
@click="deleteAvatar()" @click="deleteAvatar()"
> >
<trash-icon class="profile-avatar__remove-icon icon-button__icon" /> <trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
</a> </a>
</div> </div>
<avatar-upload-form <avatar-upload-form

10
client/src/styles/_buttons.scss
View File

@ -46,12 +46,16 @@
align-items: center; align-items: center;
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 0;
background: transparent;
&__icon { &__icon {
width: 25px; @include default-icon;
height: 25px;
fill: $color-silver-dark;
cursor: pointer; cursor: pointer;
justify-self: center; justify-self: center;
&--subtle {
fill: $color-silver-dark;
}
} }
} }

5
client/src/styles/_mixins.scss
View File

@ -230,3 +230,8 @@
resize: none; resize: none;
outline: 0; outline: 0;
} }
@mixin default-icon {
width: $default-icon-dimension;
height: $default-icon-dimension;
}

2
client/src/styles/_variables.scss
View File

@ -82,3 +82,5 @@ $footer-width: 800px;
$news-width: 550px; $news-width: 550px;
$screen-width: 1200px; $screen-width: 1200px;
$default-icon-dimension: 25px;