By default, the search label is padded to left.. i.e., padding-left: 3px is assigned by Angular-material.min.css
When I pad it to right by customizing the same in my custom.less file, it's not taken high priority over the default css from Angular-material.min.css
Load your CSS in the proper order.
HTML
<head>
<link rel="stylesheet" type="text/css" href="Angular-material.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
This is because the C in CSS stands for Cascading. This means that rules that are seen later on overwrite rules that were seen previously.
Had the same issue, see bellow for solution.
on you angular.json file, under your styles, make sure you use your custom style file as the last one
"styles":
[
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/custom-theme.scss"
],
Try adding !important to your css style property:
padding-left: 29px !important;
Related
I want to have a file just to store the colors and some other settings that I am going to use in my css styles. Because I don't want to specify the same color in different files multiple times. How can I achieve that with css modules?
For example:
setting.css
$primary-color: #785372;
$secondary-corlor: #22b390;
Button/styles.css
.button {
background: $primary-color;
display: flex;
}
From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables.
#import 'path/to/variables.scss';
If there's no Sass involved then postcss-modules-values is what your looking for:
variables.css
#value primary: #785372;
#value secondary: #22b390;
styles.css
#value primary, secondary from './path/to/variables.css';
.button {
background: primary;
display: flex;
}
EDIT:
Actually there's even more options, still through PostCSS plugins. postcss-simple-vars or postcss-custom-properties, the later having the clear advantage to stay close to the CSS specification.
They all share the same requirement though, importing the configuration file in a way or another.
You can do this with using CSS Custom Properties (here's a tutorial I've found).
In your settings.css file, do (the `:root':
:root {
--primary-color: #785372;
--secondary-corlor: #22b390;
}
Then, you can use those constants in the same, or a different file
.container {
color: var(--primary-color);
}
If you're using them in a different file, be sure to import both stylesheets, for example:
import './Button/styles.css'
import './settings.css'
Also, according to this answer, you can do this in html as well, by linking the two stylesheets:
<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">
I use following code :
<!-- build:css css/base-style.css -->
<link rel="stylesheet" href="./css/base-style.css" ng-if="someCondition">
<!-- endbuild -->
This block of code is replaced by
<link rel="stylesheet" href="css/base-style.css">
is there any way to keep ng-if in output?
I have the same problem, try this it may help you until someone find a proper solution:
$("link:eq(0)").attr('ng-if', "someCondition")
I want to allow <style> tags in the <body> that reference the body like:
<style>
body{
background-color:pink
}
</style>
Filter.ExtractStyleBlocks can be used to throw <style> into <head>, but styles on body get removed.
The ideal answer simply adds body to the existing list of allowed CSS selectors, rather than requiring a complete list of allowed CSS selectors. Or, the ideal answer may explain why this request is impossible.
I am trying to find out why my Lightbox is not showing 0.8 opacity and no close button or outer container for the image. I do get a black background and the image. I, to the best of my knowledge, followed the instructions. Here is a link to my page, http://www.crawfordcountyhistoricalsociety.org/Pages/Sale.html only the first item for sale is set for lightbox.
I am using Dreamweaver CS4 and have a template for the pages to keep the banner,background and footer the same.
Looks to me like you have the paths to your jQuery, lightbox js, img and css files incorrect. They're pointing to crawfordcountyhistoricalsociety.org/Pages/, while it looks like they're actually located at crawfordcountyhistoricalsociety.org/. Try changing your import lines in the page source from:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
To:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
(In other words add a leading slash to indicate they're at the root of your folder structure)
I'm using a "mobile first" approach on my site, and I'm utilizing SCSS.
I have 3 SCSS stylesheets:
base.scss (served to all)
medium.scss (>= 768px window)
large.scss (>= 1024px window)
They are served like this:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />
In other words, large.scss has no knowledge of the css in base.scss, yet I need to extend a class that resides in base.css, when in large.scss.
How can I do this?
I tried separating the elements I need to extend, such as the buttons, into a separate stylesheet, and then use #import 'buttons.scss'; in medium.scss, but then all the css in buttons.scss will be rendered in that sheet as well.
Are there any way to make expose classes in base.scss to the SASS "rendering engine" when compiling the css so that they can be used in medium.scss?
I had similar issue recently. My solution: mixins.
_mixins.scss
#mixin someSpacing($base: 5px;){
padding: $base;
margin: $base;
}
Remember to use underscore as prefix, sass wont compile those files. So now you can simply import _mixins.scss to your files. Additionally you can extend your mixin with parameters to give you more flexibility.
e.g.
base.scss
#import '_mixins.scss';
.classA {
#include someSpacing(3px);
}
large.scss
#import '_mixins.scss';
.anotherClass {
#include someSpacing(10px);
}
more details in sass reference:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
I needed this as well once. I asked Chris Eppstein today and he said:
extend is per output file
So yeah. #include is your only hope.
The correct approach to your task is to store all the extendable selectors in partials and import those partials into your output files.
project/partials/_extendables.sass
.foo
color: red
%bar
width: 50px
project/base.sass
#import partials/extendables
.baz
#extend .foo
project/medium.sass
#import partials/extendables
.quux
#extend %bar
Also, the approach you're using for organizing the responsiveness i heavily outdated. Unless you're forced to support some old rusty version of IE, you should use the modern approach:
A single output file.
Code organized into many small partials, grouped by page components (menu, news list, news item, etc) and by function (sticky footer technique, typography), rather than grouping it by media queries or by where elements appear on the page (e. g. all header code, all sidebar code).
Media queries should be applied granularly, in-place, using the Sass media query bubbling feature:
project/partials/components/_menu.sass
.menu
#media (max-width: 600px)
// Mobile styles for menu container
#media (min-width: 601px)
// Desktop styles for menu container
.menu-item
#media (max-width: 600px)
// Mobile styles for menu items
#media (min-width: 601px)
// Desktop styles for menu items