I'm new to LESS and I would like to know what's the best solution to have a dynamic mixin. What I want to do is change the border color depending on the parent wrapper.
For exemple .letterList & .letterActive are inside a .azStores wrapper class. Here my mixin is set to #azStoresMainColor.
In my html the wrapper class is changing dynamically (categoryStores, floorStores...) and I want to change the color of the border depending on those wrapperClass.
Is there a nice solution to do that in LESS ? Thanks a lot in advance.
.grouplistBorderMixin() {
border-top: 2px solid #azStoresMainColor;
}
.letterList div:nth-child(1) {
.grouplistBorderMixin;
box-sizing: border-box;
}
.letterActive {
text-align: center;
height: 94px;
line-height: 94px;
.grouplistBorderMixin;
box-sizing: border-box;
}
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
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();
}
}
Is that possible to do with CSS.
I tried this:
#gallery_ul {
display: inline-block;
list-style: none outside none;
margin: auto auto auto auto;
width: 986px;
}
#gallery_ul li {
float:left;
margin:10px;
padding:10px;
text-align:center;
border:1px solid grey;
width:274px;
}
#gallery_ul img {
padding-bottom:5px;
}
If yes then how? Thank you.
You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.
See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/
You can. But i think you have to be more specific.
One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.
I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/