Is there a way that I could edit the saturation of bootstrap alert saturation? I'm using Yii framework and I've used the alerts I've noticed the green wasn't green enough I tried looking at the css of the Yii framework, do I add something like this?
.alert {
}
In my form code I have something like this that indicates the alert:
if($model->request_status == 'On Going!')
{
return ['class' => 'info'];
} else if($model->request_status == 'Done!')
{
return ['class' => 'success'];
} else if($model->request_status == 'Cancelled!')
{
return ['class' => 'danger'];
} else if($model->request_status == 'High Priority!')
{
return ['class' => 'warning'];
}
You need to override Bootstrap's CSS for .alert-success class with your own style.
The default is:
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
Or you can create your own CSS class like .alert-greener and use it in your PHP code by replacing success with greener.
Related
I want to create some tests checking the styles of elements. We use these custom CSS vars. Is there any way to get these in cypress instead of checking for e.g. RGB(0,0,0)?
Thx in advance!
If you use cy.should() alongside have.css, you can specify which CSS property to check, and the value.
Using a simple example from your image, it would look something like this:
cy.get('foo')
.should('have.css', 'min-width', '211px');
If there are more complex checks going on, you can always run the .should() as a callback.
cy.get('foo').should(($el) => {
const minHeight = +($el.css('min-height').split('px')[0]);
expect(minHeight).to.eql(40);
});
I found myself checking a lot of CSS values on elements, and opted to have a custom command that allowed me to pass in an expected object and check for all of those values.
Cypress.Commands.add('validateCss', { prevSubject: 'element' }, (subject, expected: { [key: string]: any }) => {
Object.entries(expected).forEach(([key, value]) => {
cy.wrap(subject).should('have.css', key, value);
});
});
const expected = { 'min-width': '211px', 'min-height': '40px' };
cy.get('foo').validateCss(expected);
Interacting with browser element or Dynamic CSS can be achieved in may ways ,
most use-full is cy.get() with the help of .should()
you can find here ( However i know you already checked this :) )
https://docs.cypress.io/api/commands/get#Get-vs-Find
for Example
cy.get('#comparison')
.get('div')
// finds the div.test-title outside the #comparison
// and the div.feature inside
.should('have.class', 'test-title')
.and('have.class', 'feature')
It is possible to evaluate a css variable fairly simply using getComputedStyle()
Cypress.Commands.add('cssVar', (cssVarName) => {
return cy.document().then(doc => {
return window.getComputedStyle(doc.body).getPropertyValue(cssVarName).trim()
})
})
cy.cssVar('--mycolor')
.should('eq', 'yellow')
where, for example
<html>
<head>
<style>
body {
--mycolor: yellow;
}
p {
background-color: var(--mycolor);
}
</style>
</head>
But asserting that <p> has --mycolor requires a dummy element to evaluate yellow to rgb(255, 255, 0).
Cypress.Commands.add('hasCssVar', {prevSubject:true}, (subject, styleName, cssVarName) => {
cy.document().then(doc => {
const dummy = doc.createElement('span')
dummy.style.setProperty(styleName, `var(${cssVarName})`)
doc.body.appendChild(dummy)
const evaluatedStyle = window.getComputedStyle(dummy).getPropertyValue(styleName).trim()
dummy.remove()
cy.wrap(subject)
.then($el => window.getComputedStyle($el[0]).getPropertyValue(styleName).trim())
.should('eq', evaluatedStyle)
})
})
it('compares element property to CSS variable', () => {
cy.cssVar('--mycolor').should('eq', 'yellow')
cy.get('p').hasCssVar('background-color', '--mycolor') // passes
cy.get('button').click() // change the css var color
cy.cssVar('--mycolor').should('eq', 'red')
cy.get('p').hasCssVar('background-color', '--mycolor') // passes
})
The complication is not really because of the CSS var, but because we are dealing with color names that are automatically translated by the browser CSS engine.
Full test page
<html>
<head>
<style>
body {
--mycolor: yellow;
}
p {
background-color: var(--mycolor);
}
</style>
</head>
<body>
<p>Some text, change the background from yellow to red.</p>
<button onclick="changeColor()">Change color</button>
<script>
function changeColor() {
document.body.style.setProperty('--mycolor', 'red')
};
</script>
</body>
</html>
Test log
Please help me solve a seemingly simple question. I have not found a solution to this problem. I tried using CSS and just changing the parameters - it doesn't work. I just need to remove or hide the border of the CKEditor 5 text box. How can I do this?
Thanks!
<textarea id="editor"><p>Text...🐺</p></textarea>
ClassicEditor
.create( document.querySelector( '#editor'), {
} )
.then( editor => {
const toolbarElement = editor.ui.view.toolbar.element;
toolbarElement.style.display = 'none';
editor.enableReadOnlyMode( 'my-feature-id' );
} )
.catch( err => {
console.error( err.stack );
} );
In angular by using ng-deep you can remove the border, please refer the below code
:: ng-deep .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
border: hidden
}
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'm trying to override the disposal of the DetailView widget by applying new css class but with no luck. I want all the records shown in the several instances of a DetailView widget to appear side by side. I create a class in app\web\css called detail1-view and apply it to the detaiview.php in vendor folder. The class has float:left, or display:inline-block in it, but none of the attributes work.
My Detailview is:
<?= DetailView::widget([
'model' => $model,
'attributes' => [
//'titulo',
'noticia',
// cria um array com a fotografia, em que
// carrega a path no campo fieldName da bd
[
'attribute'=>'fotodir',
'value'=>$model->fotodir,
'format' => ['image', ['width'=>'230','height'=>'200']],
],
],
]) ?>
and my detailview.php in folder vendor/yiisoft/yii2/widgets/... has in it the detail1-view class in the right place:
public $options = ['class' => 'detail1-view'];
My CSS:
.detail1-view {
display: inline-block;
width: 30%;
border:1px solid #000;
}
The DetailView continues to display one in top of another and not side by side.
Anybody has a solution for this issue ?
I solved it by myself.
The trick was to create another class with position:relative; and put the detailview widget inside it.
Here's the code for the view:
<div class="detail-disposal">
<?= DetailView::widget([
'model' => $model,
'options' => ['class' => 'detail1-view'],
'attributes' => [
//'titulo',
'noticia',
// cria um array com a fotografia, em que carrega a path no campo fieldName da bd
[
'attribute'=>'fotodir',
'value'=>$model->fotodir,
'format' => ['image',['width'=>'230','height'=>'200']],
],
],
]) ?>
and the css style used in app/web/css:
.detail-disposal{
position:relative;
width:100%;
}
DetailView CSS:
.detail1-view {
margin-left:20px;
margin-bottom:20px;
float:left;
width: 300px;
border:1px solid #000;
}
Now the detailview widget appears side by side every time a model is called.