Menu layout update
This commit is contained in:
parent
85d45fe6eb
commit
e2a0ca2cbf
|
@ -130,6 +130,7 @@
|
|||
|
||||
<style lang="scss">
|
||||
@import "~node_modules/normalize.css/normalize";
|
||||
@import "~styles/animations";
|
||||
@import "~styles/fonts";
|
||||
@import "~styles/buttons";
|
||||
@import "~styles/colors";
|
||||
|
@ -186,6 +187,7 @@
|
|||
|
||||
a {
|
||||
color: $text-color-base;
|
||||
transition: color 150ms $easeInOutQuint;
|
||||
|
||||
&:hover {
|
||||
color: $text-color-special;
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
v-for="lang of languages"
|
||||
type="button"
|
||||
@click="changeLanguage(lang.locale)">
|
||||
<img :src="lang.icon" width="25" height="25" :alt="lang.locale" />
|
||||
<img :src="lang.icon" :width="buttonSize" :height="buttonSize" :alt="lang.locale" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -29,6 +29,12 @@
|
|||
languages: { type: Array, default: () => [] }
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
buttonSize: 20
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeLanguage (locale) {
|
||||
this.$i18n.locale = locale
|
||||
|
@ -39,6 +45,7 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~styles/animations";
|
||||
@import "~styles/colors";
|
||||
@import "~styles/layout";
|
||||
|
||||
|
@ -73,11 +80,23 @@
|
|||
justify-content: space-around;
|
||||
|
||||
button {
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: $base-gap;
|
||||
margin-right: 5px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: scale(1);
|
||||
transition:
|
||||
transform 150ms $easeInOutQuint,
|
||||
background 150ms $easeInOutQuint;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
1
src/styles/animations.scss
Normal file
1
src/styles/animations.scss
Normal file
|
@ -0,0 +1 @@
|
|||
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
|
Loading…
Reference in a new issue