I defined a #mixin with 4 properties, two of them, (font-fam and font-size) are being applied when I #include, but two (text-align and color) are not. Any help on why this is happening?
Here's the defined #mixin:
#mixin important-text {
font-family: vipnagorgialla;
font-size: 6px;
text-align: center;
color: rgb(153, 245, 4);
}
And here's where I called it:
footer {
display: flex;
height: 80px;
background-color: $mainColor;
#include important-text();
}
Related
This is the html:
<StripeCheckout className='payBtn' />
And this is how it looks right now:
And this is the .scss for it:
.payBtn {
display: block;
background-color: rgba(160, 255, 223, 0.596);
color: black;
font-size: 1.3rem;
line-height: 1;
font-weight: 200;
width: 100%;
margin: 0 auto;
padding: 1rem 0;
border: 0;
outline: none;
text-transform: uppercase;
cursor: pointer;
&:hover {
background-color: rgba(114, 250, 205, 0.699);
}
}
What I'm trying to make it look like:
what it needs to look like
Everything else on the page is styled according to the stylesheet. Even the size of the button of pay with card is. But the colors and stuff are not changing. Any help would be appreciated, thanks :D
We need to declare the top margin for .Article-UnorderedList when it goes after .Article-Paragraph.
We can write selector .Article-Paragraph+.Article-UnorderedList, but it is not suites with below code (in comments, I wrote why).
.Article
&-Paragraph
font-size: 16px
line-height: 18px
// In this line, we don't not know about ".Article-UnorderedList" yet.
// There could be a lot of unknown at advance selectors like ".Article-UnorderedList" below.
// So, we can't write "&.+Article-UnorderedList" here.
// Article-UnorderedList declaration begins here. Now we know about it and also about ".Article-Paragraph"
// So, this selector MUST know how to shift from ".Article-Paragraph"
&-UnorderedList
list-style-type: disc
list-style-position: outside
padding-left: 20px
>li
line-height: 18px
&:not(:first-child)
margin-top: 4px
// We need to declare the margin from .Article-Paragraph
// Some way to create .Article-Paragraph+.Article-UnorderedList HERE?
// Works but lame: we need to exit from &-UnorderedList level and re-declare styles
// for .Article-Paragraph
&-Paragraph+.Article-UnorderedList
margin-top: 16px
You could set a global variable in your parent selector and then use it in your UnorderedList element.
.Article
&-Paragraph
$parent: & !global
font-size: 16px
line-height: 18px
&-UnorderedList
list-style-type: disc
list-style-position: outside
padding-left: 20px
>li
line-height: 18px
&:not(:first-child)
margin-top: 4px
#{$parent} + &
margin-top: 16px
Your result:
.Article-Paragraph {
font-size: 16px;
line-height: 18px;
}
.Article-UnorderedList {
list-style-type: disc;
list-style-position: outside;
padding-left: 20px;
}
.Article-UnorderedList > li {
line-height: 18px;
}
.Article-UnorderedList > li:not(:first-child) {
margin-top: 4px;
}
.Article-Paragraph + .Article-UnorderedList {
margin-top: 16px;
}
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
In SASS's class selecter, I want to select parent's sibling.
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// textarea:disabled & {
// background: #efefef;
// }
}
Compiled above sass code,
.bw-textarea textarea:disabled {
background: #efefef;
}
But I want to show result like this css code...
How to select like this in sass?
textarea.bw-textarea:disabled {
background: #efefef;
}
You gotta use #root in this case. It's pretty simple
This link will give a clear idea about this selector
.bw-textarea {
#at-root textarea#{&}:disabled{
background: cyan;
}
}
This will compile to
textarea.bw-textarea:disabled {
background: cyan;
}
See this PEN
This is what your looking for:
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
&:disabled {
background: #efefef;
}
}
Check out this SO answer for a lil more idea on the nested pseudo selectors
Sass parent selector and hover?
And of course check the sass docs
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
Given the following Sass:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
& {
&:hover {
border: 1px solid salmon;
}
}
width: 25px;
height: 25px;
content: "";
}
}
The resulting CSS compiles to:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
}
div.test:before {
width: 25px;
height: 25px;
content: "";
}
div.test:before:hover {
border: 1px solid salmon;
}
What I am attempting to do is generate div.test:hover:before (the current output is before:hover).
NOTE: I am able to generate the expected CSS by using the following Sass:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:hover {
&:before {
border: 1px solid salmon;
}
}
&:before {
width: 25px;
height: 25px;
content: "";
}
}
However I would like to know if it is possible using the first nested approach or some modification of it.
The goal was to avoid having to repeat &:before if there was such a way to do so using Sass syntax. I am also OK with knowing it isn't possible.
While initially the plan was to have '&' available in SassScript as a string that could be manipulated so that you could insert values wherever you wanted, those plans have been abandoned for 3.3 due to complication. Unfortunately you'll have to wait a while to be able to do this. At the moment '&' is immutable and just means "whatever the selector chain up to this point is".
EDIT (2020.02.15):
it is now technically possible to achieve this with recent versions of dart-sass:
#use "sass:selector";
#mixin unify-parent($child) {
#at-root #{selector.unify(&, $child)} {
#content;
}
}
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
width: 25px;
height: 25px;
content: "";
#include unify-parent(":hover") {
border: 1px solid salmon;
}
}
}
Sources:
https://sass-lang.com/blog/the-module-system-is-launched
https://sass-lang.com/documentation/style-rules/parent-selector#advanced-nesting