SASS Mixin Arguments - hash

I am passing multiple arguments in the mixin below. I am calling the mixin from multiple places in my CSS files; sometimes all the args need to be specified, other times only a few. Ruby allows you to pass an optional args using a hash. Is there such an equivalent in SASS, or this obviated by the fact that named arguments can be passed in any order, and arguments with default values can be omitted?
#mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) {
.wrapper {
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.middleCol {
float: left;
background: $background_color;
height: $column_height;
width: $mid_width;
display: inline;
line-height: $mid_line_height;
}
.leftCol {
background: $background_color;
height: $column_height;
width: $left_width;
float: left;
line-height: $left_line_height;
}
.rightCol {
background: $background_color;
height: $column_height;
width: $right_width;
float: left;
line-height: $right_line_height;
}
}

Sass's only data structure as of 3.1.7 is lists.
As you mentioned you can include your mixin using any combination of named arguments only if all arguments that are not passed have default values.

Sass 3.3 added the mapping data structure and you can pass them as arguments to mixins like this:
$options:
( background_color: red
, right_width: 30%
, left_width: 20%
);
.foo {
#include three-column-header-layout($options...);
}
Note, however, that one could also specify the arguments like so (this may have been a 3.2 feature):
.foo {
#include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%)
}

Related

Magento 2 - Layered Navigation Swatches Styling

I am using Magento 2.4.5 and would like to make edit css of the icons in the layered navigation, need them smaller and put them in rows of 6.
I cannot find where I need to add/edit the css files for this part of the website. I tried Magento_Swatches\web\css\source_module.less but no result.
Any help would be appreciated.
Thank you
If you are using the default Luma theme:
Note: First, you need to check the template file of the CSS source used.
You need to edit the CSS file: swatches.css or custom CSS if you have created one. Getting the correct element may it can give you a correct catch.
Could you adjust the width and height of the swatch div? Please remember to specify! an important rule in CSS.
.swatches-globo .swatch--gl .ul-swatches-list li:not(ul.ul-globo-dropdown-option li), .globo-swatch-product-detail .swatch--gl ul.value li:not(ul.ul-globo-dropdown-option li) {
display: block;
float: left;
margin: 0 10px 10px 0!important;
}
Also,
.swatches-globol .swatch--gl li .globo-size-medium, .globo-swatch-product-detail .globo-detail-size-medium {
width: 35px;
height: 35px;
}
OR
.swatch-option.color {
min-width: 25px;
height: 25px;
}
Thanks

Changing ticks height in ion-range

I'm trying to implement some functions that use ion-range as input. The functions are okay, my problem is related to the aesthetic issue of the ion-range element. Although there is this option to implement ticks in the documentation, they are the same height as the bar, making them very difficult to see if the primary color of the app is not dark enough.
I managed to modify it through the dev console and was able to acquire the style I wanted. I tried to modify the .range-tick class that is created, but to no avail. I saw a similar question that change the style of the range pin, but how can access this options for the range-tick?
I dev console I can see that style is currently this way:
.range-tick {
position: absolute;
top: calc((var(--height) - var(--bar-height)) / 2);
width: var(--bar-height);
height: var(--bar-height);
background: var(--bar-background-active);
z-index: 1;
pointer-events: none;
}
From this question suggestion I tried to add the currently empty variable --bar-height in my :root (src/theme/variables.scss), but this don't change anything.
I want to modify the class to include this options:
.range-tick {
position: absolute;
top: 25%; // <-- Changed
width: var(--bar-height);
height: 20px; // <-- Changed
background: var(--bar-background-active);
z-index: 1;
pointer-events: none;
}
I also tried to modify the range.md.css and range.ios.css files located in project_folder/node_modules/#ionic/core/dist/collection/components/range/, which looks exactly what I can see in dev console. After modify the class and recompile nothing has changed, in dev console Inspector I can see that the class is still using the initial class and not the modified one.
I read some comments of people in ionic forum saying that this can only be changed by Ionic team, so I created a new issue.
You can use CSS Shadow Parts.
To set the style for all non active ticks
ion-range::part(tick){
height: 10px;
width: 10px;
top: 16px;
border-radius: 50%;
}
To set the style of all active ticks
ion-range::part(tick-active){
height: 10px;
width: 10px;
top: 16px;
border-radius: 50%;
}
For more you can refer https://ionicframework.com/docs/api/range#css-shadow-parts

ng-class not evaluating the expression

I'm trying to implement ng-class in my angularJs application but for some reason expression in the ng-class is not getting applied, any thoughts?
<span>{{prod.item.count}}</span>
<div ng-class="{'show-error-box' : prod.item.length< 1}" class="hide-error-box">
prod is my controller alias in the view and item is the scope object in my controller
I want the class 'show-error-box' when the number of items is less than 1 otherwise apply the class hide-error-box. As I don't have any test data to test this with 0 length i'm replacing the expression with ng-class="{'show-error-box' : 0< 1}" in which case show-error-box should get applied, but it is not happening.
CSS:
.hide-error-box {
display:none;
}
.show-error-box {
float: left;
width: 100%;
background: #fff;
text-align: center;
padding: 10% 0;
height: 700px;
position: absolute;
}
ng-class does not serve as a replacement to "class". It will add any classes whose name is a key in your object if the associated value is true.
The only two options this div will have as a result are:
class="hide-error-box"
or
class="hide-error-box show-error-box"
To acheive the desired effect you would could put the opposite condition as a value of your hide class.
ng-class="{hide-error-box: prod.item.length >= 1, show-error-box: prod.item.length < 1}"
However, it is often recommended that you keep your templates as free from logic as possible. It may be worth considering placing this in a controller function:
HTML
<div class="{{getSizeClass()}}">
JS
this.getSizeClass = function() {
if (item.length >= 1) {
return 'hide-error-box'
}
return 'show-error-box'
}

