https://codepen.io/stoplion/pen/bWoPLP
I've tried a number of ways to get this placeholder's background to not look like a display block (setting it's position to absolute, setting it's width) but nothing seems to work.
Any idea how to make the background 'hug' the text as it would in an inline element?
#mixin optional-at-root($sel) {
#at-root #{if(not &, $sel, selector-append(&, $sel))} {
#content;
}
}
#mixin placeholder {
#include optional-at-root('::-webkit-input-placeholder') {
#content;
}
#include optional-at-root(':-moz-placeholder') {
#content;
}
#include optional-at-root('::-moz-placeholder') {
#content;
}
#include optional-at-root(':-ms-input-placeholder') {
#content;
}
}
input {
padding: 10px;
width: 400px;
}
input {
#include placeholder {
transform: translateX(-9px);
background-color: rgba(29, 146, 237, 0.15);
padding: 5px 5px;
color: #333;
float: left;
width: 20px;
}
}
Edit
Inspecting the shadow dom element.. the input::-webkit-input-placeholder appears to get a display: block !important;
Better question is..
How to change the -webkit-input-placeholder to an inline element?
Removing the transform: translateX(-9px); line makes the input text and background line up flush with the cursor.
https://codepen.io/anon/pen/oWGrad
Removing the padding could take out the whitespace as needed too.
Increase your specificity. try label + input {
https://codepen.io/anon/pen/JNrgjZ
Related
I have the following scss styles defined in a separate file
.radio-button-focused {
background-color: $PURPLE;
text-align: left;
opacity: 1;
width: px-to-rem(1248px);
margin-bottom: px-to-rem(15px);
#include truncate;
}
.radio-button {
background-color: $BLACK;
text-align: left;
opacity: 1;
width: px-to-rem(1248px);
margin-bottom: px-to-rem(15px);
#include truncate;
}
Both of them are being applied to a button
But the problem is that radio button is overwritting the color of radio-button-focused
I understand that I could use !important , or just use one of them instead of using them both at the same time. But if I was forced to use both, can something else be done to fix this?
The literal order in the CSS file matters. If two rules have the same specificity, the last one is applied. Move .radio-button before .radio-button-focused. You could also make your focused selector more specific. .radio-button.radio-button-focused for example.
Here's class B before A as an example.
.b
{
color: red;
}
.a
{
color: blue;
}
<div class="a b">Hi</div>
And here's A before B.
.a
{
color: blue;
}
.b
{
color: red;
}
<div class="a b">Hi</div>
I have a special case where my styling needs to be applied to both Print media and when the <body> has a special class to detect, let's just call this class .is-pdf-mode.
In my SCSS, I tried to use #content to avoid repeating CSS but somehow, the resulted CSS doesn't generate a correct selector for the <body> case, I cannot use & selector inside this mixin. So far this is my attempt.
SCSS:
#mixin query-print {
#media print {
#content;
}
.body.is-pdf-mode {
#content;
}
}
.box {
width: 200px;
height: 200px;
background: lightsalmon;
margin: 15px;
#include query-print {
background: green;
}
}
#media print {
// Default styling only apply for print
html,
body,
page[size="A4"] {
padding:0px;
margin:0px;
width: 210mm;
height: 297mm;
}
body {
-webkit-print-color-adjust: exact !important;
zoom: 100%;
}
}
HTML:
<div class="body">
<div class="box">
hello
</div>
</div>
<div class="body is-pdf-mode">
<div class="box">
hello
</div>
</div>
I understand that by writing .body.is-pdf-mode inside that mixin, that would mean .box .body.is-pdf-mode, it should be .body.is-pdf-mode .box instead. So, my question is what's the correct way to write CSS in this situation ?
Codepen attempt: https://codepen.io/DieByMacro/pen/xoLNpE
Update 1: rewrite my CSS inside query-print mixin:
If I write like this:
.box {
width: 200px;
height: 200px;
background: lightsalmon;
margin: 15px;
}
#include query-print {
.box {
background: green;
}
}
Obviously this will work, but in my real project we've adopted using #include mixin inside selector. By applying this strategy, it means re-writing a lot of selector, so I think this would be my last resort when there's no other choices.
Thanks,
You can use #at-root and &:
#mixin query-print {
#media print {
#content;
}
#at-root.body.is-pdf-mode #{&} {
#content;
}
}
With your example, it will return:
#media print {
.box {
background: green;
}
}
.body.is-pdf-mode .box {
background: green;
}
SASS #at-root documentation
I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722
I have a set of icons with different colors and each color is used with different status declared with CSS classes. For example, <span class="icon icon--app"><span> gives a gray app icon while <span class="icon icon--app icon__light icon__selected"><span> gives a white app icon.
The following code is written in SCSS.
span.icon {
display: inline-block;
width: 32px;
height: 32px;
&.icon--app {
background: url(../images/app_gray.png);
&.icon__selected {
background: url(../images/app.png);
}
&.icon__light {
background: url(../images/app_gray.png);
&.icon__selected {
background: url(../images/app_white.png);
}
}
}
&.icon--device {
background: url(../images/device_gray.png);
&.icon__selected {
background: url(../images/device.png);
}
&.icon__light {
background: url(../images/device_gray.png);
&.icon__selected {
background: url(../images/device_white.png);
}
}
}
}
The problem is, there's a long list of CSS rules as above, which shares much similarity for app and device and other icons. I wonder if I can simplify these CSS rules using SASS?
I think you can use mixin in Sass:
e.g.
#mixin icon($type) {
.icon-#{$type} {
background: url(../images/#{$type}_gray.png);
}
}
#include icon(app);
#include icon(device);
I created a mixin for you:
#mixin icon($type) {
&.icon--#{$type} {
background: url(../images/#{$type}_gray.png);
&.icon__selected {
background: url(../images/#{$type});
}
&.icon__light {
background: url(../images/#{$type});
&.icon__selected {
background: url(../images/#{$type}_white.png)
}
}
}
}
span.icon {
display: inline-block;
width: 32px;
height: 32px;
#include icon(app);
#include icon(device);
}
Take a look at the following example:
#mixin placeholder ($color) {
&.-moz-placeholder {
color: $color;
}
&:-ms-placeholder {
color: $color;
}
}
#include placeholder(#999);
But instead I want to insert multiple properties not just the color in the placeholder style. Like this:
#mixin placeholder ($properties) {
&.-moz-placeholder {
$properties;
}
&:-ms-placeholder {
$properties;
}
}
#include placeholder(color: #999, text-shadow: 1px 0px 0px #000);
Is this possible, and if so how?
As #dave suggests, you can accomplish this using Sass's #content directive. Here's what your example would look like using that syntax:
#mixin placeholder {
&.-moz-placeholder {
#content;
}
&:-ms-placeholder {
#content;
}
}
#include placeholder {
color: #999;
text-shadow: 1px 0px 0px #000;
};
Note that to pass a content block, you use curly braces rather than parentheses. You can read more in the SASS documentation.
Are you looking for "Passing Content Blocks to a Mixin"?
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content