My dev environment is working great, but when I tried building the app, some of the styles are missing. Here is an example
<style lang="scss">
.badge {
display: inline-block;
padding: 5px 15px;
border-radius: 25px;
font-size: 0.75em;
#apply tw-bg-border tw-text-primary tw-font-bold;
&--danger {
color: white;
#apply tw-bg-danger-alt;
}
&--info {
color: white;
#apply tw-bg-info;
}
&--warning {
color: white;
#apply tw-bg-warning;
}
}
.badge--success {
color: white;
#apply tw-bg-success-alt;
}
</style>
I need to move .badge--success outside for it to work, but all other CSS modifiers are not working.
Related
I copied and pasted this CSS to codepen The Code.
When I used it for my ASP.NET Core 6 MVC app it doesn't work. If I don't use the variables and just colors it works just fine. Is there something I missed that does not allow CSS variables to work?
//the code
:root {
--fb: rgb(16,148,244);
--tw: rgb(93,168,221);
--gg: rgb(234,67,53);
--lin: rgb(10,102,194);
--white: #ffffff;
--fFamily: "Courier New", monospace;
}
button{
font-family:var(--fFamily);
}
.fb-icon {
color: var(--white);
background-color: var(--fb);
}
.fb-icon:hover {
color: var(--fb);
background-color: var(--white);
}
.google-icon {
color: var(--white);
background: var(--gg);
}
.google-icon:hover {
color: var(--gg);
background-color: var(--white);
}
.twitter-icon {
color: var(--white);
background-color: var(--tw);
}
.twitter-icon:hover {
color: var(--tw);
background-color: var(--white);
}
.linkedin-icon {
color: var(--white);
background-color: var(--lin);
}
.linkedin-icon:hover {
color: var(--lin);
background-color: var(--white);
}
I create a new Asp.net 6 MVC application, and use the following code, it seems that no matter using or not using the CSS variables, the code works well on my side:
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
<button class="fb-icon"> Facebook </button>
<button class="twitter-icon"> Twitter </button>
<button class="google-icon"> Google </button>
<button class="linkedin-icon"> LinkedIn </button>
</div>
<style>
:root {
--fb: rgb(16,148,244);
--tw: rgb(93,168,221);
--gg: rgb(234,67,53);
--lin: rgb(10,102,194);
--white: #ffffff;
--height: 35px;
--fFamily: "Courier New", monospace;
}
button{
height:var(--height);
font-weight: 700;
font-family:var(--fFamily);
font-size: large;
}
.fb-icon {
color: var(--white);
background-color: var(--fb);
}
.fb-icon:hover
{
color: var(--fb);
background-color: var(--white);
}
.google-icon {
color: var(--white);
background: var(--gg);
}
.google-icon:hover
{
color: var(--gg);
background-color: var(--white);
}
.twitter-icon {
color: var(--white);
background-color: var(--tw);
}
.twitter-icon:hover
{
color: var(--tw);
background-color: var(--white);
}
.linkedin-icon {
color: var(--white);
background-color: var(--lin);
}
.linkedin-icon:hover
{
color: var(--lin);
background-color: var(--white);
}
</style>
#*without using css variables*#
#*<style>
button{
height:35px;
font-weight: 700;
font-family:"Courier New", monospace;
font-size: large;
}
.fb-icon {
color: #ffffff;
background-color: rgb(16,148,244);
}
.fb-icon:hover {
color: rgb(16,148,244);
background-color: #ffffff;
}
.google-icon {
color: #ffffff;
background: rgb(234,67,53);
}
.google-icon:hover {
color: rgb(234,67,53);
background-color: #ffffff;
}
.twitter-icon {
color: #ffffff;
background-color: rgb(93,168,221);
}
.twitter-icon:hover {
color: rgb(93,168,221);
background-color: #ffffff;
}
.linkedin-icon {
color: #ffffff;
background-color: rgb(10,102,194);
}
.linkedin-icon:hover {
color: rgb(10,102,194);
background-color: #ffffff;
}
</style>
*#
The result as below:
When build your application, is there any warning or error? Whether you are using _layout or not. In my application, there is no warning and error and I'm using the _layout page. You can check it.
Besides, you can also copy the above code to your application and check it. If still not working, try to create a new MVC application and test the above code in the Index page.
Update:
As mentioned in the comments, I could reproduce the problem: if using the CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github.
As a temporary workaround, you can use the CSS isolation without CSS variables, Or if you want to use the CSS variables, you can add the CSS style in the site.css file (in the wwwroot/css folder) or add the CSS style in the <style> tag in the view page.
I am using React-Bootstrap. I have created two different components so far, Register, and Navigation. Each component has it's own CSS style sheet. I created Navigation first, then Register. Navigation looked and worked as intended. However, when I add the Register CSS, now Navigation is taking some of the styles from Register. How do I prevent this? I thought by having two separate style sheets for each component I wouldn't have to worry about them overriding each other. Is there something I need to do or add so they will remain separate from each other? My App.css file is empty besides a font-face property. And there is no other CSS. I have used Bootstrap in the past, but not React-Bootstrap, so I may be missing something simple.
REGISTER.CSS
#font-face {
font-family: "Mulish-Regular";
src: url("../assets/fonts/static/Mulish-Regular.ttf");
}
div.card-body,
.flex-column.nav,
a {
color: #212529 !important;
}
h5.card-header,
button.btn.btn-primary {
color: rgba(255, 255, 255, 0.9);
background-color: #2d3155;
}
button.btn-primary {
margin: 1em;
}
a:hover,
a:focus {
background: white !important;
color: blue !important;
}
p.card-text > a {
color: blue;
}
NAVIGATION.CSS
#font-face {
font-family: "Mulish-Regular";
src: url("../assets/fonts/static/Mulish-Regular.ttf");
}
.flex-column.nav,
a {
font-family: "Mulish-Regular";
color: rgba(255, 255, 255, 0.8) !important;
background-color: #2d3155;
}
div.col-2 {
padding-left: 0 !important;
margin: 0;
}
img {
background-color: white;
width: 100%;
padding: 0.5em;
}
a > span {
padding: 0.5em;
}
a.nav-link {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
text-decoration: none !important;
}
span.contactText {
font-weight: 600;
margin-right: 0.3em;
}
section {
padding-left: 1em;
margin-top: 1.5em;
}
section > p {
font-size: 14px;
}
a.nav-link:hover {
background-color: #282a41;
}
This question already has answers here:
SCSS: parent hover selector
(2 answers)
Closed 2 years ago.
I can't figure out why my .notes-list__item__contents isn't getting a white color on .note-list__item:hover... What am I doing wrong with my selector? I couldn't find similar case in the docs.
.notes-list {
list-style-type: none;
margin: 0;
padding: 0;
&__item {
padding: 30px;
background-color: $secondary-color;
border-radius: 15px;
margin-bottom: 15px;
&:hover {
background-color: $accent-color;
color: #fff;
&__contents { color: #fff; }
}
&__title {
font-size: 1.125rem;
font-weight: 600;
}
&__contents {
margin-top: 20px;
color: $text-color;
font-weight: 500;
}
}
}
<li className="notes-list__item">
<div className="notes-list__item__title">Title</div>
<div className="notes-list__item__contents">
Some contents
</div>
</li>
Having this doesn't feel quite scss
&:hover {
.notes-list__item__contents { color: #fff; }
}
So i checked your output css and its resulting in below css
.notes-list__item:hover__contents {
color: #fff;
}
As you can see its suffixing contents after the hover pseudo element.
you have to write like this in case of nested hover
&:hover &{
background-color: green;
color: #fff;
&__contents { color: #fff; }
}
This will generate below CSS
.notes-list__item:hover .notes-list__item__contents {
color: #fff;
}
I have an PrimeNg Tree (Angular 2) and I want to delete the selected nodes highlight color.
Image Here
Based on the image I want to delete the blue highlight color.
Instead I want to get this style: Style I want
Here are my styles:
.ui-tree {
width: 100%;
}
body .ui-widget-content {
border: none !important;
}
span.ui-treenode-label {
font-family: Poppins !important;
line-height: 24px !important;
font-size: 14px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
span.ui-treenode-icon {
line-height: 24px !important;
font-size: 1.2rem !important;
}
.ui-tree .ui-chkbox .ui-chkbox-icon {
margin-left: 0px;
}
.ui-tree .ui-treenode-children {
padding-left: 20px !important;
}
.hidden-tree-node {
display: none;
}
.ui-state-highlight .ui-widget-content {
color: white;
}
You can override the original style by setting:
span.ui-state-highlight {
background-color: transparent !important;
color: inherit !important;
}
A few solutions:
1) Use ng-deep
::ng-deep {
span.ui-state-highlight {
background-color: transparent;
color: inherit;
}
}
2)Target the element in a more specific way
span.ui-treenode-label.ui-corner-all.ui-state-highlight {
background-color: transparent;
color: inherit;
}
Also, try to use SASS. It will make your CSS more readable and smarter. You will love it. By the way you should remove the importance from your code. using importants is not good practice.
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/