I'm currently doing a project in Twine and am using the Sugarcube format. I can't figure out how to style individual passages using CSS. I've tried creating classes in CSS and then tagging a passage with that class's name, but it won't work.
The SugarCube documentation lists a number of ways to style a passage based on passage tags. So, if you tagged a passage with "forest" these examples are given:
→ Using class selectors on <body>
body.forest { background-image: url(forest-bg.jpg); }
body.forest .passage { color: darkgreen; }
body.forest a { color: green; }
body.forest a:hover { color: lime; }
→ Using [data-tag~="…"] attribute selectors on <body>
body[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
body[data-tag~="forest"] .passage { color: darkgreen; }
body[data-tag~="forest"] a { color: green; }
body[data-tag~="forest"] a:hover { color: lime; }
→ Using [data-tag~="…"] attribute selectors on <html>
html[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
html[data-tag~="forest"] .passage { color: darkgreen; }
html[data-tag~="forest"] a { color: green; }
html[data-tag~="forest"] a:hover { color: lime; }
Make sure you put the CSS you use in your story's Stylesheet section.
Related
I'm trying to create an hover effect for elements without the class 'is-current' but somehow the following SCSS does not work as expected:
.class {
&:not(.is-current):hover {
color: #fff;
}
&.is-current {
color: #000;
}
}
I cannot figure out why the generated css is this:
class::active, class::focus, class::hover {
background: #fff;
}
I already tried &:not(".is-current") but the result is the same.
Does somebody know how to achieve this?
Thanks in advance!
The following works pretty normal for me,
.some {
&.is-current { color: blue }
&:not(.is-current):hover { color: red }
}
and the output is
.some.is-current {
color: blue;
}
.some:not(.is-current):hover {
color: red;
}
just like you expect, which works fine:
.some.is-current { color: blue }
.some:not(.is-current):hover { color: red }
<span class="some">One</span> · <span class="some is-current">One</span>
Perhaps there's something else to your problem.
I have a project where legacy code has classes like
promo game-promo
I've got the chance to clean up the css by changing to scss but the issue I'm trying to cover is I'd like to nest promo and have game- prepend the parent.
.promo {
display: flex;
game-& {
color: black;
}
}
I'd have liked the above to work but it doesn't and wondering if anyone has come across any ways of achieving what I'm after?
.game-promo {
color: black;
#at-root .promo {
display: flex;
}
}
It seems its not possible so after re-jigging the code I have now got this.
You can't do what you're trying. The "&" is used to get the current selector, in your case : game-.promo or .game-.promo if you add the class selector but it can't work.
In your case, you can do :
.game-promo {
color: black;
.promo {
display: flex;
}
}
Or rename your classes name : (I give an example with inverting the logic of your names)
Parent with ".promo"
Child with ".promo-game"
So you could do :
.promo {
//properties
&-game {
//properties
}
}
It is possible but not very pretty (code on jsFiddle):
/** see https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a */
#function parse-dotless($class) {
$this: quote($class);
#return if(str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
}
.promo {
color:yellow;
#at-root .game-#{parse-dotless(&)} {
color: blue;
}
}
<span class="promo">Hello</span>
<span class="game-promo">World</span>
You cannot do exactly what your snippet states using only the & feature. Instead you could build modifier classes like this:
.btn {
&-primary {}
&-secondary {}
}
Which is translated to:
.btn-primary {}
.btn-secondary {}
In your code example, you can invert the rule names:
.promo {
display: flex;
&-game {
color: black;
}
}
Read more about the sass-ampersand
In my scss code I'm trying to make placeholder like:
%input__label {
color: red;
&_content {
color: blue;
}
}
And then extend it:
.input__label {
#extend %input__label;
}
When I'm trying to compile that code only input__label compiles, but input__label_content doesn't:
.input__label {
color: red;
}
(But for example with pseudo elements - &::after everything works fine)
Why is this hapenning? I'm using node v7.10.1 and node-sass v4.5.3.
Use a mixin instead of an extend:
#mixin input__label {
color: red;
&_content {
color: blue;
}
}
.input__label {
#include input__label;
}
The functionality to do it via extends is purposefully disallowed:
https://github.com/sass/sass/commit/face3172930b515ac2040e450d4db3ffe01c31b5
How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.
in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.
As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.
So you just need to apply this CSS:
/* When the input is not focused */
md-input-container label {
color: red;
}
/* When the input is focused */
md-input-container.md-input-focused label {
color: blue;
}
Have a look at this Plunkr Demo.
In Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
In dummy.component.ts:
#Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.
I'm using Angular 8.2.2 and Angular Material 8.2.2
For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:
way 1: using view encapsulation set to none and then writing the styles in the components css file, like #user2245995 pointed out in the answer above.
Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated.
read more: https://angular.io/guide/component-styles#!#-deep-
I tried to be as deterministic as possible for the color of a mat input and I dare to share the result here, hoping it will help some others (the placeholder color customization need is handled, as asked in the question):
CSS custom properties used
Note: The colors are considered different when the focus is here or not, that is why we have 2 blocs in the following:
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS styling
.mat-form-field {
&.mat-focused {
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder {
color: var(--placeholder-focused-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-focused-color);
}
> .mat-placeholder-required {
color: var(--asterisk-focused-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-focused-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-focused-color);
}
background-color: var(--underline-focused-color);
}
}
}
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-color);
&::placeholder {
color: var(--placeholder-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-color);
}
> .mat-placeholder-required {
color: var(--asterisk-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-color);
}
background-color: var(--underline-color);
}
}
}
.mat-input-element::-webkit-input-placeholder {
color: red;
}
this is if you use a structure similar with this one:
<input
matInput
[placeholder]="placeholder"
/>
Here is the plunker - http://plunker.co/edit/npLOW06U0aAVZmGAHv7U?p=preview
In style.css, I do
.icon-stack .icon-sign-blank: {
color: red;
}
.icon-stack .icon-trash: {
color: white;
}
but it does not changes color, what is that I am doing incorrect here?
It does change colour, but you have unnecessary colons : after both selectors, simply remove them:
.icon-stack .icon-sign-blank {
color: red;
}
.icon-stack .icon-trash {
color: white;
}
http://plunker.co/edit/6z6bMO1opw6zyxAz4DN4?p=preview
just declare a separate class e.g
.red{
color:red;
}
and include it when calling the icon class i.e
<i class="icon-stack red"></i>