"#angular2-material/toolbar": "2.0.0-alpha.6-2"
I want to change the background opacity and padding of the <md-toolbar> for my entire application.
My application is importing from index.html:
#import "default-theme";
#import 'variables';
#import 'overlay';
#import 'live-announcer';
I am using the Material 2 My thinking is that I need to somehow override these settings within the Material 2 toolbar.scss file (excerpted below):
md-toolbar {
...
padding: 0 $md-toolbar-padding;
...
background: md-color($md-background, app-bar);
}
I've dug into the toolbar.js file within the vendor folder and it appears to embed the entire toolbar.css... therefore it seems that the only place that I have the opportunity to override either of these style properties is within any of my components that use MdToolbar via my components' stylesUrls... (btw: this does work)
I'm guessing that I've missed something, because what I want to do seems like it would be a fairly common desire (although may it would be anathema to using Google Material --- I'm not certain how staunch the community is about elements such as padding, background transparency, and the like)... in either case my ignorance needs to be lifted in order to proceed with confidence.
Related
I'm trying to get my app to look and behave similar to the Angular Material website: https://material.angular.io/components/categories
I've cloned https://github.com/angular/material.angular.io and run it locally, but I'm struggling with finding out the correct styles I need to apply to which elements (and I don't want to just copy everything from that project, I'd rather learn how to achieve what I want so I can apply it then to some other projects as well). I've inspected the elements and styles using the Chrome dev tools, but I was unable to reproduce it all in my Stackblitz example below:
I've started a project on Stackblitz by simply cloning the Sidenav example and adding my own primary toolbar:
https://stackblitz.com/edit/material-angular-io-behavior?file=app%2Fsidenav-overview-example.html
My main goals:
Contents scrollbar should not cover primary toolbar on wide screens, but is allowed to do so on smaller screens
Keep primary and secondary toolbars "connected" when resizing (width smaller than 600px)
For wide screens:
Fixed Sidenav (in a box)
Narrow scrollbar for sidenav contents
Is it recommended to use flexbox to layout the whole app? And is it possible to place the scrollbars as intended using flexbox?
UPDATE:
final version:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
Resources that helped me getting there:
Introduction to CSS
Learn CSS Variables for free
Learn Flexbox for free
Learn CSS Grid for free
angular/flex-layout
Okay, I tried to reproduce the navbar similar to the website of Angular Material, StackBlitz HERE.
The contents of the page are separated from the primary toolbar and the sidenav.
The vertical scroll of the page is different from the side menu and does not impact the primary toolbar.
The content of the page is done through the .
And all that was done with Flex-Layout.
I hope this will help you.
DEMO:
With relation to your code on stackblitz, you can add below code in your current CSS :
#media (max-width: 600px) {
.main-mat-toolbar {
position: static !important;
}
.example-container {
position: static !important;
}
}
You can read more about #media queris in CSS at Using media queries
I am trying to move over from Bootstrap to Zurb Foundation.
Bootstrap uses *-color for text colour and *-bg for background colours.
I'm a little confused with Foundation's naming scheme:
What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?
Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.
Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
#if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).
I have a SASS built site, and I'd like to create a second color option for that site keeping the SASS code as DRY as possible.
One thought I had that partly works (and is here for clarity sake) is the following:
// regular theme (black)
#import "settings";
#import "styles";
// white theme
.white {
#import "white_settings";
#import "styles";
}
The above works for simple _styles.scss files, but when I try to use the same approach with Foundation #import "foundation", it only wraps some of the styles that in included in Foundation.
So my question is, is there any way to extend the styles I already have with a wrapping class (that would be set on the body tag) that would allow me to easily switch the color theme of the site without repeating the entire collection of SASS rules?
Optimal solution would also not repeat non-changed CSS properties like margin and padding, and only change the colors (which would be the only portion that would be different, and those are set in the settings).
Foundation has all of its styles wrapped in a mixin that prevents repeating it (ie. import once). This prevents you from reusing the code with different colors or other settings. Looking over the source of the mixin in question, you should be able to trick it into thinking the "module" hasn't been imported like this:
// the modules we want to import haven't been imported yet
$temp-modules: $modules;
.one {
// do some one specific stuff here
#import "styles";
}
// set $modules back to the state it was in before we did our import
$modules: $temp-modules;
.two {
// do some two specific stuff here
#import "styles";
}
// repeat as necessary
I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
I am using compass on my site, and have created a style such as:
#include background-image(linear-gradient(top, #C9C9C9, #FFF));
The problem is, this doesn't incluse a solid-color fallback for older IEs. Do I simply have to include a line like
background-color: #c9c9c9;
Or is there a way to have Compass handle this automatically for me?
As far as I know there is no way in Compass to have the background color automatically computed from a background-image declaration, because of the way it is built : you could have several gradients in there, and Compass can't really know which of all those colors is supposed to be the base one.
One way I advice is to create a gradient-wrapper like the following :
=gradient-horizontal($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-color: mix($startColor, $endColor) // Second possibility
+filter-gradient($startColor, $endColor, horizontal)
+background-image(linear-gradient(left, $startColor, $endColor))