I have a DatePicker widget for which i need to apply the custom styles for it. To achive it, what i have done is, in applications main css file, I have added the css styles as below
.dRPLable {
font-size: 10px;
font-weight: bold;
color: gray;
}
.dRPBtn {
background-color: #38B0DE;
background: #38B0DE;
color: white;
}
.dRPLB {
background: #EEEEEE;
}
.dRPPopup {
width: 8em;
height: 2em;
}
.mycal .datePickerPreviousButton { visibility: visible; color: gray; }
.mycal .datePickerNextButton { visibility: visible; color: gray; }
.mycal .datePickerWeekdayLabel{background: white;}
.mycal .datePickerMonthSelector { background: white; }
.mycal .datePickerMonth { background: white;color: orange;}
.mycal .datePickerWeekendLabel{background: white;}
.mycal .datePickerDayIsValue { background: orange;}
.mycal .datePickerDayIsWeekend { background: #D9D9D9;}
Then everything is applying perfectly
I am making it as a independent custom widget, for that i have created a separate css file.
To access it I have created a resources interface as below,
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.ImageResource;
public interface DateRangeTypePickerResources extends ClientBundle {
DateRangeTypePickerResources INSTANCE = GWT
.create(DateRangeTypePickerResources.class);
/*
* #Source("DocumentImg.jpg") ImageResource getDocumentImg();
*/
#Source("down.png")
ImageResource getDownImg();
#Source("up.png")
ImageResource getUpImg();
public interface DateRangeTypePickerCssStyle extends CssResource {
String dRPLable();
String dRPBtn();
String dRPLB();
String mycal();
String dRPPopup();
String datePickerPreviousButton();
String datePickerNextButton();
String datePickerWeekdayLabel();
String datePickerWeekendLabel();
String datePickerMonthSelector();
String datePickerMonth();
String datePickerDayIsValue();
String datePickerDayIsWeekend();
}
#Source("../widget/DateRangeTypePicker.css")
DateRangeTypePickerCssStyle DateRangeTypePickerCss();
}
How i am accessing those methods as below
public class DateRangePicker extends Composite {
static DateRangeTypePickerResources resources = GWT
.create(DateRangeTypePickerResources.class);
DateRangeTypePickerCssStyle css = DateRangeTypePickerResources.INSTANCE
.DateRangeTypePickerCss();
static {
DateRangeTypePickerResources.INSTANCE.DateRangeTypePickerCss()
.ensureInjected();
}
public DateRangePicker(DateRangePickerModel dateRangePickerModel) {
Label startDateLabel = new Label("Start Date");
startDtToday.setStylePrimaryName(css.dRPLabel());
flexTable.setWidget(0, 0, startDateLabel);
DatePicker startDatePicker = new DatePicker();
startDatePicker.setStyleName(css.mycal());
}
}
Here style is applying for Label. But Style is not applying for DatePicker.
How can i apply the custom style to DatePicker from the CssResources class?
Before posting such a huge and repeated question search if the question is already asked or not... There are many similar question to it.
And the answer for your question is in the following link
ClickHere
Related
This is the usual list where one of the items is .open
for this I want to check if the parent (in this case is .item but its not relevant i think) has a specific class.
I've tried > but it doesnt seem to work.
Essentially how to put this:
&.open .info {
display: none;
}
&.open .inner-info {
display: flex;
}
inside of the their specific classes:
.info {
display: flex;
/* some other stuff */
}
.inner-info {
display: none;
/* some other stuff */
}
all of this is inside an .item{} block
So how do i have it so that i only have two blocks inside the .item{}?
It seems overkill to me, but you can use a hacky way to do that using a mixin and various functions. Please note that this will work for your specific example but probably not for something else.
I used the helper functions str-to-list and nth-delete, which are not native to SASS.
#mixin parentWithClass($class) {
$parent: nth-delete(str-to-list(#{&}), -1);
#at-root #{selector.replace(&, $parent, #{$parent}#{$class})} {
#content;
}
}
.item {
.inner {
color: blue;
#include parentWithClass(".open") {
color: orange;
}
}
.inner-info {
color: red;
#include parentWithClass(".open") {
color: grey;
}
}
}
You can also nest -info in inner.
I'm new to sass, could you please explain what the following statement mean?
[class*='icon--']::before {
#mixin icon;
}
Doe's it mean; add to ::before pseudo of all elements with a class, which begins with icon-- the icon mixin?
The above code is then used like this:
[class*='icon--']::before {
#mixin icon;
}
.icon--bag::before {
content: '\e602';
}
.icon--book::before {
content: '\e618';
}
Does it mean that the above code will be converted to this?
.icon--bag::before {
#mixin icon;
content: '\e602';
}
.icon--book::before {
#mixin icon;
content: '\e618';
}
It selects every class that contains the icon-- string and adds the icon mixin to its before pseudo element .
So lets say that mixin icon looks like
#mixin icon {
display: inline-block;
}
Then icon--bag would be
.icon--bag::before {
display: inline-block; /* from the mixin */
content: '\e602';
}
I have the following HTML <div class="parent green"></div>
The green class may or may not be added. It is dynamic. It may also be another name.
In SASS how do I give properties to a .child element of parent when class green is chained to it?
I tried:
.parent {
.child {
.green & {
color: green;
}
}
}
It doesn't work.
I also tried the following which works but I am looking for something similar to the sass above. The code will become repeatable below because I have to add child each time for every dynamic class.
.parent {
&.green {
.child {
color: green;
}
}
}
I'm trying to get a structure like this if possible with sass:
.parent {
.child {
.green & { /* when .parent.green */
color: green;
}
.blue & { /* when .parent.blue */
color: blue;
}
.text-align-right & { /* when .parent.text-align-right */
text-align: right;
}
etc...
}
}
& is treated as parent selector reference in Sass, because of this your code doesn't work since it refers wrong selector.
Use of & directly will not help here, but your goal can be achieved by using mixins, for example:
#mixin child($class) {
&.#{$class} {
.child {
#content;
}
}
}
.parent {
#include child(green) {
color: green;
}
#include child(blue) {
color: blue;
}
#include child(text-align-right) {
text-align: right;
}
}
This piece of code produces result that you want to get, you can check in by yourself on sassmeister.
I'm trying to make a mixin that will let me create adapted blocks of code depending on what variable name you up in.
$foo: #00A9EC;
#mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
color: $color;
&:hover {
color: adjust-lightness($color, 10); }
&:active {
color: adjust-lightness($color, -10); } } }
#include menu-color($foo);
outputs:
.color-foo a.level2,
.color-foo a.level2:visited {
color: #00A9EC; }
.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
color: #20C0FF; }
.color-foo a.level2:active,
.color-foo a.level2:visited:active {
color: #0084B9; }
In sass you can do this using map, you just pass the variable name instead of the variable itself:
$colors: (
-black: #000,
-blue: #088DC6
);
#mixin generateBgColor($colorName) {
.bg-color#{$colorName} {
background-color: map-get($colors, $colorName);
}
}
#include generateBgColor("-blue");
This will generate class:
.bg-color-blue {
background-color: #088DC6;
}
You achieve this also in less with standard variables, just by using curly brackets and double at character:
#blue: #088DC6;
.generate-bg-color(#color) {
.bg-color-#{color} {
background-color: ##color;
}
}
.generate-bg-color(~"blue");
You should not name CSS classes after specific colors. You would regret that. Just think, if you want to make the color red later on, you would need to go back over all your html and change the classes.
The reason we have CSS is so that you don't have to embed style information in the markup.
Use a semantic class the describes the data, not how it is displayed:
$foo: #00A9EC;
#mixin menu-color($name, $color) {
.custom-#{$name} a.level2,
.custom-#{$name} a.level2:visited {
color: $color;
&:hover {
color: adjust-lightness($color, 10); }
&:active {
color: adjust-lightness($color, -10); } } }
#include menu-color(profile, $foo);
And then in your HTML <div class="custom-profile">.
That way, two years from now when you want to make it black, and underlined (or whatever), you don't have to dig through your html and add a new '.underlined-and-black-color` class to all of those elements. You just change your SCSS in one place.
I have the following sass code:
.class{
label{
color:#fff;
.disabled &{color:#333; }
}
}
which outputs
.disabled .class label
Is there a way to output the parent selector without any grandparent selectors being included? Like so:
.disabled label
There's no way I know of in SASS to pick and choose from ancestor selectors when using a parent reference. With your code, though, a little reorganization can get you the same result:
label {
.class & {
color: #fff;
}
.disabled & {
color:#333;
}
}
Compiles to:
.class label {
color: #fff; }
.disabled label {
color: #333; }
Even though hopper is not enterly wrong, you can actually select grand-parent with variables.
You can achieve what you want with this:
.class{
label{
color:#fff;
$selector: nth(&,1);
$direct-parent: nth($selector, length($selector));
#at-root #{$direct-parent} {
.disabled &{color:#333; }
};
}
}
Which will generate this css:
.class label {
color: #fff;
}
.disabled label {
color: #333;
}
The parent selector is always a reference to the entire resolved selector from the previous level of nesting. There is no concept of "parent" or "grandparent", especially when concatenating selectors or using the parent selector at the end muddies the water.
Disclaimer: I do not recommend doing this unless you really really need to.
Starting with Sass 3.4, you can extract portions of a selector by using & as a variable. When used this way, you'll get a list of list of strings (which can be looped over, etc.).
Extracting a part or slice of a selector
This function here uses the same style of arguments as the string-slice function:
#function selector-slice($sel, $start: 1, $end: -1) {
$collector: ();
#each $s in $sel {
// calculate our true start and end indices when given negative numbers
$_s: if($start > 0, $start, length($s) + $start + 1);
$_e: if($end > 0, $end, length($s) + $end + 1);
$c: ();
#for $i from $_s through $_e {
$c: append($c, nth($s, $i));
}
// prevent duplicates from creeping in
#if not index($collector, $c) {
$collector: append($collector, $c);
}
}
#return $collector;
}
/* complex example */
.one-a, .one-b {
two {
three {
color: red;
&:before {
#at-root #{selector-slice(&, 2, 3)} {
color: green;
}
}
}
}
}
/* your example */
.class {
label {
color:#fff;
#at-root #{selector-slice(&, -1, -1)} {
.disabled & {
color:#333;
}
}
}
}
Output:
/* complex example */
.one-a two three, .one-b two three {
color: red;
}
two three:before {
color: green;
}
/* your example */
.class label {
color: #fff;
}
.disabled label {
color: #333;
}
As an added bonus, you can use this function to reverse the order of the selectors by passing in the larger index before the smaller one.
.one-a, .one-b {
two {
three {
color: red;
&:before {
#at-root #{selector-slice(&, 3, 2)} {
color: green;
}
}
}
}
}
Output:
.one-a two three, .one-b two three {
color: red;
}
three:before two {
color: green;
}
Related: Modifying the middle of a selector in Sass (adding/removing classes, etc.)
Replacing one class with another
Alternately, you could just use the selector-replace function from the standard library if what you're looking to do is replace one class with another.
.class {
label {
color:#fff;
#at-root #{selector-replace(&, '.class', '.disabled')} {
color:#333;
}
}
}
Output:
.class label {
color: #fff;
}
.disabled label {
color: #333;
}