This's my susy config
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: right,
container: 1000px,
container-position: center,
columns: 12,
gutters: .15,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: show,
color: rgba(#66f, .25),
output: overlay,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
Test code:
.test {
#include gutter();
margin-bottom: gutters();
}
After compiling they'r return nothing...
Or
.test {
margin-left: span(2) + gutters(2);
}
Displays an error: Invalid null operation: "15.75092% plus null"
What's the problem?
Your layout settings are wrong, so your gutters are undefined and hence the null values you are getting.
It's gutter-position: after, not gutter-position: right. (The valid settings are these).
See it working here.
(Spoiler alert, output for your code is
.test {
margin-right: 1.0989%;
margin-bottom: 1.0989%;
}
.test2 {
background: red;
margin-left: 22.72766%;
}
Related
I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}
If I call SASS command as shown below :
call sass C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.scss C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.css
i get the following error :
Error: Invalid CSS after "": expected media query list, was ""only screen an..."
on line 348 of C:/Users/simon/source/repos/Pippo/ClickR/Styles/foundation/components/_top-bar.scss
from line 22 of C:/Users/simon/source/repos/Pippo/ClickR/Styles/_foundation.scss
from line 3 of C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.scss
Use --trace for backtrace.
Here is the code that generates the error:
_top-bar.scss
....
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
....
#media #{$topbar-media-query} {
.top-bar {
background: $topbar-bg;
#include clearfix;
overflow: visible;
.toggle-topbar { display: none; }
.title-area { float: $default-float; }
.name h1 a { width: auto; }
input,
.button {
line-height: 2em;
font-size: emCalc(14px);
height: 2em;
padding: 0 10px;
position: relative;
top: 8px;
}
&.expanded { background: $topbar-bg; }
}
....
How can I solve it?
Thanks,
Simone
The problem is just a syntax error on the assignment to $topbar-media-query.
You should escape a double quote inside a string or you should use a single quote.
In your example you do not need a string for the CSS property min-width, so the easier thing to do is:
Instead of
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
Try
$topbar-media-query: "only screen and (min-width:#{$topbar-breakpoint})" !default;
I'm using Electron React Boilerplate and i'm trying to make beautiful rounded corners but instead i'm getting white square corners. Do someone know any solution?
This is what my app corners looks like
This is my BrowserWindow code:
mainWindow = new BrowserWindow({
show: false,
width: 396,
height: 520,
transparent: true,
frame: false,
resizable: false,
webPreferences: {...preferences}
});
Edit: Here is more code
import React from 'react';
import styles from './Home.css';
import Titlebar from './FirstOpenScreen/Titlebar';
export default function Home(): JSX.Element {
return (
<div className={styles.home}>
<Titlebar />
<h1 className={styles.h1}>Hello, world.</h1>
</div>
);
}
And my CSS:
div.home {
width: 100%;
height: 100vh;
background-color: #252525;
color: white;
border-radius: 10px;
overflow: hidden;
}
Thanks everyone for the help. I was analyzing my own code and tried a CSS property that I saw on the internet, and it ended up helping me.
The solution is simply to add overflow: hidden to the CSS file to work.
body {
border-radius: 10px;
overflow: hidden;
}
In this SCSS code, I'm using mixin btn-structure and extend %red-color to get all declarations under one class contrary to my expectation SCSS output two separate rules for the same class as shown in output below:
%red-color{
color: red }
#mixin btn-structure
($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow }
}
.link-btn{
#include btn-structure($text-case: 'uppercase', $decoration: underline);
#extend %red-color
}
OUTPUT
.link-btn {
color: red;
}
.link-btn {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
I don't want the SASS to output two separate rules belonging to same class how to get SASS to output one rule if that belongs to one class.
This is the actual behaviour and a use-case of Sass #extend.
Explanation
To make it clear, update your code as below
%red-color{
color: red
}
#mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow
}
}
.link-btn{
#extend %red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
.test-class{
#extend %red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
Which would compile as,
.link-btn, .test-class {
color: red;
}
.link-btn {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
.test-class {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
As you could see, #extend is used to "share a set of CSS properties from one selector to another", which can be clubbed together (.link-btn, .test-class). Whereas, #include is used to insert the styles where ever required, which is not clubbed.
Solution
For your requirement, you can resort to #include and declare a mixin #mixin red-color as below,
%red-color{
color: red
}
#mixin red-color{
color: red
}
#mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow
}
}
.link-btn{
#include red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
Output
And the compiled css will be,
.link-btn {
color: red;
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
Hope this helps.
I'm trying to use a simple map in sass to create margin classes.
$margins:(
"5": 5px,
"10": 10px,
"15": 15px,
"20": 20px,
"25": 25px,
"30": 30px
);
#each $margin in $margins{
.u-mt-#{$margin}{
width: $margin !important;
}
}
In SassMeister I'm getting the error.
Invalid CSS after ".u-mt-5 ": expected selector, was "5px"
Fixed it thanks
#each $margin, $margin in $margins{
.u-mt-#{$margin}{
width: $margin !important;
}
}