How does nesting work in open-props?
this one doesn't work.
button.blue {
color: var(--blue-6);
background-color: var(--blue-0);
border: 1px solid var(--blue-1);
text-shadow: 0 1px 0 var(--blue-2);
&:hover {
background-color: var(--blue-1);
}
}
Related
With Tailwind CSS, my textarea's focus shows fine on the top, but it is cut off on the sides of the element:
These are the styles currently applied to the element:
.dark .dark\:text-slate-200 {
--tw-text-opacity: 1;
color: rgb(226 232 240/var(--tw-text-opacity));
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39/var(--tw-bg-opacity));
}
.dark .dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99/var(--tw-border-opacity));
}
.focus\:ring-theme-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(237 165 166/var(--tw-ring-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
textarea:focus {
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
I have tried adding overflow-x: visible to every element in the DOM tree down to the textarea, but that did not have any effect.
A demo is available here, it only works in dark mode so toggle the switch on the nav bar.
Something like this:
#mystery-functionality border-different-when-hover($selector) {
$selector {
border: 1px dashed currentColor;
}
$selector:hover {
border: 2px solid currentColor;
}
}
#use-mystery-functionality border-different-when-hover(nav > abbr);
#use-mystery-functionality border-different-when-hover(a.kebap);
#use-mystery-functionality border-different-when-hover(#bleepable-constructor);
which would compile to this:
nav > abbr {border: 1px dashed currentColor;}
nav > abbr:hover {border: 2px solid currentColor;}
a.kebap {border: 1px dashed currentColor;}
a.kebap:hover {border: 2px solid currentColor;}
#bleepable-constructor {border: 1px dashed currentColor;}
#bleepable-constructor:hover {border: 2px solid currentColor;}
Is that a thing?
Yes, this is possible by using #mixin, escaping the selector inside the mixin and passing the selector into the mixin as a string.
#mixin border-different-when-hover($selector) {
#{$selector} {
border: 1px dashed currentColor;
}
#{$selector}:hover {
border: 2px solid currentColor;
}
}
#include border-different-when-hover('nav > abbr');
#include border-different-when-hover('a.kebap');
#include border-different-when-hover('#bleepable-constructor');
See https://sass-lang.com/documentation/at-rules/mixin#arguments for reference on mixins with arguments.
Below is my scss code, it gives expected output. But I feel it looks dirty that the -nrb repeats in both __red and __green, is there a way to simplify this?
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
#extend .ui-grid-column-menu-button;
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
// no right border
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#extend .ui-grid-column-menu-button;
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
Also, what is the correct way of extending the underlying class? Right now I have hard-coded the class name in #extend in -nrb, some keywords like this
You can group red and green:
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
}
&__green {
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
}
&__red, &__green{
#extend .ui-grid-column-menu-button;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
I guess you could do some thing like this
$cell-header: '.cell-header';
#mixin headermixin ($cell-color, $cell-bgcolor) {
#extend .ui-grid-column-menu-button;
color: $cell-color;
background-color: $cell-bgcolor;
border: solid 1px $cell-color;
}
#{$cell-header} {
&__red {
#include headermixin($red-cell-color,$red-cell-bgcolor,.cell-header__red)
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#include headermixin($green-cell-color,$green-cell-bgcolor,.cell-header__green)
&-nrb{
#extend $cell-header__green
border-right: none;
}
}
}
Hope this helps
Thanks
I have the following LESS:
button {
background: #eee;
border: 1px solid #BBB;
color: #000;
&:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
&.correct {
background-color: #00ff00;
border: 1px solid #00ff00;
}
&.incorrect {
background-color: #ff0000;
}
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
}
}
I'm confused about how to add multiple additional classes. How can I make it so that if the button has a class of current and correct that the text color will be #00ff00 and if the classes are current and incorrect the text color will be #ff0000?
With LESS you can use the & selector to keep stacking class selectors to the same element.
button {
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
&.correct {
// add CSS here for button.current.correct
}
&.incorrect {
// add CSS here for button.current.incorrect
}
}
}
Alternatively if you don't like the deeper nesting:
button {
&.current.correct {
// add CSS here for button.current.correct
}
&.current.incorrect {
// add CSS here for button.current.incorrect
}
}
I'm trying to find out how I can customize the text in a input field with css.
What I want to do is to add a border to the text written in the input field.
I can customize the font-family, font-size with the "input" in css but when I add a border it applies on the input field.
JSfiddle trying to explain what I mean
<input type="text" placeholder="Add border to this text" />
body {
background-color: #ccc;
}
input {
border: 1px solid #000
width: 200px;
padding: 20px;
font-size: 20px;
}
I've tried searching but didn't find anything useful, I'm sure this is easy and hopefully someone can help me.
Thank you
Edit: I'm trying to get the text in the input field like this: http://i.imgur.com/zmBphb1.png
notice I have put an ID attribute on your input: id="myInput"
<input id="myInput" type="text" placeholder="Add border to this text" />
... and not the inputwindow itself.
and your CSS is below. Notice the #myInput::-webkit-input-placeholder. #myInput targets your input box, and the webkit bit is for google..moz is for firefox, and ms-input-placeholder is for Internet Explorer:
body {
background-color: #ccc;
}
input {
border: 1px solid #000
width: 200px;
padding: 20px;
font-size: 20px;
}
#myInput::-webkit-input-placeholder {
border-style:solid;
border-width:medium;
}
#myInput:-moz-placeholder {
border-style:solid;
border-width:medium;
}
#myInput:-ms-input-placeholder {
border-style:solid;
border-width:medium;
}
To change the font of the placeholder text to stroke, try this:
#myInput::-webkit-input-placeholder {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#myInput:-moz-placeholder {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#myInput:-ms-input-placeholder {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Your css code is not correct: you forgot the ;
http://jsfiddle.net/6Gevu/10/
input {
border: 1px solid #000;
width: 200px;
padding: 20px;
font-size: 20px;
}