I have the following less
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
**.opacity(.6);**
}
and the following in my grunt file...
less: {
development: {
options: {
paths: ["default/less","default/less/bootstrap"]
},
files: {
"css/less.css": ['less/*.less']
}
}
}
and opacity declared in default/less/bootstrap/mixins.less
.opacity(#opacity) {
opacity: #opacity;
// IE8 filter
#opacity-ie: (#opacity * 100);
filter: ~"alpha(opacity=#{opacity-ie})";
}
but when I run grunt I get...
Running "less:development" (less) task
>> NameError: .opacity is undefined in less/sigature.less on line 61, column 5:
>> 60 position: absolute;
>> 61 .opacity(.6);
>> 62 }
Warning: Error compiling less/signature.less Us
--force to continue.
the problem is that you need to include mixins.less like this:
#import "bootstrap/mixins.less"; //I don't know you folder organizations
//..code...
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
.opacity(.6);
}
The previous answer put me down the right path. Instead of building all I needed to point at an individual Less file that contained the import. This appears to make it work.
Related
I'm trying to understand sass files of Splide ( https://splidejs.com/ ).
In many files there are codes like this one
.splide {
$root: &;
&--ttb {
> #{$root}__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
#{$root}__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
What the $root: &; means?
In your snippet, $root is just the name of the variable.
You could give it another name, like $foo.
$root: & is equivalent here to $root: .splide as & in sass refers to the parent selector.
It means that:
.splide {
$root: &;
&--ttb {
> #{$root}__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
#{$root}__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
Is equivalent to:
.splide {
&--ttb {
> .splide__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
.splide__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
And will compile to:
.splide--ttb > .splide__pagination {}
.splide--ttb > .splide__pagination .splide__pagination__page {}
I am using PrimeNG Steps. How to remove the numbers in steps?
I tried using the Default CSS Property.
component has no option for this ,but you can use css to hide the innerHtml by after pseudo-element
style.scss (global style)
p-steps{
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps .ui-steps-item .ui-steps-number {
color: #ccc !important;
}
}
demo 🚀
the style above will change the style for all p-steps components but you can use custom styleClass like this
template
<p-steps styleClass="dot-theme" [model]="items"
[(activeIndex)]="activeIndex" [readonly]="false">
</p-steps>
style.scss
.dot-theme {
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor ;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps-number {
color: #ccc !important;
}
}
demo 🌟
You can simply hide the text setting it's colour to transparent:
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
color: transparent;
}
I'm relatively new to Less (and precompilers).
I have three files, defined as this:
//global.less
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
//...
//global-flex.less
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
//...
And a third file (main.less) where I import both of those files.
#import "global.less";
#import "global-flex.less";
//Other imports and files also happens, but they are not relevant to this question.
When i compile main.less, my output is:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
I want the output to "merge" the two matching "body" rules, like this:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
How can I achieve this?
In-stead of defining multiple variables separately like:
$logo_text_color: $white
$menu_link_color: $white
$menu_icon_color: $white
Is there any way to define them together at a time; something like this?
$logo_text_color, $menu_icon_color, $menu_link_color: $white
Finally I have found a solution...
SASS:
=els($a: 1, $b: 2, $c: 3)
height: $a + px
width: #{$b}px
content: abc
.cool
+els
.things
+els($a: 100)
.stuff
+els($c: 29)
.other
+els($c: 29, $b: 54)
CSS:
.cool {
height: 1px;
width: 2px;
content: abc;
}
.things {
height: 100px;
width: 2px;
content: abc;
}
.stuff {
height: 1px;
width: 2px;
content: abc;
}
.other {
height: 1px;
width: 54px;
content: abc;
}
I have followed the documentation here:
https://github.com/blueimp/Gallery
First loaded assets separatedly.
Then created blueimp-gallery-textFactory.js and loaded after core file, before video file, with the following contents:
blueimp.Gallery.prototype.textFactory = function (obj, callback) {
var $element = $('<div>')
.addClass('text-content')
.attr('title', obj.title);
var iframe=$('<iframe>', {
src: obj.href,
frameborder: 0,
height: '100%',
width: '100%',
scrolling: 'no'
});
$element.html(iframe);
callback({
type: 'load',
target: $element[0]
});
return $element[0];
};
So what changes from original example is that I'm not making an ajax request and then running callback, but instead creating an iframe and then running callback.
And also added the aditional css style to the stylesheet:
.blueimp-gallery > .slides > .slide > .text-content {
overflow: auto;
margin: 60px auto;
padding: 0 60px;
max-width: 920px;
text-align: left;
}
The issue I ran into is that the onLoad/complete event would never fire and the slideLoading class will be always on top of the iframe.
I started to look into the videoFactory plugin and youtube one to see what could be wrong.
So I've stole some CSS from the video plugin:
.blueimp-gallery > .slides > .slide > .text-content > iframe {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.blueimp-gallery > .slides > .slide > .text-content > iframe {
top: 0;
}
This (helps) but did not solve the problem.
What did solve the problem was taken from blueimp-gallery-video.js and that is running the callback with this setTimeout function.
blueimp.Gallery.prototype.textFactory = function (obj, callback) {
var $element = $('<div>')
.addClass('text-content')
.attr('title', obj.title);
var iframe=$('<iframe>', {
src: obj.href,
frameborder: 0,
height: '100%',
width: '100%',
scrolling: 'no'
});
$element.html(iframe);
// callback({
// type: 'load',
// target: $element[0]
// });
this.setTimeout(callback, [
{
type: 'load',
target: $element[0]
}
]);
return $element[0];
};
This time the problem got solved. I guess with the $.get ajax call from original example there was no need to call setTimeout but with the iframe it was required.