CSS3 Skew Again! : Unskew text without parent div so form focus state is proper

I have a simple problem, but I may be asking for the impossible.
I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:
http://jsfiddle.net/ExUs9/3/
form {
background:#62CAD9;
padding:10px;
}
div {
background: white;
height: 30px;
margin: 10px;
width:300px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
input {
background: none;
width: 100%;
height: 100%;
border: none;
transform:skewX(-30deg);
-ms-transform:skewX(-30deg);
-webkit-transform:skewX(-30deg);
}
My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:
http://jsfiddle.net/kdqKX/
form {
background:#62CAD9;
}
input {
margin: 20px;
background: white;
width:300px;
border: none;
height: 30px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
The problem here is that the text is skewed.
I know I could just remove the focus outline, but is there any way to either:
Skew the input box--but not the contained text--without skewing via a parent div
Apply the border to the parent div when the child input box is focused
I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.
Thank you, you brave internet geniuses,
Dalton
The easy solution would be a background image.
CSS gradient can fake this.
background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );
Try it without transform. http://jsfiddle.net/khGDj/
other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.

Dynamic class names in LESS

I have the following bit of LESS code working
#iterations: 940;
#iterations: 940;
#col:2.0833333333333333333333333333333%;
// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (#index) when (#index > -20) {
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".gs#{index}") {
// your resulting css
width: (#index/20+1)*#col;
}
// next iteration
.loopingClass(#index - 60);
}
// end the loop when index is 0
.loopingClass (-20) {}
// "call" the loopingClass the first time with highest value
.loopingClass (#iterations);
It outputs our grid system as so:
.gs940 {
width: 100%;
}
.gs880 {
width: 93.75%;
}
.gs820 {
width: 87.5%;
}
.gs760 {
width: 81.25%;
}
.gs700 {
width: 75%;
}
etc etc etc
Now what I want to do is some math to the class names to produce the following classes
.gs220-700
.gs280-640
.gs340-580
.gs400-520
.gs460-460
.gs520-400
.gs580-340
.gs640-280
.gs700-220
etc etc etc
basically this would be
.(#index) - (920px minus #index)
But I have no idea if this is possible.
This whole question was very helpful to me. I just wanted to post the solution to my problem as the way to do it has changed since LESS v 1.4. LESS Changelog
Rather than using the ~ sign, you just write out the portion of the name that you want along with the normal # and variable name with {} surrounding it. So: #class#{variable}.
For example, my solution using the same sort of loop became such:
/*Total number of passport inserts*/
#numInserts: 5;
/*Total width of the passport foldouts*/
#passportWidth: 300px;
/*Change in passport insert width per iteration*/
#passportWidthDiff: (#passportWidth / #numInserts);
/*"Array" of colors to select from to apply to the id*/
#passportColors:
blue orange green red yellow
purple white teal violet indigo;
/*The faux loop the doesn't end up in the final css
#index is the counter
#numInserts is the total number of loops*/
.loopingClass (#index) when (#index <= #numInserts){
/*This is the created ID with the index appended to it
You can also do this with classes such as if
we had had ".insert#{index}"*/
#insert#{index}{
/*Here are our properties that get adjusted with the index*/
width: (#passportWidth - (#passportWidthDiff * (#numInserts - #index)));
height: 50px;
background-color: extract(#passportColors, #index);
z-index: (#numInserts - #index);
}
/*Here we increment our loop*/
.loopingClass(#index + 1);
}
/*This calls the loop and starts it, I started from 1
since I didn't want to lead a className starting from 0,
But there is no real reason not to. Just remember to
Change your conditional from "<=" to "<"*/
.loopingClass(1);
And produces the following:
#insert1 {
width: 60px;
height: 50px;
background-color: #0000ff;
z-index: 4;
}
#insert2 {
width: 120px;
height: 50px;
background-color: #ffa500;
z-index: 3;
}
#insert3 {
width: 180px;
height: 50px;
background-color: #008000;
z-index: 2;
}
...
I don't think you're far off. What I've done is create a second variable inside the mixin, called #index2. All this does is find the '920px minus #index' value that you're looking for:
#index2 = (920-#index);
this is then appended to the class name:
(~".gs#{index}-#{index2}") {
This is the complete loop:
.loopingClass (#index) when (#index > 160) {
#index2 = (920-#index);
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".gs#{index}-#{index2}") {
// your resulting css
width: (#index/20+1)*#col;
}
// next iteration
.loopingClass(#index - 60);
}
// "call" the loopingClass the first time with highest value
.loopingClass (#iterations);
In order to get just the set you are looking for (gs220-700 to gs700-220), just change #iterations to equal 700.
Worth noting that currently, this will create the classes in the reverse order of how you specified them in the question.