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 ?
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>
Related
I'm trying to update a antd component style.
I'm using this: https://pro.ant.design/docs/style#override-the-component-style as reference to try updating a component styling but I can't make it to work.
Here's something I'm trying: https://codesandbox.io/s/cool-wind-kkub0?file=/index.less
I don't understand what I am missing. Any suggestions?
You are using scoped styling which is achieved by ejecting your app or installing npm package for loading styled component styles. For this to work, paste your .less code in your index.css file
index.css
.ant-select-selection {
max-height: 51px;
overflow: auto;
background-color: blue;
}
.ant-select-selection-search-input {
background-color: green;
}
.ant-select-item-option-content {
background-color: orange;
}
.ant-select-item {
position: relative;
display: block;
min-height: 32px;
padding: 5px 12px;
color: red;
font-weight: normal;
font-size: 14px;
line-height: 22px;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
background-color: #9068b0;
}
Working on a css grid challenge with React in codepen.
This is the original codepen: https://codepen.io/tallys/pen/bvwZee/
What I have so far: https://codepen.io/al2613/pen/QmOyKo
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
padding: 10px;
grid-template-columns: auto auto;
height: 100vh;
grid-gap: 30px;
}
So I got main content area to span across the grid container. However, I'm stuck as to how I can make the aside always 150px and the grid container align nicely with the div at the top?
I'm new to grid very nice first try. I think this is a little bit hacky, but...it does the job (I guess)
I don't think the CSS on this snippet will work, but nevertheless, here's the Pen...
//Don't edit the JS for the CSS Grid challenge!
class App extends React.Component {
state = {
sidebarActive: false,
}
toggleSidebar() {
this.setState({sidebarActive: !this.state.sidebarActive})
}
render() {
const buttonText = this.state.sidebarActive ? 'Toggle Sidebar Off' : 'Toggle Sidebar On';
const {sidebarActive} = this.state
return (
<div>
<h1 className="heading">CSS Grid when some sections don't render!</h1>
<div className="instructions">
<p>The challenge: Fix the CSS Grid so that the main area takes up all of the available space when the sidebar react component does not render. </p>
<button onClick={this.toggleSidebar.bind(this)}>{buttonText}</button>
</div>
<div className="grid-container">
{sidebarActive && <aside className="sidebar">Sometimes renders!</aside>}
<main className="main">Main content area that should always take up the rest of the space in the container. </main>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
// Variables
$brand-color: darkblue;
$brand-section-color: white;
$brand-text-color: #222;
$react-accent: #61dafb;
$react-background: #292c34;
$breakpoint: 768px;
$font-heading: 'Permanent Marker', sans-serif;
$font-default: 'Oswald', sans-serif;
// Styles
body {
font-family: $font-default;
margin: 10vh 10vw;
color: $react-accent;
background: $react-background;
}
.heading {
font-family: $font-heading;
}
.instructions {
padding: 5px 12px 20px 12px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background: lighten(adjust-hue($react-background, 30), 7);
font-size: 1.15rem;
button {
border: none;
background: $react-accent;
font-family: $font-default;
padding: 20px;
border-radius: 0;
cursor: pointer;
transition: .4s ease;
&:hover, &:active, &:focus {
background: adjust-hue($react-accent, 210);
}
}
}
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
grid-template-columns: 150px repeat(1, 1fr);
height: 100vh;
width: 100%;
grid-gap: 30px;
}
.sidebar {
background: lighten($react-background, 7);
padding: 10px;
& ~ .main{
grid-column: auto !important;
}
}
.main {
background: darken($react-background, 7);
display: grid;
grid-column: span 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="app"></main>
I know it's a really late response, but I remembered this challenge... and I couldn't resist.
My approach is fixing the main to the second column, while setting the sidebar width on the item itself (and a margin-right to fake the grid-gap), allowing for the first column to be declared as minmax(0, auto).
.grid-container {
grid-template-columns: minmax(0, auto) 1fr;
/*grid-gap: 30px;*/
}
.main {
grid-column: 2;
}
.sidebar {
margin-right: 30px;
width: 150px;
}
https://codepen.io/facundocorradini/pen/eKgVzP
That way the first column will have a zero width if the sidebar is not loaded, and get to the 150px sidebar with when it loads.
I am so sorry if this has been answered, but I've looked at tens of threads for over an hour and nothing seems to be addressing my issue.
I'm working on a project for school. The instruction I'm stuck on states: Code a media query for the screen type that checks that the viewport width is 959 pixels or less. Within this media query, reduce the font size for the h1 element in the section to 135%, and reduce the font size for the h2 elements in the section and the aside to 120%.
So, I have coded a media query that does just this, as you can see toward the bottom of my code. I noted that the syntax highlighting doesn't apply in Notepad++ because media queries aren't recognized (that one I did figure out on a thread!) But that same thread stated that the media query would still work in my browser, and that is the issue. It is not working. When I look at it with developer tools in Chrome, my formatting for my media query is actually being overridden by my original styling. I've changed the order of my meta tag in the head on my HTML, and I've moved the query to the top and bottom of my CSS. Nothing is working. I am hoping someone can tell me what the issue is??? Please!
/* styles for 960px and above */
/* the styles for the elements */
* {
margin: 0;
padding; 0;
}
html{
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 960px;
margin: 0 auto;
border: 3px solid #931420;
background-color: #fffded;
}
/* the styles for the header */
header {
border-bottom: 3px solid #931420;
padding: 1.5em 0em 2em 0em;
background-image:
-webkit-linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
background-image:
linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
}
header img {
float: left;
padding: 0 3.75%;
}
header h2{
font-size: 170%;
color: #800000;
}
header h3{
font-size: 130%;
font-style: italic;
}
.shadow {
text-shadow: 1px -1px 2px #800000;
}
/* the styles for the navigation menu format */
#nav_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul li{
float: left;
width: 20%;
}
#nav_menu a {
display: block;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #800000;
color: white;
font-weight: bold;
text-decoration: none;
}
.current{
color: yellow;
}
/* the styles for the navigation menu operation */
#nav_menu ul ul{
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after {
content: "";
display: block;
clear: both;
}
#nav_menu ul ul li{
float: none;
width: 192px;
}
/* the styles for the section */
section{
width: 65.625%;
float: right;
padding: 0 2.5% 2.5% 2.5%;
}
aside {
float: right;
width: 26.875%;
padding: 0 0 20px 2.5%;
}
aside h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
aside h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
aside img{
padding: .5em 0 1em 0;
}
aside a:focus{
font-style: italic;
}
aside a:hover{
font-style: italic;
}
main {
clear: left;
padding: 0;
}
section h1{
font-size: 150%;
padding: .5em 0 .25em 0;
margin: 0;
}
article{
padding: .5em 0 .5em 0;
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
article img{
float: right;
border: 1px solid black;
margin: 0 0 2.5em 1em;
}
section h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
section h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
section a:focus{
font-style: italic;
}
section a:hover{
font-style: italic;
}
section p{
padding: 0 0 .5em 0;
}
section blockquote{
padding: 0 2em;
font-style: italic;
}
section ul{
padding: 0 0 .25em 1.25em;
}
section li{
padding: 0 0 .35em 0;
}
/* the styles for the footer */
footer{
padding: 0;
margin: 0;
clear: both;
}
footer p{
text-align: center;
background-color: #931420;
color: white;
padding-top: 1em;
padding-bottom: 1em;
}
/* styles for 959px or less */
#media only screen and (max-width: 959px;){
body section h1{
font-size: 130%;
}
body section h2, aside h2{
font-size: 120%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall Logo" height="80">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Celebrating our <em class="shadow">75<sup>th</sup></em> Year</h3>
</header>
<nav id="nav_menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul>
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
</nav>
<main>
<section>
<h2>Our Mission</h2>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
<h1>Speaker of the Month</h1>
<article>
<h2>Fossil Threads in the Web of Life</h2>
<br><img src="images\sampson_dinosaur.jpg" alt="Sampson Dinosaur" max-width="40%" min-width="150px">
<h3>February 15, 2012<br>
Scott Sampson</h3>
<br>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.
<br>
Read more. <b>Or meet us there!<b></p>
</article>
<h2>Our Ticket Packages</h2>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section>
<aside>
<h2>Guest speakers</h2>
<h3>October</h3>
Jeffrey Toobin<br>
<img src="images/toobin75.jpg" alt="Jeffrey Toobin" height="75">
<h3>November</h3>
Andrew Ross Sorkin<br>
<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin" height="75">
<h3>January</h3>
Amy Chua<br>
<img src="images/chua75.jpg" alt="Amy Chua" height="75">
<h3>February</h3>
<a href="speakers\sampson.html">Scott Sampson<a/><br>
<img src="images/sampson75.jpg" alt="Scott Sampson" height="75">
</aside>
</main>
<footer>
<p>© 2015, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
You have a semicolon here
#media only screen and (max-width: 959px;){
Remove it and it will behave as expected. I don't know Notepad++'s settings, but I recommend getting an editor that highlights minor issues like this. Or just use something like jsfiddle.
There are also numerous issues throughout your HTML and CSS, like unclosed tags, using b instead of strong, your CSS for *'s padding is using a semicolon instead of a colon.
I am having a requirement of minimizing and maximizing the uib-modal, please suggest me ways to do so.
I did not find any way to do so, so I created my own js and css to give a feel like minmize and maximize, I have used jquery for this.
SCRIPT
$("body").on("click", ".toggle-popup", function () {
$(".modal-backdrop").hide();
$(this).closest(".modal").toggleClass("minimize");
$(this).find("i").addClass("fa-window-maximize");
$(this).find("i").removeClass("fa-window-minimize");
$("body").removeClass("modal-open");
})
$("body").on("click", ".minimize .toggle-popup", function () {
$(".modal-backdrop").show();
$(this).find("i").removeClass("fa-window-maximize");
$(this).find("i").addClass("fa-window-minimize");
$("body").addClass("modal-open");
})
CSS
<style type="text/css">
.modal.minimize{
position: fixed;
top: auto;
right: auto;
bottom: 10px;
left: 10px;
}
.modal.minimize .modal-body, .modal.minimize .modal-footer{
display: none;
}
.modal.minimize .modal-dialog{
margin: 0;
width: 200px;
}
.modal.minimize .modal-dialog .modal-header{
padding: 5px;
background-color: #EEE;
}
.modal.minimize .modal-dialog .modal-header h3{
font-size: 16px;
}
</style>
I'm trying to get bootstrap divs to be full body length.
This is what I've tried so far: http://jsfiddle.net/bKsad/315/
html, body {
min-height: 100%
}
.wrap {
height: 100%
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
min-height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
As the right column grows longer, I want the sidebar to do the same.
The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
<div class="col-md-9 col-md-offset-3 content">
Main Content
</div>
</div>
</div>
Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and #media breakpoints handle the overall layout pretty well:
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
Working solution: http://www.bootply.com/111837
If you use "col-sm-x" or "col-lg-x" you just change the #media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.
I solved this by using an absolutely positioned div and a bit of jQuery. I have a Bootstrap navbar with a fixed height of 50px, so that is why you're seeing the 50's in the code. You can remove this if you don't have a top navbar.
This solution works dynamically with any height.
The CSS:
.sidebar {
background-color: #333333;
position: absolute;
min-height: calc(100% - 50px);
}
The jQuery:
var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();
if (document_height > sidebar_height) {
sidebar.css('height', document_height - 50);
}
The neat thing about this is there will be no flickering of the background because its using CSS to adjust the min-height, so that the jQuery resizing that normally causes a flickering of the background will be hidden on page load.
approach 1: added empty div with style="clear:both" at the end of wrap div.
http://jsfiddle.net/34Fc5/1/
approch 2: http://jsfiddle.net/34Fc5/ :
html, body {
height: 100%;
}
.wrap {
height: 100%;
overflow: hidden;
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
added "overflow: hidden;" to .wrap
changed height: 100% to html, body
changed height: 100% to .sidebar
using css way, the height of the sidebar will only match the view port of the browser. so if you look at approach 1, when you scroll you will notice the background stop at viewport. to fix it js is required.
The only thing that got it working for me (after many hours of trying everything) was
HTML
<nav class="col-sm-3 sidebar">
CSS
padding-bottom: 100%;
The padding in percent did it for me. Now it goes all the way to the bottom of the page.