I have a div like below:
<div class="circle-icon"><span class="icon icon-loanaccount"></span></div>
and this div tag has the following styles:
.circle-icon {
background: #db552d none repeat scroll 0 0;
width: 50px;
&::after{
border-bottom: 5px solid #db552d;
content: "";
height: 0;
position: absolute;
}&:before{
border-bottom: 5px solid #db552d;
content: "";
height: 0;
}
}
how can I dynamically style border-bottom with angular, suppose that I have the color I want to use in scope.borderColor ?
ng-style is your friend here, see working link here.
$scope.bordercolor = "thick dotted #ff0000";
<div class="circle-icon" ng-style ="{'border-bottom': bordercolor}">
<span class="icon icon-loanaccount"></span>
</div>
Related
I have a parent div with class horizontalTab.Under that another div with attribute role as tablist. I'm targeting the child div like below but I don't see these styles. What am I doing wrong?
<div class="horizontalTab">
<div role='tablist'>
<div>....</div>
code here
</div>
</div>
My .scss files looks like below
.horizontalTab {
> div[role='tablist'] {
&:after {
background: #ebecf0;
content: '';
display: block;
height: 2px;
left: 0;
position: absolute;
right: 10px;
}
> .tab[aria-selected=true] {
box-shadow: inset 0 -5px 0 #137cbd;
}
}
}
without the horizontalTab selector it works.
Is there a way to add triangle pointer to v-menu component in Vuetify 2.x?
I mean on this common detail on the web pages (eg. this screenshot is from github):
I have sample code here with the menu that shows as dropdown when button is clicked. I manage to add margin to the menu of 40px via CSS so it's pushed down. This will provide some space for the triangle, but how can I add this triangle pointer like its' on github?
Codepen solution
I belive you need something like this:
.my-menu {
margin-top: 40px;
contain: initial;
overflow: visible;
}
.my-menu::before {
position: absolute;
content: "";
top: 0;
right: 10px;
transform: translateY(-100%);
width: 10px;
height: 13px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid #fff;
}
Effect:
Note: Here is an explanation of how it works: css tricks
Specifically concerning vuetify, you would use the activator slot and a v-model to determine the state of the menu:
<v-menu v-model="menu" ...>
<template v-slot:activator="{ on }">
<v-btn
icon
v-on="on">
<v-icon>mdi-plus>
<v-icon v-if="menu">mdi-menu-up</v-icon>
<v-icon v-else>mdi-menu-up</v-icon>
</v-btn>
</template>
</v-menu>
Make sure you bind v-model attribute here to a data property within the containing component definition.
sidenote
I'm not entirely sure what putting 2 icons inside of a <v-btn icon will result in. You may have to tweak it a bit with flex for the layout to work correctly.
Try this:
.my-menu {
margin-top: 36px;
overflow: visible;
}
.my-menu .v-list::before {
right: 10px;
top: -10px;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
}
I'm in a css firestorm trying to figure this out.
I have this code
.spectator-chat-title{
background-color: darken($content-container-bg, 5%);
height: 30px;
padding: 3px;
color: #ddd;
border-top: 1px solid #1C2337;
box-shadow: 0px 1px 1px darken($content-container-bg, 10%);
z-index: 1001;
position: absolute;
width: 100%;
bottom: 0;
&.collapse{
bottom: 50px;
}
}
then I have this ng-class method in my markup
<div class="spectator-chat-title" ng-class="{'collapse':chatHide}">
<i ng-click="chatHide = !chatHide" ng-class="{'fa-angle-double-down':!chatHide, 'fa-angle-double-up':chatHide}" class="fa pull-right"></i>
</div>
When I'm in chrome dev tools and change the bottom property to 50px it works. But when I add the 'collapse' class through ng-click... the item just POOFS and disappears. Any ideas? '
From reading the comments, I don't know why exactly the item disappears, but if you say that it works with setting the bottom style directly, then you can do this instead:
<div class="spectator-chat-title" ng-style="{'bottom': chatHide ? '50px' : ''}">
<a id="nextslide" class="load-item"></a>
#nextslide:after {
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
content: '';
border-bottom: 36px solid rgba(0,0,0,0.75);
border-right: 36px solid transparent;
}
If I press the #nextslide:after shape, it will load the next slide. I would like to disable link function for the above shape, I want it to work only when I press the #nextslide not psuedo. Is there any simple CSS method for this ?
Theres is just one possibility with CSS you can add this :
#nextslide:after {
pointer-events: none;
}
The big problem is compatibility http://caniuse.com/pointer-events
I'm a little frustrated with the positioning of a CSS triangle on the :after pseudo-element which appears correctly in Chrome and Safari but appears to have a little extra padding or margin in Firefox.
First, screenshots:
The top screen is how "Choose a Subject" appears in Firefox, the bottom how it appears in Chrome and Safari. Obviously this is purely cosmetic, but I'm going for that chevron look.
Here is the markup (for the first item, the darker-blue item is another li):
<nav class="menu pill-menu inline" role="navigation">
<!-- Major Category
======================
--> <ul>
<li class="has-subnav primary">
<input type="checkbox" id="primary-menu" class="checkbox-toggle"/>
<label class="label" for="primary-menu">
Choose a Subject
</label>
</li>
</ul>
</nav>
Here is the Sass:
.pill-menu {
& > ul > li { display: inline-block; }
.primary > .label,
.secondary > .label {
#include css-transition(all, .2s, ease-out);
cursor: pointer;
padding: .5em;
position: relative;
}
.primary > .label {
border-radius: 5px 0 0 5px;
}
.primary > .label:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid $light-blue-object; // TODO: Abstract This
content: "";
height: 0;
right: -1em;
top: 0;
position: absolute;
width: 0;
z-index: 1;
}
}
I've tried several different things: using an :after pseudo-element, I used as I am now right: -1em; I've also scrapped than and tried left: 100%; I set the triangle to a :before element and tried an assortment there. I'm stumped.
I tried changing up the fonts, hardcoding the font-size in pixels, mucking with the padding and the margin: nothing I can think of has any effect on that little space.
I appreciate your thoughts.
In case it matters, I am using normalize.css.
Additionally, I would like to add that both Chrome Dev Tools and Firefox Inspector [or whatever they call it ...] show no difference in inherited, computed, or generated styles. They appear the same in every way.
I'm just stumped. Let me know if there's other information I can provide.
Update
At your request, the compiled CSS:
.pill-menu .primary > .label:after {
border-bottom: 18px solid transparent;
border-left: 18px solid #50afdf;
border-top: 18px solid transparent;
content: "";
height: 0;
right: -1em;
position: absolute;
top: 0;
width: 0;
z-index: 1;
}
.pill-menu .primary > label {
background-color: #50afdf;
border-radius: 5px 0 0 5px;
cursor: pointer;
padding: .5em;
position: relative;
transition: all .2s ease-out;
}
It's not margins or paddings, but whitespace. Just remove the unnecessary spaces/newlines/tabs inside your label.
http://cssdeck.com/labs/v2f8qedp
<!-- Major Category
======================
--> <ul>
<li class="has-subnav primary">
<input type="checkbox" id="primary-menu" class="checkbox-toggle"/>
<label class="label" for="primary-menu"> Choose a Subject</label>
</li>
</ul>
</nav>
Tested this out on jsfiddle. Seems to solve the issue. Can you try at your end?
#-moz-document url-prefix() {
.pill-menu .primary > .label:after {
right: -.9em;
}
}