I am trying to adapt an excellent slideout panel example from here.
adapted code is here
I like to have different icons for hide/expanded state (something like > when hidden, < when expanded). Is it possible by changing the above code. Ultimately I may use icons from Font-Awesome
Thanks.
EDIT:
To be clear on the changes from the original version, the code I plan to use doesn't use the same markup. This is to avoid hindering the history. Please use the version http://codepen.io/jetpacmonkey/pen/ktIJz
<header class="main-header">
<label for="main-nav-check" class="toggle-menu">
☰
</label>
<h1>cssPanelMenu</h1>
</header>
You can using pseudo elements (IE8+). Replace the icon with a span with class .icon and then hook up a :before style to show the content based on whether the checkbox is checked.
Demo
HTML
<label for="main-nav-check" class="toggle-menu">
<span class="icon"></span>
</label>
CSS
#main-nav-check:checked ~ .page-wrap .icon:before {
content:"<";
}
#main-nav-check ~ .page-wrap .icon:before {
content:">";
}
Just change:
<a href="#main-nav" class="open-menu">
☰
</a>
<a href="#" class="close-menu">
☰
</a>
to this:
<a href="#main-nav" class="open-menu">
>
</a>
<a href="#" class="close-menu">
<
</a>
Demo: http://codepen.io/anon/pen/nImtd
Related
I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.
The Salesforce HTML:
<aura:iteration items="{!v.IdeasList}" var="idea">
<li class="list-group-item">
<a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink">
<div class="prodname">{!idea.Title}</div>
</a>
<div class="ideaInfo">
<span class="points">{!idea.VoteTotal} points </span>
<span style="padding-right:24px;">
<span class="status">
{!idea.Status}
</span>
</span>
<span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
<!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
<img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
<span class="slds-text-title_bold">
<a class="profileName" href="javascript:void(0)"
id="profile-link"
data-createdByValue="{!idea.CreatedById}"
onclick="{!c.openProfileWindow}">
{!idea.CreatorName}</a></span-->
<a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
<span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
<img src="{!idea.CreatorSmallPhotoUrl}"/>
</span>{!idea.CreatorName}
</a>
</div>
<div class="slds-border_bottom">
</div>
</li>
</aura:iteration>
The Salesforce CSS:
.THIS .list-group-item {
font-size: 12px;
list-style: none;
width: 100%;
margin-bottom:24px;
}
.THIS .list-group-item:last-child{
margin-bottom:0;
}
Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?
It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.
I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child
I want to rotate chevron when the button is clicked. So my question would be - how to do it? Should I add the whole Angular animation component and do it there or is it possible to just add rotate to just a chevron?
<a href="#" (click)="transformArrow()">Show
<span>
<label class="m-0">this</label>
<span class="glyphicons glyphicons-chevron-down" id="myElement"></span>
</span>
</a>
then I tried to add some function
transformArrow(){
let ele = document.getElementById('myElement');
ele.style.transform //And I stuck here as I need to actually access ":before" of this element and rotate it.
}
Huge thanks to trichetriche and malbarmawi for alternative, only thing that I had to change was "after" to "before" :)
My idea is:
transformArrow(e) {
let ele = document.getElementById('myElement');
ele.classList.toggle('btn-change');
}
.glyphicons-chevron-down
{
transition: $trans-1;
&.btn-change
{
&:before
{
position: relative;
display: block;
transform: rotate(180deg);
}
}
}
I really like the idea with ngClass but I like to keep most of actions in component.ts so i wanted to stay with function. Is it even good, or maybe it's better practice to do it the way malbarmawi did?
Why not do it through CSS and custom attributes ?
ele.setAttribute('data-rotate', 'true')
span#myElement[data-rotate="true"]:after {
transform: rotate(90deg);
}
You can use ngStyle directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngStyle]="{'transform': toggle ? 'rotate(180deg)':''}" class="fa fa-arrow-right"></span>
</span>
</a>
another way ngClass directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngClass]="{'flip-h': toggle}" class="fa fa-arrow-right fa-2x"></span>
</span>
</a>
or with element reference (not recommended)
<a href="#" (click)="elem.classList.toggle('flip-h')">Show
<span>
<label class="m-0">this</label>
<span #elem class="fa fa-arrow-right fa-2x" id="myElement"></span>
</span>
</a>
demo
I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Dropdown Image
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
LIVE DEMO
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:
$enable-caret: false;
This overrides the default value of true set in the Bootstrap's _variable.scss:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
I found you can do this within your app on a conditional basis by creating a custom class in styles.css
Note that using "!important;" is required or else elements at the bottom of the screen will still have a caret that points upward:
.remove-caret::after {
display: none !important;
}
html example with the custom class and replacing the icon with an ellipsis:
<div style="margin: auto; text-align: center">
<ul class="navbar-nav" [style.display]="'flex'">
<li class="nav-item d-inline-block" ngbDropdown>
<a class="nav-link dropdown-toggle remove-caret" style="color:#000; font-size: 1.1rem" ngbDropdownToggle href="#" role="button" aria-haspopup="true"
aria-expanded="false"><fa-icon [icon]="faEllipsisH" class="ml-2"></fa-icon></a>
<div ngbDropdownMenu aria-labelled-by="menuDropDown">
<a ngbDropdownItem href="#" (click)="test()">Test</a>
</div>
</li>
</ul>
</div>
I want make a list with a few names.
But i need put all in same size.
How i can make that background with same size using bootstrap?
<ul class="list-unstyled">
<li>
<a class="btn btn-xs btn-warning">
<span >Loren ipsum</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ipsunis</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ip</span>
</a>
</li>
</ul>
Code in jsfiddle
http://jsfiddle.net/novasdream/d3fkoeee/
You'll need to set a width or min-width on those elements. Min-width is a little safer if the button content has the potential to get long. Something like this in your css would do it:
.btn-xs {
min-width: 15em;
}
Note: 1em is roughly the width of one "M" character in the font in use, so I'd recommend looking at your actual text content to find an appropriate width. (15 is just a number I grabbed out of the air.)
Also, bear in mind that this style, if authored as above, will apply to any .btn-xs elements. If you want finer-grained control, you'll probably want to put a specific class on either these buttons or their containing list, so you can target only this instance.
Make the .btn links display:block so that they become 100% the width of the parent li. Size your ul as required.
.list-unstyled li a.btn {display:block;}
http://jsfiddle.net/d3fkoeee/4/
a better way would be to add an id to the link a like so http://jsfiddle.net/1shzc3bh/1/ and add a width there
e.g. a#button{width:100px;!important
}
I'd like to edit the link properties of a specific page so they direct elsewhere than what I specified in the social settings menu, which works globally. So, as it is now the links inherit their properties and theres no way in the cms to change this for every page. Is there a way to add it in the css? I'm not sure how to format it correctly. Here's the hmtl:
The page id: body.page-id-85
The HTML:
<div class="wrapper">
<div class="thb-social-home">
<a title="Facebook" href="https://www.facebook.com/">
<span class="thb-social-icon">2</span>
</a>
<a title="YouTube" href="http://www.youtube.com/">
<span class="thb-social-icon">5</span>
</a>
</div>
</div>
Thanks!!
You can use body.page-id-85 as base selector for this page:
#body.page-id-85 .wrapper {
/* wrapper specific rules*/
}
#body.page-id-85 .thb-social-home {
/* thb-social-home rules */
}