I have a next.js react application and we're using TailwindCSS which is amazing. But i need to add my own custom css tags and i cant seem to get them to load into the application when compiling.
I have a 'core.css' which is looks like:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
*:not(i) {
#apply font-sans;
}
p {
#apply text-base mt-1 mb-1 pt-1 pb-1;
}
h1 {
#apply text-xl;
}
}
#layer utilities {
.toggle-checkbox:checked {
transition: all 0.5s ease-in-out;
right: 0;
border-color: #35c759;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #35c759;
transition: all 0.5s ease-in-out;
}
}
From what i can gather this should work, but when loading the page i cant find the class definitions when inspecting.
Any help would be appreciated.
Related
I have a custom animation that the regular Vue transition doesn't quite cover. I have it implemented elsewhere with a conditional v-bind:class, but that doesn't work well for conditional v-if blocks or v-for groups.
I need to add a class ('open') one frame after the element is entered as with v-enter-to, but I need it to never be removed from the element.
I then need it removed removed when leaving to trigger the closing animation.
Am I using Vue Transition wrong and this is perfectly possible within transition, or is there a way to add/remove the class around the enter/leave functionality?
.accordion {
overflow: hidden;
> div {
margin-bottom: -1000px;
transition: margin-bottom .3s cubic-bezier(.5,0,.9,.8),visibility 0s .3s,max-height 0s .3s;
max-height: 0;
overflow: hidden;
}
&::after {
content: "";
height: 0;
transition: height .3s cubic-bezier(.67,.9,.76,.37);
max-height: 35px;
}
&.open {
max-height: 8000px;
> div {
transition: margin-bottom .3s cubic-bezier(.24,.98,.26,.99);
margin-bottom: 0;
max-height: 100000000px;
position: relative;
}
&::after {
height: 35px;
max-height: 0;
transition: height .3s cubic-bezier(.76,.37,.67,.9),max-height 0s .3s;
}
}
}
<transition name="accordion" :duration="300">
<div class="accordion" v-if="equipmentSelections.length === 0">
<div>
<p>Begin by selecting equipment from the list</p>
</div>
</div>
</transition>
<transition-group name="accordion" :duration="300">
<div v-for="equipment in equipmentSelections" v-bind:key="equipment.unitNumber" class="accordion">
<div>
<h3 v-on:click="updateSelections(equipment)">{{equipment.unitNumber}}</h3>
</div>
</div>
</transition-group>
You can get more power out of the vue transition component by using the javascript hooks.
For example:
Demo: https://codepen.io/KingKozo/pen/QWpBPza
HTML:
<div id="app">
<div>
<button type="button" #click="toggle">Toggle</button>
</div>
<transition name="label" v-on:enter="enter" v-on:before-leave="leave">
<div v-if="isOpen">Hi</div>
</transition>
</div>
CSS
.label-enter-active, .label-leave-active {
transition: opacity 1s;
}
.label-enter, .label-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.staying-visible {
background-color: red;
color: white;
}
Javascript
const vm = new Vue({
el: '#app',
data: {
isOpen: false
},
methods: {
enter(el){
el.classList.add("staying-visible")
},
leave(el){
el.classList.remove("staying-visible")
},
toggle(){
this.isOpen = !this.isOpen
}
}
})
In the example I provided I add a brand new class, "staying-visible", to the element on enter and remove it later on. In the example provided, I remove the class on "before-leave" so as to make the change visible but for your specific use case it seems like you can also just remove it during the 'leave' hook.
To learn more about how to use the javascript transition hooks, check out the official documentation: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
How can I resolve and reuse variables coming from _variables.scss within my own class (.post-body in this case) so I don't have to add a long list of styles to my html?
This is what the relevant html line looks like:
<div class="col px-5 py-4 post-body">{{{ contents }}}</div>
And this is my stylesheet.scss:
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
// ...
#import "../../../node_modules/bootstrap/scss/bootstrap";
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
// Following are my attempts to reuse $box-shadow-lg from _variables.scss
box-shadow-lg; // Invalid syntax
#include box-shadow-lg; // Complains with undefined mixin.
}
Sure I could add them directly, like below: But as the number of modifications grows, the list of classes applied to html will grow as well and result in complexity.
<div class="col px-5 py-4 post-body box-shadow-lg">{{{ contents }}}</div>
You just have to use #extend from scss like this :
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
#extend .box-shadow-lg;
}
So the styles of .box-shadow-lg would be paste to your .post-body class.
I just figured it out by myself. It seems that I need to #import the mixins. And then use that function.
// ...
#import "../../../node_modules/bootstrap/scss/mixins";
// ...
#import "../../../node_modules/bootstrap/scss/bootstrap";
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
#include box-shadow($box-shadow-lg);
}
I'm beginner for the Angular & i try to do some Angular tab active line bar to replace some arrow but it's not working , anyone know how to do that correctly
stackblitz sample here
code
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
css
/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightgrey;
}
/* ink bar */
::ng-deep .mat-ink-bar {
background-color:red !important; background: url('../../../assets/sg-img/drop-down-arrow.png');
}
Thanks
Instead of using ::ng-deep set the ViewEncapsulation of your component to none:
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'tab-group-stretched-example',
templateUrl: 'tab-group-stretched-example.html',
styleUrls: ['tab-group-stretched-example.css'],
encapsulation: ViewEncapsulation.None
})
export class TabGroupStretchedExample {}
Then use the following CSS (I had to use another arrow since you used a local reference in your stackblitz):
.example-stretched-tabs {
max-width: 800px;
}
/* active tab */
.mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightblue;
opacity: 1;
}
/* ink bar */
.mat-tab-group.mat-primary .mat-ink-bar {
background: none;
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 10px;
}
Is this what you were looking for: stackblitz?
I have a child element that is rendering with a simple string custom class passed from a variable. Since it's a variable and will change, I want to write conditional styles in scss. Example shown when variable is 'poor' -> current.range.total = 'poor'.
<div className={styles.score__content}>
<div className={current.range.total}>
My scss is:
&__content {
.poor {
padding: 2em 2.81em;
background-color: #000 !important;
}
}
I've also tried:
<div className={styles.score__content + ' ' + current.range.total}>
And then scss:
&__content {
&.poor {
padding: 2em 2.81em;
background-color: #000;
}
}
But to no avail. Any ideas why the styles aren't being applied?
I have a big problem with css transitions and angular 4.
Actually, I use an external library which provides an input counter (that's my library, so I know no more style is applied to the wrapped input), but on the application I have the following style for the inputs:
input {
&[type="text"],
&[type="password"],
&[type="email"] {
border-radius: 4px;
border: 1px solid $grey-color;
padding: 0.5rem 1rem;
outline: none;
width: 100%;
transition-property: all;
transition-duration: 300ms;
font-size: inherit;
}
}
And in the html template:
<input-counter
type="text"
placeholder="Name"
[maxlength]="nameMaxLength"
[(ngModel)]="name">
</input-counter>
<input-counter> component template:
<style>
.input-counter-group {
display: block;
position: relative;
}
.input-counter-group span {
color: #b0b0b0;
font-size: 10px;
}
.input-counter-group .text-input-counter {
position: absolute;
line-height: 10px;
right: 0;
bottom: -13px;
}
</style>
<div class="input-counter-group">
<input
[id]="id"
[type]="type"
[ngClass]="className"
[name]="name"
[placeholder]="placeholder"
[maxlength]="maxlength"
[disabled]="disabled"
[pattern]="pattern"
[required]="required"
[readonly]="readonly"
[(ngModel)]="value"
(focus)="onFocus()"
(blur)="onBlur()">
<span *ngIf="enabled" class="text-input-counter">
<span *ngIf="displayMinLength()">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf="displayMaxLength()">/{{ maxlength }}</span>
</span>
</div>
The problem is when component is loaded, a css transition is applied to the input, like if the input was "initialized" to the css properties I defined for inputs:
This animation appears when the component <input-counter> is displayed, whereas the only animation which should happens is the border color changes when the input is hovered.
Thanks!
EDIT: the origin of the problem was the plugin codemirror which was loaded with ngIf, and applied under the hood a style to my input (itself loaded from another component!), but with css transitions it did the rendering above, so I display it with [hidden] and all is ok.
You can use angular's animation system to get what you are looking for.
Create an animation trigger for your input-counter component, attach it to whichever tag you need to animate in your template and change the trigger's state when you need the transition to happen.