I am getting started with Clarity Design with Angular.
I am trying to cusomise styles thru 'style.css' which is the last entry
in styles array in angular.json
My questions/observations are..
Reduce the Height of the 'header' ?
'content-area' seems to be having some padding..
'sidenav' seems to be leaving too much margins, paddings to my liking...
How do I customise/override these in css ? Been trying few things but to no avail. Am I missing somthing ?
Thanks in advance.
First of all I'd suggest to read the official theming documentation.
In general each component has a file called _variables.<component_name>.scss that defines all the variables used by the specified component.
For instance this file defines the variable $clr-header-height that is the default header height.
This other file instead defines "global" variables.
Related
So I have an array of colors
let colors=["red-500","blue-500","green-500","yellow-500","cyan-500","white-500","orange-500"]
and i wanna use a specific color depending on a number
<h1 className={`bg-${colors[index]}`}></h1>
the colors are not always applied as intended for example sometimes it always be red or white
has anyone encountered similar issues with tailwind css + react ?
Tailwind will only build styles for classes that it detects in your code—but it does not actually run your source code and won’t detect dynamically constructed class names. Therefore, you must include the complete class name in your strings.
The styles that are working (like red and white) are probably included elsewhere in your code, and make it into the build, while the others are not.
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Source: Dynamic class names - Tailwind CSS
While the answer from #quartzic is a perfectly acceptable, I'd like to present an alternative.
The missing styles is most likely caused by Tailwind purging all styles that it doesn't detect being used anywhere in your code. This purge functionality can be configured by defining a safelist - a list of classes that shouldn't be purged under any circumstances.
In your case, I'd add the background color classes you want to use, to the safelist and you wont have to change anything in your React component. This is done in the tailwind.config.js file:
module.exports = {
// ...
safelist: [
'bg-red-500',
'bg-blue-500',
'bg-green-500',
'bg-yellow-500',
'bg-cyan-500',
]
// ...
}
The downside is that it might increase your style bundle size, if your safelist includes classes that turned out to not be used anyways. In you case, this doesn't seem to be an issue though.
This safelist can even use regular expressions (although, I'd be vary of using that, as it might increase bundle size unexpectedly).
You can read more in the Tailwind documentation
It was quite hard to give this question a simple title, so I'll try to explain the situation.
I'm using an scss file with two main classes for controling direction style: rtl /ltr
I was using the RTLCSS online tool for converting a standard css to its corresponding rtl version and used it like this:
style.scss file:
body[dir="ltr"]{
css rules
}
body[dir="rtl"]{
rtl-css rules
}
for certain classes, such as of the paginator component I dont want to use the rtl version, but I also dont want to dig up in the rules and change it there.
Instead I would like to load another 'corrections' file to override the 'overriding' rtl version, and just state for what classes not to use the rtl version, but the ltr version, is it possible somehow?
First, I searched an existing answer, but the answers were referring how to exclude when writing original rules, I'm looking to override it somehow
I made a corrections file to override the certain class unwanted rtl rules, but this seems not quite efficient as I find out more properties I didn't notice at first, and a better solution would have been to assign the whole class to the ltr rules, could this be done simply?
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.