Working with Jade and LESS.
I have all my LESS files that import into a main.LESS file. One of the less files contains changes that I only want to occur while on the main page.
ex. .row normally has a padding of 50px, but for this one page I need it to 20px.
I have no idea how to go about this (I'm still really new to coding). It's part of an assignment, and all of the files MUST import into a main.less file. Thanks.
Suggestion; to take a look at Changing selector order. With you main page having <body class="main"> you can use:
.row {
padding: 50px;
.main & {
padding: 20px;
}
}
The above Less code compiles into CSS code as follows:
.row {
padding: 50px;
}
.main .row {
padding: 20px;
}
Related
I am facing one small issue related to Blazor Input File component used for file upload.
Source - https://github.com/SteveSandersonMS/BlazorInputFile
Component Call -
<div class="form-control">
<InputFile OnChange="HandleFileSelected" />
</div>
I am successfully able to upload and delete files with this component. When I am uploading the file, the file name is shown beside component as shown in the screenshot below.
When I am deleting the file, the file gets deleted successfully but the file name is still shown beside component.
I want the file name should be removed once I delete the file. I tried few option but no luck example StateHasChanged();
Is it possible to just refresh the specific component ?? How ?
Could anyone please help to solve this issue. (I don't want to use javascript to achieve the solution)
An easy way to achieve this is simply using some Bootstrap 4.
<div class="custom-file" style="overflow: hidden; white-space: nowrap;" id="customFile">
<InputFile OnChange="OnInputFileChange" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp" multiple></InputFile>
<label class="custom-file-label" for="exampleInputFile">
#InputFileMessage
</label>
</div>
and then in the code behind you'll have something like this
IBrowserFile File;
public string InputFileMessage = "Select a file...";
public void OnInputFileChange(InputFileChangeEventArgs e)
{
File=e.File;
InputFileMessage=e.File.Name;
}
And then whenever you want to reset the InputFile's label to its default value, you can just
InputFileMessage = "Select a file...";
Easy, isn't it? :)
I can show you what I did to hide the standard file input, and show a custom image and use custom labels for the file names, so you can hide it, change the text, etc.
I have a wrapper component to BlazorInputFile with an option to hide the standard input, and show a button or another image, and bind a variable to show the file name:
<FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
OnReset="OnReset" ResetButtonClassName="localbutton"
ShowStatus="false" PartialGuidLength="10" MaxFileSize=#UploadLimit FilterByExtension="true"
ShowCustomButton="true" ButtonText="Start" CustomButtonClassName="startbutton"
AllowedExtensions=".jpg;.png;" ShowResetButton="false"
CustomExtensionMessage="Only .jpg and .png files are allowed."
AppendPartialGuid="true" InputFileClassName="customfileupload"
FileTooLargeMessage=#FileTooLargeMessage>
</FileUpload>
[Parameter] public EventCallback<string> OnReset { get; set; }
In my CSS I hide the input file like this, which doesn't work on Edge, working on that:
Here is the CustomButtonClassName, this uses my Start image:
CustomButtonClassName="startbutton"
.startbutton
{
position: fixed;
background-color: transparent;
border: 0px;
outline: none;
background-image: url('../images/StartButton.png');
background-repeat: no-repeat;
top: 36vh;
left: 50%;
width: 28%;
height: 28%;
background-size: 100%;
margin-left: -14%;
cursor: pointer;
}
.customfileupload
{
display: inline-block;
cursor: pointer;
height:48px;
min-height: 48px;
visibility: hidden;
display: none;
position: fixed;
left: 0px;
top: 0px;
}
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button
{
cursor: pointer;
display: none;
visibility: hidden;
}
And the end result is my Upload button looks like this:
The full source code and a sample project is here if it might help anyone:
https://github.com/DataJuggler/BlazorFileUpload
Nuget: DataJuggler.Blazor.FileUpload
Thanks Chris Pratt & Data Juggler for you response..
I wrote small logic to toggle the upload file control..it will appear only when file needs to be uploaded and will disappear when upload is done successfully.
Simple function did the trick.
public void ToggleFileUpload()
{
if (showUploadFileComponent == true)
showUploadFileComponent = false;
else
showUploadFileComponent = true;
}
Thanks. Hope this helps if anyone facing same issue.
What would be the nearest conversion of this scss to pure CSS :-
.mfp-force-scrollbars {
&.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
SCSS code gets compiled to CSS before use. If you want to go from SCSS to CSS just compile it. There is an online compiler here: http://beautifytools.com/scss-compiler.php
but most people either use extensions in their editor (VS Code has several) or command line tools . The Sass website is here: https://sass-lang.com/ and it has documentation and installation instructions for the CLI (https://sass-lang.com/install) so you can start compiling your SCSS directly. Here is the compiled code to answer your question directly:
.mfp-force-scrollbars.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-force-scrollbars .mfp-img {
max-width: none;
}
.mfp-force-scrollbars .mfp-close {
position: fixed;
}
In SCSS, the & symbol is called the "Parent Selector" and it is used in a nested selector to repeat its direct parent. Read more here: https://sass-lang.com/documentation/style-rules/parent-selector
On a very minor note, if the overflow-x and overflow-y value is the same, you can just use the shorthand overflow. So the SCSS could just be:
.mfp-force-scrollbars {
&.mfp-wrap {
overflow: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
I try to change the height of the v-slide bar, I have tried with the directive of the component but it only changes the height of the container and I have also tried to overwrite the css with the classes
Any suggestions?
Component: https://vuetifyjs.com/en/components/sliders#sliders
It's been a while, but here is my answer.
Try this:
>>>.v-slider__thumb {
height: 20px;
width: 20px;
}
>>>.v-slider--horizontal .v-slider__track-container {
height: 10px;
}
If you want to learn how this works, read this.
Also I found this answer, there is explained in more detail.
Here is my result:
Please if this was helpful to you, mark this as a correct answer:)
You should be able to fix it with:
.v-slider__track-container {
height: 10px;
}
.v-slider__track {
height: 10px;
}
The track container needs to be increased to show the larger line and the track needs to be increased to have a larger line.
You should be able to overwrite the styles with !important
like this:
.v-slider__track-container{
height: 10px !important;
}
I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.
I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.
This is what I've done so far:
<Tag class="Badge-tag" color="warning" closable #on-close="removeTag">{{ badge }}</Tag>
Then on the less file I added the following:
.Badge-tag {
width: 60px;
position: relative;
.ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I had no luck at all. I don't know why is not setting it.
If you put above css as global css, I think it should work.
I create a demo on jsfiddle here, please check
If you use scoped css, you can try using deep selector
.Badge-tag {
width: 60px;
position: relative;
/deep/ .ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I am using Bootstrap 3.0 & LESS 1.5. I'll be using the same bootstrap.css for many sites (or use their CDN). So I am using
#import (reference) "bootstrap-3.0.0/less/bootstrap.less";
#import (reference) "bootstrap-3.0.0/less/mixins.less";
to import only as reference.
My app.less has (among otherthings)
.herocontainer{
.make-row();
.iphoneblock{
.make-sm-column-offset(1);
.make-sm-column(4);
text-align: center;
}
.copyblock{
.make-sm-column(5);
text-align: center;
.copytext{
#media(min-width: #screen-sm) {
padding-top: 100px;
}
}
.buybutton{
.btn-lg;
.btn-primary;
background-color: #d6822f;
}
}
}
The resulting site is just single column output. But if I remove (reference) from the mixins, like:
#import (reference) "bootstrap-3.0.0/less/mixins.less";
then I get a two column responsive output, but the resulting css also has classes that I don't need.
So,
a) how do I get classes in css only for the ones that I write in app.less and not bloated with bootstrap classes
b) how do I go about debugging such css issues? (I do use Google chrome tools but this issue is more than I can understand/debug)
Thank you,
Joseph
Also see: https://stackoverflow.com/a/14463540/1596547. Which says:
No actual code will output from that file as CSS, but all becomes available to use as mixins.
In you case their will be a difference with for example make-sm-column() this mixin contains a media query definition. If you use (reference) when importing mixins.less this media query part is NOT include in your CSS.
// Generate the small columns
.make-sm-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
// Calculate width based on number of columns available
#media (min-width: #screen-sm-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
Will give:
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.herocontainer {
float: left;
width: 33.33333333333333%;
}
}
With using (reference) you will only got:
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
NOTE you also use btn-lg with came from buttons.less. For me it seems the best solution to reference button.less but not mixins.less (theoretical mixins should contain mixins only, so referencing should make any difference). Otherwise create a mixins.less with only the mixins you will need.
UPDATE
there is a bug Reference import not importing media queries
when a class in a referenced import calls a mixin from a not referenced import, the output of this mixin will be (unexpected) shown in your css. So in the answer above not using reference for mixins.less will indeed give a lot of unwanted classes