i'm new in ionic and i need to customize ion-toggle like this.
but i don't know how to change from this.
Could anyone help me?
Thanks!
EDIT
Thanks to #LeftyX for the custom style.
I've used this stackoverflow link for add text to ion-toggle
You must change a few css rules.
You've got 2 elements there: .toggle .track and .toggle .handle.
Below you will find some css which will change the border radius, width and animation. .toggle .handle:before will add a ionicon to the handle.
.toggle .track
{
border-radius: 6px !important;
width: 70px;
}
.toggle .handle
{
border-radius: 6px !important;
width: 32px !important;
height: 32px !important;
top: 4px !important;
}
.toggle .handle:before {
font-family: "Ionicons";
content: "\f13f" !important;
top: -11px !important;
left: -21.5px !important;
}
.toggle input:checked + .track .handle {
-webkit-transform: translate3d(28px, 0, 0);
transform: translate3d(28px, 0, 0);
}
Adding labels SI and NO to your ion-toggle won't be that easy and I guess it would require building a directive.
Anyway, this is the final result:
and the CodePen.
Related
I try to implement a carousel with buttons to go back and forth. When I press the buttons on my pc there is no problem but once I press them on my phone the background-color turns gray.
image
Neither in my CSS nor in my HTML is a background-color which could interfere…
.prev-screen,
.next-screen {
align-self: stretch;
background: none;
border: 0;
margin-top: 40px;
color: rgba(#000, 0.25);
cursor: pointer;
font-size: 24px;
opacity: 1;
outline: none;
padding: 16px;
transform: scale(1);
z-index: 1000;
&:hover,
&:active {
color: #000;
transform-origin: center;
transform: scale(1.25);
}
&:disabled {
opacity: 0;
}
}
What could lead to that black background?
The CSS you provided doesn't describe exactly what you have written to change the background color. What code have you wrote to add the active class to the background? Either way, it might be because of the event listener you have set up to alter css properties... if it works on pc and not on mobile... this might help you out?, or at least guide you on your way... On click event for mobile?.
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle
Because of the parent the text become also be scaled. How can I fix this? The formula 1/a (a=scale factor) doesn't work.
http://codepen.io/anon/pen/yYxpaj
<div class ="rhombus"><p>text</p></div>
p {
color: white;
transform: scaleY(1.7391304) rotate(-45deg) ;
font-size: 30px;
}
.rhombus {
width: 27vw;
height: 27vw;
margin: -2vw 6.5vw;
background: #000;
transform: scaleY(.575) rotate(45deg) ;
}
I also want the text inside the rhombus and not outside of it, but the transform makes that not possible.
Your problem is the order of those operations. If you scale before rotating, the text will scale into a wrong direction (by 45 degrees), so just swap scaleY(1.7391304) and rotate(-45deg), leading to
p {
color: white;
transform: rotate(-45deg) scaleY(1.7391304);
font-size: 30px;
}
Updated example
I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :
Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.
FIDDLE HERE (this is what I could achieve so far. )
Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::
<ul class="bxslider fade out">
<li><img src="img/bp-1.jpg" /></li>
</ul>
CSS ::
.bxslider {
margin: 0;
padding: 0;
}
.bxslider li {
position: relative;
display: table;
}
.bxslider li:after {
content: '';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
box-shadow: 0px 2px 15px rgba(0,0,0,.7);
z-index: -1;
background: rgba(0,0,0,.2);
}
.bxslider li img {
width: 100%;
max-width: 300px;
}
P.S. I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.
But adding a box-shadow to an image in bx-slider is a challenge , here's why ::
bx-slider adds a class called bx-viewport which has the following css overflow: hidden;, and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .
OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .
So how do I go about doing this?
You can check my approach on JSFiddle.
I have added title inside by using H3.
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
<h3>X1 UNFOLDED</h3>
</li>
Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li. JsFiddle Link
HTML:
<ul class="bxslider">
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
</li>
</ul>
CSS:
.bxslider > li {
padding-bottom: 20px;
}
.img-wrapper:after {
content:'';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
z-index: -1;
background: rgba(0, 0, 0, .2);
}
Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider.
Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.
This is how I added a box-shadow to my carousel images:
http://jsfiddle.net/Yq3RM/995/
.bx-viewport {
padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
box-shadow: 0 0 3px 0 #000;
}
I have inspected a lot of buttons using a technique where their icon
is defined by text through the "before" pseudo-element, something like
this:
element:before {
content: "\e604";
}
That code is suposed to draw a star.
I added that to my code, but the icon is not drawn.
.button {
text-align: center;
margin-bottom: 16px;
margin: 0;
padding: 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23);
border-radius: 50%;
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
display: inline-block;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
background-color: #00bcd4;
position: relative;
height: 56px;
width: 56px;
padding: 0;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.button:before {
content:"\e604";
}
http://jsfiddle.net/egeszqw6/
What should I do to make the icon appear?
Thanks in advance!
What is actually showing up is a font.
content:"\e604";
The statement above will just render the glyph (or char) that relates to the \e604 unicode.
So, unless you specifically have a font specified and included (Such as glyphicons or font-awesome, used by bootstrap) or a custom font made at sites like icomoon. It will not work. You need to specify the font-face!
In your example fiddle, you missed the class on the button. It should be this:
<div class="button admin__add"></div>
Other than that, you need to set the font-family in the .admin__add:before css
I created this fiddle, using font awesome as an example