Button - Unable to change icon and text size
Posted: 27 Aug 2019, 09:05
Hi..
I'm currently setting up a menu-click button:
And I can style the button to the ".p-button" class style, but for some odd reason I can't style the icon or text.
My Vue file template is:
My SCSS file is:
I have tried the old angular trick of "\deep\" and "ng-deep", but it just won't budge..
Is there any specific thing that I am not doing to in styling the icon and text??
I'm currently setting up a menu-click button:
And I can style the button to the ".p-button" class style, but for some odd reason I can't style the icon or text.
My Vue file template is:
Code: Select all
<template>
<nav>
<!-- TOP Half-->
<div class="top-half">
<!-- HAM Menu -->
<div class="ham-menu">
<Button label="MENU" icon="pi pi-bars" iconPos="top" />
</div>
<!-- Logo -->
<div></div>
<!-- Middle -->
<div></div>
<!-- Side -->
<div></div>
</div>
<!-- Bottom Half-->
<div class="btm-half">
<router-link to="/">
Home
<div class="bottom-bar"></div>
</router-link> |
<router-link to="/about">
About
<div class="bottom-bar"></div>
</router-link>
</div>
</nav>
</template>
<script lang="ts" src="./TopNav.vue.ts" />
<style lang="scss" src="./TopNav.vue.scss" scoped />
Code: Select all
nav {
> .top-half {
flex: auto;
> .ham-menu {
height: 100%;
margin: auto;
display: inline-flex;
> .p-button {
padding: 10px;
background-color: transparent;
border-color: transparent;
margin: auto;
display: inline-block;
.pi {
font-size: 3.0em !important;
}
.p-button-text {
font-size: xx-small !important;
}
}
}
}
> .btm-half {
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 60px;
padding: 0 45px;
background-color: #333333;
a {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
min-width: 80px;
padding: 10px;
font-weight: bold;
color: rgb(255, 255, 255);
transition-property: background-color, border-color;
transition-duration: 0.5s;
transition-timing-function: ease;
> .bottom-bar {
position: absolute;
bottom: 0;
height: 6px;
left: 0;
right: 0;
background-color: rgb(67, 149, 57);
opacity: 0;
transition: opacity 0.25s ease;
}
&.router-link-exact-active,
&:hover {
background-color: rgba(67, 149, 57, 0.4);
> .bottom-bar {
opacity: 1;
}
}
}
}
}
Is there any specific thing that I am not doing to in styling the icon and text??