Im working on a ruby app and i am trying to make a sidenav that looks exactly like the one used on the official bootstrap website as seen here:
My code for the sidenav:
.row-fluid
.span3
%ul.nav.nav-list.sidenav
%li
%a{:href => "#download-bootstrap"}
%i.icon-chevron-right
Download
%li
%a{:href => "#file-structure"}
%i.icon-chevron-right
File structure
%li
%a{:href => "#contents"}
%i.icon-chevron-right
What's included
%li
%a{:href => "#html-template"}
%i.icon-chevron-right
HTML template
%li
%a{:href => "#examples"}
%i.icon-chevron-right
Examples
%li
%a{:href => "#what-next"}
%i.icon-chevron-right
What next?
And my code for the css (scss):
.sidenav {
width: 207px;
padding: 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
> {
li {
> a {
display: block;
width: 190px \9;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
&:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
&:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
}
.active > a {
position: relative;
z-index: 2;
padding: 9px 15px;
border: 0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
}
.icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
> li > a:hover {
background-color: #f5f5f5;
}
a:hover .icon-chevron-right {
opacity: .5;
}
.active {
.icon-chevron-right, a:hover .icon-chevron-right {
background-image: url(../img/glyphicons-halflings-white.png);
opacity: 1;
}
}
}
I also have the standard bootstrap.css and bootstrap-responsive.css included as well. Does anyone know why this is happening. Mine seems very thin. My output looks like:
The code seems right. Have you tried inspecting the element? (right click > inspect). It could be that somewhere in your CSS the padding for the 'a' tag is getting reset. When you inspect the element you'll be able to see where the padding is getting changed.
Related
I restate my question here:
When I work on a test page of my site (https://www.jobcool.fr/single.html), the youtube videos appear but when I put this page on the internet with filezilla, the videos no longer work.
I used a code that can lighten the weight of youtube videos
<script>
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
</script>
/*=======VIDEO YOUTUBE=======*/
.video .youtube {
background-color: #000;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.video {
display: block;
width: 600px;
margin: 0 auto 35px auto;
max-width: 100%;
}
/*=======CADRE DE LA VIDEO YOUTUBE=======*/
.video .wrapper {
border: 5px solid black;
width: 100%;
}
/*=======CADRE DE LA VIDEO=======*/
.video .wrapper {
width: 100%;
padding: 7.5px 7.5px;
border: 1px solid #C9C9C9;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
.video .wrapper {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
.video .wrapper:nth-child(even) a img {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
.video .wrapper:nth-child(3n) a img {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
.video .wrapper:nth-child(5n) a img {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
.video .wrapper:nth-child(8n) a img {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
.video .wrapper:nth-child(11n) a img {
position: relative;
top: 3px;
left: -5px;
}
.video .wrapper:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}
.video .wrapper {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}
/* On hover, darken the shadows a bit */
.video .wrapper {
-webkit-box-shadow: 0 3px 6px rgba(white);
-moz-box-shadow: 0 3px 6px rgba(white);
}
<div class="video" data-id="abn-w2Gs54o">
<div class="wrapper">
<div class="youtube" data-embed="abn-w2Gs54o">
<div class="play-button"></div>
</div>
</div>
</div>
Could you help me understand why?
Best regards
enter image description here
They work great on PC, Mac OS and Android, but look checked/wrong on iOS devices - see images below.
Live example - http://demos.creative-tim.com/material-dashboard/documentation/tutorial-components.html#checkbox-row.
Checkbox related CSS:
.checkbox input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.checkbox .checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
padding-right: 5px;
}
.checkbox .checkbox-material:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
}
.checkbox .checkbox-material .check {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0, .54);
overflow: hidden;
z-index: 1;
border-radius: 3px;
}
.checkbox .checkbox-material .check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -3px;
margin-left: 7px;
width: 0;
height: 0;
background: red;
box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
animation: checkbox-off 0.3s forwards;
}
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check {
background: #9c27b0;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
color: #FFFFFF;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn 500ms;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff 500ms;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff 500ms;
}
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox input[type=checkbox],
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check,
.checkbox input[type=checkbox][disabled] + .circle {
opacity: 0.5;
}
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check {
border-color: #000000;
opacity: .26;
}
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: rgba(0,0,0, 0.87);
transform: rotate(-45deg);
}
#keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
#keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
#keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
You'll need to use appearance in your CSS:
.checkbox input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Vaadin 7.6.2
What would be the CSS that would allow me to change the upload button's color to one of the following: danger, primary or friendly so that I may use setStyleName() in the same way as I do for a Button ?
Ref:
https://vaadin.com/docs/-/part/framework/components/components-button.html
This Doc doesn't discuss the bug or fix:
https://vaadin.com/docs/-/part/framework/components/components-upload.html
But does say:
The upload button has the same structure and style as a regular Button component.
So, I guess that the SCSS or CSS that isn't included for this "button" is either an omission, oversight, or bug.
Solved it by finding "danger", "primary" and "friendly" in the source and simply copying them out, pasting them into mytheme.scss then changing the style names as #AndreSchild describes in the following answer:
Vaadin Upload Component Upload Button, changing it's Style?
Here's the updated CSS (paste into mytheme.scss) and use setStyleName as you would for a regular button component:
.v-upload-primary .v-button {
height: 37px;
padding: 0 16px;
color: #ecf2f8;
font-weight: 400;
border-radius: 4px;
border: 1px solid #1362b1;
border-top-color: #156ab3;
border-bottom-color: #1156a8;
background-color: #197de1;
background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
-webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
padding: 0 19px;
font-weight: bold;
min-width: 81px;
}
.v-upload-primary .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-primary .v-button:hover:after {
background-color: rgba(90, 163, 237, 0.1);
}
.v-upload-primary .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-primary .v-button:active:after {
background-color: rgba(2, 62, 122, 0.2);
}
.v-ie8 .v-upload-primary .v-button {
min-width: 43px;
}
.v-upload-friendly .v-button {
height: 37px;
padding: 0 16px;
color: #eaf4e9;
font-weight: 400;
border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #2c9720;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.v-upload-friendly .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-friendly .v-button:hover:after {
background-color: rgba(65, 211, 48, 0.1);
}
.v-upload-friendly .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-friendly .v-button:active:after {
background-color: rgba(14, 86, 6, 0.2);
}
.v-upload-danger .v-button {
height: 37px;
padding: 0 16px;
color: #f9f0ef;
font-weight: 400;
border-radius: 4px;
border: 1px solid #bb382e;
border-top-color: #bc3c31;
border-bottom-color: #b13028;
background-color: #ed473b;
background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
-webkit-box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.v-upload-danger .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-danger .v-button:hover:after {
background-color: rgba(243, 137, 129, 0.1);
}
.v-upload-danger .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-danger .v-button:active:after {
background-color: rgba(146, 12, 2, 0.2);
}
An alternative solution is to hide the upload button inside the component by using css. And then add a standard Vaadin button in your code next to the Upload component. Just call upload.submit() inside the click listener of your button.
Now it's easy to apply those standard style names to that button.
Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?
If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?
You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:
https://github.com/acornejo/bootstrap-nav-wizard
demo here: http://acornejo.github.io/bootstrap-nav-wizard/
Preview (orig):
Preview (customized):
Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.
Fiddle
HTML
<h3>Wizard</h3>
<div class="wizard">
<a><span class="badge">1</span> Set Global Properties</a>
<a><span class="badge">2</span> Specify Entry Scheme</a>
<a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
<a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>
CSS (or SCSS instead)
.wizard a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.wizard a:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}
I have a number input box which is running on iOS. I am using jquery and kendo mobile for this as well as HTML5.
The number input on the Icenium simulator has the up and down arrows but the IPad doesnt. I need a way for these to show up on the IPad. I have looked around but need a straight answer.
Is it possible to have these arrows for a number input on the IPad (eg. quantity)?
If not, is there any way I can implement something similar maybe using kendo mobile, HTML or CSS? Any suggestions would be much appreciated.
This is what i need
<input type="number" value="numberText"/>
<style>
input[type=number]
{
padding:10px;
}
</style>
Thank you
try:
<!DOCTYPE html>
<html lang="en">
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<style>
.number-wrapper {
margin: 10px 5px;
position: relative;
}
.number {
font-size: 30px;
color: #eee;
display: inline-block;
*display: inline;
*zoom: 1;
background: #000;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0 12px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #555;
-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-moz-text-shadow: 0 3px 3px #000000;
-webkit-text-shadow: 0 3px 3px #000000;
text-shadow: 0 3px 3px #000000;
}
.inc {
position: absolute;
display: block;
top: -35px;
left: 0;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
padding-top: 6px;
}
.dec {
position: absolute;
display: block;
bottom: -18px;
left: 0;
padding-top: 14px;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
}
.line {
position: absolute;
width: 100%;
height: 1px;
top: 52%;
left: 0;
background: #000;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
</style>
<body>
<div id="SETtime">
<span class="number-wrapper"><div class="line"></div><span class="inc">+</span><span id="mx" class="number m">00</span><span class="dec">-</span></span>
</div>
</body>
<script>
function twodigits(num) {
return ('0' + num).slice(-2);
}
$('.inc').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value++;
target.text(twodigits(value));
});
$('.dec').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value--;
target.text(twodigits(value));
});
</script>
</html>
Happy days!