extjs - CSS of Tabs in a TabPanel -


i have been messing past 2 hours find how change color of icons , respective 'label'.

i want set white,

i tried find scss variable, not. tried add css class various way, none worked.

would have working exemple ?

enter image description here

following css trick

css

    .x-tabbar-dark .x-tab {         color: #ffffff;     }      // here change style of active tab if need     .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

// following 2 lines import default sencha touch theme. if building // new theme, remove them , add own css on top of base css (which // included in app.json file). @import 'sencha-touch/default'; @import 'sencha-touch/default/all';  // custom code goes here..  // examples of using 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 initial loading indicator.          * recommended keep minimal possible provide instant feedback          * while other resources still being loaded 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>     <!-- line below must kept intact sencha command build 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> 

Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -