I made a Vue module for myself and published to NPM, but when I try to install this module to another project via npm i <module-name>, I can use component, but it's not applying CSS for my component.
I think the problem is I am writing all CSS in style scope in my component. I don't know what the best practice is for including CSS. My style is so simple like this:
<style>
.container {
border: 1px solid #E5E5E5;
position: relative;
}
.image-container {
height: 70%;
width: 100%;
text-align: center;
margin-top: 7%;
}
.title-container {
width: 100%;
text-align: center; /* optional */
overflow: hidden;
text-overflow: ellipsis;
background-color: #F5F5F5;
border-top: 1px solid #E5E5E5;
position: absolute;
bottom: 0;
}
</style>
For a library, it might be more convenient (and less error-prone) for your users if you include the CSS in your bundle, so users wouldn't have to import the CSS themselves. This is also recommended in the Vue CLI docs. To do this, set css.extract=true in vue.config.js:
vue.config.js:
module.exports = {
//...
css: {
extract: true
}
}
Related
The deep selector in vue3 has been changed into :deep(xxx), but it doesn't work when I use it in .less imported externally to .tsx.
BTW, Although Vue3 is no longer use /deep/ or >>>, I still tried and didn't work too
.register_form {
&__base_info {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: palegoldenrod;
&__input_container {
padding: 1rem;
border: 1px solid green;
border-radius: 5px;
&__label {
font-weight: bolder;
}
:deep(input) {
border: none;
background-color: yellow;
}
}
}
}
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
How would you define a CSS style (e.g. font-size: 20px), and reuse it in multiple places with LESS?
According to the LESS docs, I can use variables for keys (e.g. font-size), identifiers (e.g. .myClass), and values (e.g. 20px). However, I'm not seeing an ability to do general rules like this.
Example in SCSS:
Define a mixin
#mixin large-text {
font-size: 20px;
}
Use it elsewhere
.MyAwesomeTitle {
color: red;
#include large-text;
}
Result:
.MyAwesomeTitle {
color: red;
font-size: 20px;
}
Define the mixin. While the leading . makes it look like a class selector, it's just how naming mixins works in LESS.
.large-text() {
font-size: 20px;
}
You include a mixin by just writing the name of the mixin. In this case it's .large-text.
.MyAwesomeTitle {
color: red;
.large-text
}
The docs give an example under "parametric mixins"
Input:
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
Output:
pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}
I need to override some global variables used within a mixin. However I'm reluctant to just change the variables in global space (wouldn't be overriding then)
Consider this given mixin with the required variable defined.
// Mixin and adjust the regular image class
.thumbnail {
display: block;
padding: #thumbnail-padding;
margin-bottom: #line-height-computed;
line-height: #line-height-base;
background-color: #thumbnail-bg;
border: 1px solid #thumbnail-border;
border-radius: #thumbnail-border-radius;
.transition(all .2s ease-in-out);
> img,
a > img {
.img-responsive();
margin-left: auto;
margin-right: auto;
}
// Add a hover state for linked versions only
a&:hover,
a&:focus,
a&.active {
border-color: #link-color;
}
// Image captions
.caption {
padding: #thumbnail-caption-padding;
color: #thumbnail-caption-color;
}
}
Yep, from Bootstrap... Now I want that mixin to work with different variables, without changing the global scoped ones. Can this be done?
article.publications {
.news-thumb {
#thumbnail-padding: 10px;
#line-height-computed: 20px;
#line-height-base: 30px;
#thumbnail-bg : black;
.thumbnail();
}
}