I'm using less.
this is my code:
.input-mobile {
padding-left: 0 !important;
margin-left: 0 !important;
width: var(--t1-login-input-width);
input {
height: 60px !important;
padding-left: 0 !important;
font-size: 18px !important;
} {
input:disabled {
.item-input-wrap:after {
background-color: yellow;
}
}
}
I want to change background color to yellow (.item-input-wrap:after ) when my input is disabled.
but it doesn't work.
.input-mobile {
padding-left: 0 !important;
margin-left: 0 !important;
width: var(--t1-login-input-width);
input {
height: 60px !important;
padding-left: 0 !important;
font-size: 18px !important;
&:disabled {
.item-input-wrap:after {
background-color: yellow;
}
}
}
}
An <input> cannot have a nested element, but according to your code, it does. Use some code like this:
.input-mobile{
position:relative;
display:inline-block;
}
.item-input-wrap,
.item-input-wrap:after{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.item-input-wrap:after{
content:'';
}
input[disabled]~.item-input-wrap:after{
background-color:#ffa50033;
}
<div class="input-mobile">
<input disabled>
<span class="item-input-wrap"></span>
</div>
Related
I'm trying to merge the style into one class but its showing an error. Look at the example below.
%banner-style{
banner {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
}
And I want it to merge with the parent class .parent
.parent{
color: red;
&_#extend %banner-style;
}
using & to merge into one class name. but showing error unless i do this
.parent{
color: red;
&_{#extend %banner-style};
}
Which is same as if I remove &_.
I wanted .parent_banner {...} but instead got .parent_ banner{...};
Does anyone know how I can accomplish this?
You are getting exactly what is supposed to happen. Extend does not "merge" classes, it extends another class/placeholder into a new selector's styles.
What that means is if I write:
%banner-style {
background: black;
}
.parent {
#extend %banner-style;
}
.other-selector {
#extend %banner-style;
color: red;
}
The css I get will be
.parent {
background: black;
}
.other-selector {
color: red;
background: black;
}
So you are getting expected results. If you'd like to make this "work" the way you want, you can just change your code to:
%banner-style {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
.parent{
color: red;
&_banner {
#extend %banner-style;
};
}
Note: I took out the banner block because it seems you don't want that (and banner isn't a normal html element).
So lets have following snippet:
.dashboard.tile {
display: block;
color:white;
&-blue {
#body-color:#light-blue;
#footer-color:#dark-blue;
font-size: 10px;
}
#body-color:#greenBright;
#footer-color:#000;
div.tile-body {
border-radius: #tile-border-radius #tile-border-radius 0 0;
background-color: #body-color;
font-size: #font-size-h2;
}
div.tile-footer {
border-radius: 0 0 #tile-border-radius #tile-border-radius;
background-color: #footer-color;
}
}
My goal is to create additional classes like tile-blue tile-red etc that would only change color variable values.
Unformtunelty this does not work. tile-blue gets generated with font-size:10 but variables are unaffected - more over, default color is not applied so I guess that i have messed something up with selector hierarchy etc.
Found the solution that exactly suits my needs
.dashboard-tile{
&-blue{
.dashboard-tile(#light-blue,#dark-blue)
}
&-green{
.dashboard-tile(#light-green,#dark-green)
}
&-red{
.dashboard-tile(#light-red,#dark-red)
}
&-violet{
.dashboard-tile(#light-violet,#dark-violet)
}
}
.dashboard-tile(#body-color,#footer-color) {
margin-bottom: 5px;
margin-top: 5px;
display: block;
color: white;
.tile-body {
border-radius: #tile-border-radius #tile-border-radius 0 0;
background-color: #body-color;
font-size:#font-size-h2;
#tilePadding;
}
.tile-footer {
border-radius: 0 0 #tile-border-radius #tile-border-radius;
background-color: #footer-color;
#tilePadding;
}
}
I would like the Bootstrap alert and close button functionality. I've included the JQuery and Bootstrap javascript file in my page head but don not want the CSS in it because it overrides a ton of styling.
Currently I've added these parts of the Bootstrap to my own css to make the alert and close button appear.
.alert {
padding: 8px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px
}
.alert h4 {
margin-top: 0;
color: inherit
}
.alert .alert-link {
font-weight: 700
}
.alert>p,
.alert>ul {
margin-bottom: 0
}
.alert>p+p {
margin-top: 5px
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1
}
.alert-info hr {
border-top-color: #a6e1ec
}
.alert-info .alert-link {
color: #245269
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1
}
.alert-danger hr {
border-top-color: #e4b9c0
}
.alert-danger .alert-link {
color: #843534
}
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
This CSS makes the alert work as expected. The below part is for the close button. It styling has changed a bit, but I seem to be missing a few lines of CSS. Can anyone tell me which onesm can't seem to find them.
button.close { -webkit-appearance:none;padding:0;cursor:pointer;background:0;border:0}
Target HTML:
<% if (message.length > 0) { %>
<div class="alert alert-info"><%= message %><button type="button" class="close" data-dismiss="alert">x</button></div>
<% } %>
HTML (added alert-dismissable class, changed x to ×):
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
Message
</div>
CSS (added basic styles for close class):
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
CODEPEN EXAMPLE
I have this css style code:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,dl,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
#media (max-width:600px) {
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
.ss_scripted img {
display:none;
}
.ss_scripted .ss_show {
display: block;
}
#slideShow img {
margin:0 auto;
}
#slideCounter {
text-align:center;
padding:0.25em 1em;
font:bold 200%/120% consolas,courier,monospace;
color:#C00;
}
#slideControls {
width:512px;
padding:0.5em 0;
margin:0 auto;
}
#slideControls a {
float:left;
padding:0.25em 0.6em;
text-decoration:none;
color:#000;
background:#EEE;
border:2px solid #666;
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
-webkit-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
-moz-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
}
#slideControls a:active,
#slideControls a:focus,
#slideControls a:hover {
background:#FFF;
}
#slideControls .next {
float:right;
}
I changed the part in the body:
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
Unmarked 3 lines and added the width and margin 0 auto
If i was using this 3 lines without the width and margin then the slideshow was displaying in the left bottom.
Now the slideshow is displaying in the middle top. But i want it to be in the screen center not middle top:
Middle Top
What should i change/add ?
Try this:
<div id="slides">
<--! slider here -->
</div>
#slides{
margin-right: auto;
margin-left: auto;
display: block
}
I am going to assume your middle part is 300px width and 300px height.
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
position:fixed;
top: 50%;
left: 50%;
margin-top:-150px; /* 50% of the exact height */
margin-left:-150px; /* 50% of the exact width */
}
You can use div tags for styling..
Below I have used the attribute style and set the margin from top...
For example,
<div style="margin-top:200px">Your slideshow content </div>
I am retrieving a bulk images through response and I need to arrange them inside a div tag and all the images are placing one below the other but I need to arrange them vertical (i.e. side by side)
So how do I do that?
And I followed this tutorial but I can arrange only text?
http://phrogz.net/CSS/vertical-align/index.html
Can anyone suggest me the right way?
Here is my code:
$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" +
file.target_name + "' target='_blank' rel='gallery'><img src='thumbs/" +
file.target_name + "' border='0'/></a> </div>");
Here is what I'm getting the result
Plupload Css:
/*
Plupload
------------------------------------------------------------------- */
.plupload_button {cursor: pointer;}
.plupload_wrapper {
font: normal 11px Verdana,sans-serif;
width: 100%;
}
.plupload .plupload_container input {width: 98%;}
.plupload .plupload_filelist_footer {border-width: 1px 0 0 0}
.plupload .plupload_filelist_header {border-width: 0 0 1px 0}
div.plupload .plupload_file {border-width: 0 0 1px 0}
div.plupload div.plupload_header {border-width: 0 0 1px 0; position: relative;}
.plupload_file .ui-icon {
cursor:pointer;
}
.plupload_header_content {
background-image: url('../img/plupload.png');
background-repeat: no-repeat;
background-position: 8px center;
min-height: 56px;
padding-left: 60px;
position:relative;
}
.plupload_header_content_bw {background-image: url('../img/plupload-bw.png');}
.plupload_header_title {
font: normal 18px sans-serif;
padding: 6px 0 3px;
}
.plupload_header_text {font: normal 12px sans-serif;}
.plupload_filelist,
.plupload_filelist_content {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.plupload_cell {padding: 8px 6px;}
.plupload_file {
border-left: none;
border-right: none;
}
.plupload .ui-sortable-helper,
.plupload .ui-sortable .plupload_file {
cursor:move;
}
.plupload_scroll {
max-height: 180px;
min-height: 168px;
_height: 168px;
overflow-y: auto;
}
.plupload_file_size, .plupload_file_status {text-align: right;}
.plupload_file_size, .plupload_file_status {width: 52px;}
.plupload_file_action {width: 16px;}
.plupload_file_name {
overflow: hidden;
padding-left: 10px;
}
.plupload_file_rename {
width:95%;
}
.plupload_progress {width: 60px;}
.plupload_progress_container {padding: 1px;}
/* Floats */
.plupload_right {float: right;}
.plupload_left {float: left;}
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
display: block;
font-size: 0;
line-height: 0;
}
.plupload_clearer {height: 0;}
/* Misc */
.plupload_hidden {display: none;}
.plupload_droptext {
background: transparent;
text-align: center;
vertical-align: middle;
border: 0;
line-height: 165px;
}
.plupload_buttons, .plupload_upload_status {float: left}
.plupload_message {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.plupload_message p {
padding:0.7em;
margin:0;
}
.plupload_message strong {
font-weight: bold;
}
plupload_message i {
font-style: italic;
}
.plupload_message p span.ui-icon {
float: left;
margin-right: 0.3em;
}
.plupload_header_content .ui-state-error,
.plupload_header_content .ui-state-highlight {
border:none;
}
.plupload_message_close {
position:absolute;
top:5px;
right:5px;
cursor:pointer;
}
.plupload .ui-sortable-placeholder {
height:35px;
}
I believe what you want is float: left; on your images.
Functioning example: http://jsfiddle.net/NeMDZ/2/ (Try moving the middle divider. Flexible layout is optional.)
The basic CSS:
div.imgContain {
overflow:hidden; /* Only necessary if you need to style the containing box.
Forces box to expand to content's height. */
}
div.imgContain img {
float:left;
}
All the other CSS is optional. Style at will.
img {
display: inline-box;
}
The images will set in the same line as long they fit there. Be very careful with padding and margin values.
Images are block-level elements by default, so you will need float: left on your images (or whatever element your image is contained in) if you want them to be side-by-side. If you want to start a new line, create a spacer element like:
.spacer {
clear: both;
}
and then add <div class="spacer"></div> where you want to break a line of images and start a new one. You may need other attributes on your spacer to work in old browsers.