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 ?
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
Post a Comment