CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
Fawar
Fawar

Reputation: 735

CSS of Tabs in a TabPanel

I have been messing for the past 2 hours to find how to change the color of the icons and their respective 'label'.

I want to set it to white,

I tried to find a SCSS variable, could not. I tried to add a css class by various way, none worked.

Would someone have a working exemple ?

enter image description here

Upvotes: 2

Views: 8935

Answers (1)

Viswa
Viswa

Reputation: 3211

Following css will do the trick

CSS

    .x-tabbar-dark .x-tab {
        color: #FFFFFF;
    }

    // Here change the style of active tab if you need to
    .x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon {
        background-image: none;
        background-color: #FFFFFF;
    }

    .x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon  {
        background-image: none;
        background-color: #FFFFFF;  
    }

UPDATE

app.scss

// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// Custom code goes here..

// Examples of using the icon mixin:
// @include icon('user');

.x-tabbar-dark .x-tab {
    color: #FFFFFF;
 }

 .x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon {
     background-image: none;
     background-color: #FFFFFF;
}

 .x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon  {
     background-image: none;
     background-color: #FFFFFF;  
}

Index.html

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>moneyManager</title>
    <style type="text/css">
         /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #1985D0
        }

        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }

        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            display: inline-block;
            height: 30px;
            -webkit-border-radius: 15px;
            margin: 0 5px;
            width: 30px;
            opacity: 0.8;
        }

        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.8
            }
            50% {
                opacity: 0
            }
            100% {
                opacity: 0.8
            }
        }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Upvotes: 2

Related Questions