I would like to create a gradient background color using sencha cmd
here is what I have tried :
.#{$prefix}-menu-body{
#include background-image(linear-gradient(#47607E, #35475B));
}
I have placed it under
sass\src\menu\Menu.scss
and run a package build.
I do not see any change in the background of my menus.
I would also like to know if I can use the CSS Variables to do that?
menu is a panel ui .
Ext.panel.Panel
view source
extjs-panel-ui( $ui-label, [$ui-border-color], [$ui-border-radius], [$ui-border-width], [$ui-padding], [$ui-header-color], [$ui-header-font-family], [$ui-header-font-size], [$ui-header-font-weight], [$ui-header-line-height], [$ui-header-border-color], [$ui-header-border-width], [$ui-header-border-style], [$ui-header-background-color], [$ui-header-background-gradient], [$ui-header-inner-border-color], [$ui-header-inner-border-width], [$ui-header-text-padding], [$ui-header-text-transform], [$ui-header-padding], [$ui-header-icon-width], [$ui-header-icon-height], [$ui-header-icon-spacing], [$ui-header-icon-background-position], [$ui-header-glyph-color], [$ui-header-glyph-opacity], [$ui-tool-spacing], [$ui-tool-background-image], [$ui-body-color], [$ui-body-border-color], [$ui-body-border-width], [$ui-body-border-style], [$ui-body-background-color], [$ui-body-font-size], [$ui-body-font-weight], [$ui-background-stretch-top], [$ui-background-stretch-bottom], [$ui-background-stretch-right], [$ui-background-stretch-left], [$ui-include-border-management-rules], [$ui-wrap-border-color], [$ui-wrap-border-width] )
Creates a visual theme for a Panel
put these in your menu.scss
#include extjs-panel-ui(
$ui-label: 'your-ui-label-when-used-in 'ui' property',
$ui-body-background-gradient: color-stops(#F950AD, #E4007f),
$ui-border-color:#E4007f,
$ui-body-background-color:#E4007f,
$ui-body-border-width:0px,
$ui-border-radius:5px,
$ui-body-font-size:1.6em
);
in ext-theme-neutral /sass/panel/panel.scss
add
$ui-body-background-gradient: $panel-body-background-gradient,
// $panel-body-background-gradient is in your theme, var/panel/panel.scss
//$ui-body-background-gradient is the var you are going to use.
edit panel-body scss
// body
.#{$prefix}panel-body-#{$ui-label} {
#if $ui-body-background-color != null { background: $ui-body-background-color; }
#if $ui-body-border-color != null { border-color: $ui-body-border-color; }
#if $ui-body-color != null { color: $ui-body-color; }
#if $ui-body-font-size != null { font-size: $ui-body-font-size; }
#if $ui-body-font-weight != null { font-size: $ui-body-font-weight; }
#if $ui-body-border-width != null {
border-width: $ui-body-border-width;
#if $ui-body-border-style != null { border-style: $ui-body-border-style; }
}
//$ui-body-background-gradient: $panel-body-background-gradient,
////$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ add it !!!
#if $ui-body-background-gradient !=null {
#include background-gradient(
$ui-body-background-color,
$ui-body-background-gradient,
top
);
}
}
Related
I am using the Divi Builder in WordPress to make a list of patents in the accordion format. However, I would like to format the accordion title (of each accordion element) so that on the left is the patent#, and on the right is the title of the patent.
To do this, I would like to know how I can split the title into 2 separate sections; 1 where I can put the title number, and the other where I can type the name of the patent. Sort of like this:
Another sketch to show what I want it to look like: sketch of the goal
Again I am using Divi Builder to do this as I am a novice using WordPress. But I am assuming I would have to write some custom CSS to format the title in this way in the Divi Builder.
First is it possible to do what I am trying to do?
If so how can I do this (in the Divi Builder environment)?
Unfortunately, not all of our requirements can be met by means of ready-made tools for building a website.
In such cases, we are forced to write "fixes" in such individual cases.
I offer you a js script that does the following:
Searches for titles with text that meets the following requirements:
Starts with #
After a hash without spaces, numbers
Example: #111
Wraps the found in the span with the class specified in the configuration (at the very top of the file)
I tested here
(function() {
// Config
let classFirstHeading = 'my-heading';
let headerSelector = '.et_pb_toggle_title'; // You can replace to your selector of heading
// end config;
var DOMReady = function(callback) {
if (document.readyState === "interactive" || document.readyState === "complete") {
callback();
} else if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", callback);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState != "loading") {
callback();
}
});
}
}
function updateHeading() {
let headings = document.querySelectorAll(headerSelector);
headings.forEach(el => {
let textHeading = el.innerText;
let regexp = /^\#\d+/;
if(textHeading && regexp.test(textHeading.trim())) {
el.innerHTML = textHeading.replace(regexp, (match) => {
return '<span class="'+classFirstHeading+'">'+match+'</span> ';
});
}
});
}
window.updateHeading = updateHeading; // Give access from outside
DOMReady(() => {
updateHeading();
/* Test, you can remove this section */
let styleEl = document.createElement('style'); styleEl.type = 'text/css';
let css = `
.${classFirstHeading} {
display: inline-block;
font-size: 23px;
font-weight: 700;
margin-right: 15px;
padding: 10px 15px 10px 0;
border-right: 2px solid #000;
}
`;
styleEl.appendChild(document.createTextNode(css));
document.querySelector('head').appendChild(styleEl);
/*************************************/
});
})();
<h5 class="et_pb_toggle_title">#111 What is your refund policy?</h5>
If you don't know where to insert such code, install the Custom CSS and JS in Header & Footer plugin and just copy my js code to your page where you use the accordion
I'm trying to pass some CSS Custom Properties to a SASS Mixin. I'm able use the variables when applied directly in the styling I want. But when I try to use a variable in an If statement, it doesn't work.
Mixin Example:
#mixin bg-color($hue, $status) {
background: hsl($hue, 50%, 50%); // $hue works as expected
#if $status == 'danger' { // doesn't work!
color: 'red';
} #else if $status == 'warning' { // doesn't work!
color: 'orange';
} #else { // always enters the else branch
color: 'black';
}
}
CSS:
:root {
--hue: 195;
--status: 'default';
}
.demo {
#include bg-color(var(---hue), var(---status));
}
If I manually add the status value to the mixin, it works:
.demo {
#include bg-color(var(---hue), 'danger');
}
Any idea what might be the issue?
UPDATE: As #temani-afif mentioned, this approach isn't possible because SASS files are compiled before CSS variables are used.
If you have some file, where you import all SCSS files, it depends which is imported first and which are imported after.
Make sure that one that you need to be Read by VS is first.
For example i needed to read first my variables, so it have to be first, other way, my code read mixin, and doesnt know yet what is '$blue'.
My compiled CSS when viewed has a SASS function in it that was never compiled. This is presumably caused by the mixin I'm using to auto generate classes. I have no idea how to fix it.
SASS code:
$rsColors: (
main: (
base: #333030,
lighter:#827a7a,
light:#5a5555,
dark:#0c0b0b,
darker:#000000,
red: #211010,
accent:#999595,
border: #666666
),
link: (
base: #c42727,
lighter:#eb9999,
light:#de5959,
dark:#841a1a,
darker:#440e0e,
hover:#841a1a,
bg:rgba(80, 80, 80, 0.8),
bgHover: #cccccc
)
}
#mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $type: 'darken', $perc: '15%') {
#each $key, $value in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
#if type-of($value) == 'map' {
#include modifiers($value, $attribute, $separator, $hover);
}
#else {
#{$attribute}: $value;
#if $hover == 'true' {
&:hover {
$function: get-function($type);
#{$attribute}: call($function,$value,$perc);
}
}
}
}
}
}
.rsBg {
#include modifiers($rsColors, 'background', $hover: 'true');
}
Compiled CSS (as viewed from style editor in Firefox inspector):
...
.rsBg-yellow-700 {
background: #b7791f;
}
.rsBg-yellow-700:hover {
background: darken(#b7791f, 15%);
}
...
How can I fix the compiled CSS so it's rendered correctly? I figure the mixin is to blame since it's outputting what I'm telling it to. Why it's not compiling before being output to CSS?
Expected Output:
...
.rsBg-yellow-700 {
background: #b7791f;
}
.rsBg-yellow-700:hover {
background: #915300; //assuming 15% darken
}
...
**Edit**
After some testing I have found I needed to add the ```get-function()``` method to get ```call()``` to work. However, no matter what I try I can not get the ```$perc``` variable in such a way as to not throw a "not a number" error. I can hard code percentages and it will compile without errors.. but I'd rather not have to do that.
The problem actually comes from the way you call the function and not the mixin. Instead of:
#{$attribute}: unquote(#{$type}($value, #{unquote($perc)}));
You should use the built-in function call() as below:
#{$attribute}: call($type, $value, $perc);
You also need to remove the quotation marks for the parameter $perc or you will get an error such as: $amount: "15%" is not a number for 'darken'. I tried to remove them with unquote() but it doesn't seem to work.
The answer to this issue was the use of '' in the arguments. Specifically the $lightness variable (which was changed from the #perc variable). Once I removed the quotes and just let it hang there, everything compiled and worked fine.
I removed the $type variable and changed the function to scale_color as it seemed to fit better with what I wanted. I should probably change the argument variable to a different name so not to be confused with the scale_color() argument. A task for a different day though.
PLEASE NOTE: I am accepting #Arkellys answer because it set me on the right path to this answer, and I feel really weird about accepting my own answer. I just added this answer so if another comes along it might help. Thank you #Arkellys for your help!
The final mixin
#mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $lightness: -15%) {
#each $key, $color in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
#if type-of($color) == 'map' {
#include modifiers($color, $attribute, $separator, $hover);
}
#else {
#{$attribute}: $color;
#if $hover == 'true' {
&:hover {
#{$attribute}: scale_color($color,$lightness: $lightness);
}
}
}
}
}
}
.rsBg {
#include modifiers($rsColors, 'background', $hover: 'true', $lightness: -20%);
}
I have a number of SASS variables that reference SVG icons. Below is a simplified example:
I would like to be able to loop through a list of strings and compose the SASS variable name in a way that's presented using the background style of the icon-checkbox class. My approach so far does not work. Can I anyone show me how/if this can be done in SASS.
$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-list: trash, save; // list of icon names
.icon-checkbox {
each $key in $icon-list {
background: url($icon-#{$key}-grey);
// other styles
}
}
Thanks in advance
The following SASS
$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-map: (
trash: $icon-trash-grey,
save: $icon-save-grey,
);
.icon{
#each $key, $value in $icon-map {
&.#{$key} {
background: url($value);
}
}
}
renders this CSS
.icon.trash {
background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
.icon.save {
background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
You can have a look, make edits or fork this Sassmeister
Try this :
$icon-list : (
"icon-trash-grey": "data:image/svg+xml;charset=UTF-8,<svg data>",
"icon-save-grey": "data:image/svg+xml;charset=UTF-8,<svg data>"
);
#each $key, $val in $icon-list {
.#{$key} {
background: url($val);
}
}
I think the code speaks for itself so this is what I have:
#mixin btnNoBackgr30($divName, $iconName, $xtypeYesOrNo ){
$xtypeBtn:nil;
#if xtypeYesOrNo == 'yes'{
$xtypeBtn:x-button-#{$divName};
}
#if xtypeYesOrNo == 'no'{
$xtypeBtn:#{$divName};
}
.#{$xtypeBtn}{
properties:values;
}
all I get in css is this
.nil{
properties:values;
}
How can instantiate the variable outside the #if?
If I do it inside the #if ofc it wont be detected outside the scope like normal programming and marked ans 'undefined'
Please help. false do the same and Null give me errors
give $xtypeBtn some random default value as it will be reset anyway? If $xtypeYesOrNo can be undefined, give it a default value too?
#mixin btnNoBackgr30($divName, $iconName, $xtypeYesOrNo:default) {
$xtypeBtn:default;
#if $xtypeYesOrNo != default {
// do whatever
}
#if xtypeYesOrNo == yes {
$xtypeBtn: x-button-#{$divName};
}
#if xtypeYesOrNo == no {
$xtypeBtn: #{$divName};
}
.#{$xtypeBtn} {
properties: values;
}
}