Using Sass, and Compass I would like to import one font file, but have 3 different sizes for it. But this question is more basic than that, The following code is an example of how I think maybe, but not sure sass class inheritance can work. what would be the best practice for something like this?
Something like
#include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf"));
.Kingthings {
font-family:"Kingthings Kelltika";
.small{
font-size:.7em;
}
.medium{
font-size:.1em;
}
.large{
font-size:2em;
}
}
and then in the html say something like
<div class= "Kingthings small">
Your selectors will never be reached how you have defined them:
Here is an easy way to do what you are looking for:
http://jsfiddle.net/twT2e/
<div class= "Arial font-lg">
Sample Text
</div>
.Arial { font-family:"Arial"; }
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
If you want to use SASS to provide some sort of hierarchy to your selectors it would look something like this;
<div class= "Arial">
<div class="font-sm">Sample Text1</div>
<div class="font-md">Sample Text1</div>
<div class="font-lg">Sample Text1</div>
</div>
.Arial { font-family:"Arial";
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
}
Related
I have this navigation in HTML that looks like following:
<nav>
<div class="nav-item lvl-0">
<a></a>
<div class="sub">
<div class="nav-item lvl-1">
<a></a>
</div>
</div>
</div>
</nav>
I have some styles applied to all as in the navigation in the defaults layer, now I want to add separate styles for each level. I have this
nav {
.nav-item {
a {padding:0;}
&.lvl-0 {
> a {#extend .size-18;}
}
&.lvl-1 {
> a {#extend .size-13;}
}
}
}
Is there a way to write something along these lines:
nav {
.nav-item {
a {padding:0;
.lvl-0 > & {#extend .size-18;}
.lvl-1 > & {#extend .size-13;}
}
}
}
I want to color grid lines, depending on a condition.
I try this:
Java:
gridEtudiant.setClassNameGenerator(t -> {
if (t.getEtud_numero().startsWith("2")) {
return "error_row";
}
return "";
});
Css:
td.error_row {
background-color: red;
}
HTML
<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>
We can see the 'class="error_row"' but it's not colored in red.
Vaadin version is 13.0.1
Your java code looks good.
Make sure you have a html file like webapp/frontend/styles/shared-styles.html containing something like:
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
[part~="cell"].error_row {
background: red;
}
</style>
</template>
</dom-module>
If you then have your Layout containing the grid annotated with #HtmlImport("frontend://styles/shared-styles.html") (which you already seem to have as your custom css class is already applied) it should work.
Example:
grid.addColumn(Customer::getFirstname).setHeader("Firstname");
grid.addColumn(Customer::getLastname).setHeader("Lastname");
grid.addColumn(Customer::getEmail).setHeader("Email");
grid.setClassNameGenerator(customer -> {
if (customer.getFirstname().equals("Marco")) {
return "error_row";
} else {
return "";
}
});
becomes:
I am using BEM Scss explain please how to select inside nth-child element.
I tried below format but it didn't work for me
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
</div>
</div>
</div>
MY BEM Scss I added nth-child 3rd element children element that is not working:
.bookearly-container {
&__row {
margin-bottom: 4.6rem;
& > :nth-child(3) {
&__discountcontainer { -- this element not selected
&:before {
display: none;
}
}
}
}
}
Can you please explain how to select? Thanks in advance.
You are using the child combinator (>) inside .bookearly-container__row(line 4 in your CSS example), and the only direct child there is .bookearly-container__col.
If you want to target the .bookearly-container__discountcontainer elements you need to adjust the selector nesting a bit.
Try using the #debug directive combined with the & selector to see what you are actually selecting, it's helpful when you get no other clues.
This is a straight-forward suggestion to solve it:
.bookearly-container {
#debug &; // .bookearly-container
&__row {
#debug &; // .bookearly-container__row
}
&__discountcontainer:nth-child(3) {
#debug &; // .bookearly-container__discountcontainer:nth-child(3)
&:before {
#debug &; // .bookearly-container__discountcontainer:nth-child(3):before
}
}
}
If you are depending on the child combinator (>) for some reason, you could nest it inside a &__col selector, like so:
.bookearly-container {
&__col {
// Targeting any class ending with "__discountcontainer"
& > [class$="__discountcontainer"]:nth-child(3) {
&:before {
#debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
}
}
}
}
I have this code to which displaying errors on my form
<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm">
<div *ngIf='thing.dirty && !thing.valid'>
<div class="err" *ngIf='thing.errors.required'>
Thing is required.
</div >
<div class="err" *ngIf='thing.errors.invalid'>
Thing is invalid.
</div >
</div>
But in case of thing has two errors in it the two error show up.
Lets say if my input has 5 validators so 5 divs will show up which is not nice.
How to display just one error div at a time?
You could create a custom pipe to get the first element of the errors object of the validator:
#Pipe({
name: 'first'
})
export class FirstKeyPipe {
transform(obj) {
var keys = Object.keys(obj);
if (keys && keys.length>0) {
return keys[0];
}
return null;
}
}
This way you would be able to display only one error:
#Component({
selector: 'my-app',
template: `
<form>
<input [ngFormControl]="form.controls.input1">
<div *ngIf="form.controls.input1.errors">
<div *ngIf="(form.controls.input1.errors | first)==='required'">
Required
</div>
<div *ngIf="(form.controls.input1.errors | first)==='custom'">
Custom
</div>
</div>
</form>
`,
pipes: [ FirstKeyPipe ]
})
export class MyFormComponent {
constructor(private fb:FormBuilder) {
this.form = fb.group({
input1: ['', Validators.compose([Validators.required, customValidator])]
});
}
}
See this plunkr: https://plnkr.co/edit/c0CqOGuzvFHHh5K4XNnA?p=preview.
Note: agreed with Günter to create a usable component ;-) See this article for more details:
http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/
If you have consistent markup for your error message blocks, then you can use css to display only the first message and hide the rest:
css
.message-block .error-message {
// Hidden by default
display: none;
}
.message-block .error-message:first-child {
display: block;
}
markup
<div class="message-block">
<span class="error-message" *ngIf="myForm.get('email').hasError('required')">
Email is required (first-child of message block is displayed)
</span>
<span class="error-message" *ngIf="myForm.get('email').hasError('email')">
Invalid email format (error message hidden by default)
</span>
</div>
<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm">
<div *ngIf='thing.dirty && !thing.valid'>
<div class="err" *ngIf='thing.errors.required'>
Thing is required.
</div >
<div class="err" *ngIf='!thing.errors.required && thing.errors.ivalid'>
Thing is invalid.
</div >
</div>
You could create a reusable component for showing errors so you don't need to repeat this code again and again.
This works and you don't have to hardcode the validations in you template like #Joes answer above.
Template:
<input id="password" placeholder="Password" type="password" formControlName="password" [(ngModel)]="password" [ngClass]="{'invalid-input': !formUserDetails.get('password').valid && formUserDetails.get('password').touched}">
<div class="validation-container">
<ng-container *ngFor="let validation of userValidationMessages.password">
<div class="invalid-message" *ngIf="formUserDetails.get('password').hasError(validation.type) && formUserDetails.get('password').touched">
{{validation.message}}
</div>
</ng-container>
</div>
CSS:
.validation-container div {
display: none;
}
.validation-container div:first-child {
display: block;
}
Angular2 behind the scene checks the status of the control and reacts accordingly. So if you don't want to have more validation at a time, you can logically play with AND(&&) or/and OR(||) or/and NOT(!) operators.
You can create a Custom Pipe that checks first error equals with specified error:
CUSTOM PIPE
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'equals'
})
export class Equals implements PipeTransform {
transform(errors: any, error: any, args?: any): any {
if (!errors)
return false;
const array = Object.keys(errors);
if (array && array.length > 0)
return errors[array[0]] === error;
return false;
}
}
You can have lots of error div but just one error will be shown:
// input is form.controls.input1
<div *ngIf="input.errors | equals:input.errors.required">Required</div>
<div *ngIf="input.errors | equals:input.errors.maxlength">MaxLength</div>
<div *ngIf="input.errors | equals:input.errors.pattern">Pattern</div>
I've seen somewhere the ability use * for ID or class selectors with SASS...what is the right way to do this?
For example I want to select all div id's inside a parent div. I would imagine something like this:
<div id="parent">
<div id="sub1">
<div class="icon"></div>
<div class="content"></div>
</div>
<div id="sub2">
<div class="icon"></div>
<div class="content"></div>
</div>
#parent {
#* {
}}
You can use only a css selector, like it:
#parent {
div[id] {
// styles
}
}
or
#parent {
div[id^='sub'] {
// styles
}
}
If the children are named in an orderly fashion, you could make it easier to update using the #for directive:
$num-of-children: 2
#for $i from 1 through $num-of-children
#sub-#{$i}
#extend %parent-children
#parent
%parent-children
//styles
In addition, if the ids are more arbitrary, you can pass a list into the #each directive to achieve a similar effect:
$children: sam ramond lemons butter
#each $child in $children
##{$child}
#extend %parent-children
#parent
%parent-children
//styles