Foreword: New to Sass, better with Less but not great either.
I'm using chartist to plot a line plot and a pie chart in two seperate views. Chartist provides a _chartist-settings.scss file which contains a bunch of global constants definitions. The documentations says to alter these in order to customize the look of the chart. However, I'd like each chart to have its own styling, but I'm not sure the way I'm doing it right now in the SCSS is correct.
Let's use the example of the chart's label font-size. in the file, this is set using the $ct-text-size variable.
Ideally, I would define values for these constants which would change according to the scope of the chart. So the chart under <div class="line"> I can have $ct-text-size: 2rem and under <div class="pie"> have $ct-text-size: 1rem. However, I can't figure out how to do this. Is there a way to do this?
Instead, to make it work, I've looked at the class these constants end up getting used in (in this case .ct-label) and changed them directly according to scope (See below). This however, seems to go against the abstraction that _chartist-settings.scss provides, since it couples it with the internal SCSS workings of the module.
.line{
.ct-label { //this class uses the $ct-text-size variable
font-size: 1rem; // but I just change the class directly
}
}
.pie{
.ct-label {
font-size: 2rem;
}
}
Related
I have this <v-select multiple persistent-placeholder></v-select> component and I would like to display some custom content if selection is empty, like No entry selected yet.
Is there any chance I can achieve this? I looked at props and slots but none seem to fit my need. I tried the no-data named slot but did not work.
Thanks
Looks like the best approach with the current vuetify version is to use the placeholder as you mention in the comments. Check this codepen I made: https://codepen.io/cmfc31/pen/GROyQMa
I just added some css to make it look like an item
.no-entries input::placeholder {
color: #212121 !important;
}
".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.
I am working on a Symfony 4 application and using Symfony's Webpack wrapper Encore.
The application will be used to run multiple sites on one db, each one with a different theme. The themes will be versions of bootstrap 4 that have their primary variables set to a certain colour. i.e theme1 red, theme2 blue.
What is the optimum way to achieve this?
I have though about multiple CSS output files, i.e theme1.css, theme2.css and dynamically referencing these from the HTML.
I am also wondering if Encore/Webpack has the option to pass in a variable to an SCSS file i.e:
.addStyleEntry('theme1', './scss/main.scss, red) // THIS WOULD OUTPUT theme1.css (RED)
.addStyleEntry('theme2', './scss/main.scss, blue) // THIS WOULD OUTPUT theme1.css (BLUE)
The main.scss uses various mixins to overide the primary colours in Bootstrap, but I was wondering if a variable could be passed into main.scss.
Create a SCSS for each theme. This way more changes can be added and maintained easily.
// scss/theme1.scss
$primary-color: red;
#import 'main';
and
// scss/theme2.scss
$primary-color: blue;
#import 'main';
Pack them with
.addStyleEntry(theme1, './scss/theme1.scss')
.addStyleEntry(theme2, './scss/theme2.scss')
and you are done.
Though there is a way to set SCSS variables with Webpack/Encore by prefixing all sass-entries with a string, I would not recommend this approach:
.enableSassLoader((config) => { config.data = '$primary-color: green;' })
All entries will have the same prefix $primary-color: green; and you are polluting with styling information that should be placed in style-sheets when possible.
I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}
In several of my mvc pages, I have disable certain fields like textarea and input boxes with the "disabled" attribute that are uneditable fields. But users are complaining about the text/font being hard to read. It looks blurred and too light.
Anyone have recommendation to make diabled fields more readable?
Well, you can use CSS style for that. I suggest you to use the :disabled selector.
As an example, you can do something like this to change the color for example :
input:disabled { color: #FF0000; background: #ccc; }
You can find a good tutorial here.