Prime Community Forum

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:

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 />

My SCSS file is:

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;
                }
            }
        }
    }
}

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??

Posted: **27 Aug 2019, 09:25**

GAH!!

OK -- so I figured it out after posting (as per what usually happens)..

So I'll just answer my own question - which should help anyone else that comes across this issue..

The first issue is that I was using a scoped style in my Vue file, which in turn doesn't allow you to style children components.
The second issue is that I was using \deep\ instead of /deep/..

SO I'll post the correction part of my SCSS file (and just notice the /deep/ section):

Code: Select all

nav {
    > .top-half {

        > .ham-menu {

            > .p-button {
            
                &:focus {
                    outline: none;
                    box-shadow: none;
                }

                &:hover { }

                /deep/ .pi {
                    font-size: 3.0em !important;
                }

                /deep/ .p-button-text {
                    font-size: xx-small !important;
                }
            }
        }
    }
    
    ...

}

And yes the !importants are not important..

Prime Community Forum

Button - Unable to change icon and text size

Button - Unable to change icon and text size

Re: Button - Unable to change icon and text size