.my-class {
&:before{
content:"";
display:block;
background:red;
h1 ????{
padding-top: 5px
}
}
}
is it possible to use & in this location to have output like
h1.my-class:before {
padding-top: 5px
}
You need to SCSS it this way::
.my-class {
&:before {
content: "";
display: block;
background: red;
#at-root h1 {
&.my-class {
&:before {
padding-top: 5px;
}
}
}
}
}
Related
http://slippry.com/examples/thumbnails/
I'm trying to recreate the thumbnails example.
The css quoted is in sass format.
I've not used sass before.
Is anyone able to convert this to sass (from example page)?
I had a quick attempt at http://www.sassmeister.com and failed.
* Thumbnails */
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;
.thumbs {
#include clearfix;
li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;
img {
width: 100%;
opacity: .8;
#include transition(opacity .32s);
border-bottom: 4px solid transparent;
&.active {
border-color: $bc-rk-blue;
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
#include transition(opacity .2s);
}
}
}
}
}
used http://www.sassmeister.com/
found the 2 #mixins.
I could not find $bc-rk-blue; so just changed it to blue
This is the output:
/* Thumbnails */
#import "compass";
#mixin grouped-trans($list, $time, $ease) {
#include transition-property($list);
#include transition-duration($time);
#include transition-timing-function($ease);
}
#mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;
.thumbs {
#include clearfix;
li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;
img {
width: 100%;
opacity: .8;
#include transition(opacity .32s);
border-bottom: 4px solid transparent;
&.active {
border-color: blue;
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
#include transition(opacity .2s);
}
}
}
}
}
Here is my code:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
How can I have .child inherit background-color: #ccc; without changing the class declaration order?
I tried background-color: inherit; but all I got is a complete reset (ie no color) of the background-color property.
Please also note I can't change neither .ancestor nor .parent.
You could just do this:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}
or you could do:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
and have
The html div or whatever like this:
<div class="ancestor child"></div>
This would do the trick:
.ancestor, .child {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
You can do this,
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}
I'm getting an error I can't correct when testing with Rspec and Capybara in my rails app.
Failure/Error: visit('/')
ActionView::Template::Error:
Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"
It says the error is occurring in app/assets/stylesheets/application.css. I have nothing in there as of yet and cannot locate the issue. I think the error(based on what I've read) may have something to do with my css or scss file extensions. I've tinkered with them a bit with no change so here I am asking for help.
My registration_spec.rb
require 'spec_helper'
describe "Signing Up" do
it "allows a user to sign up for the site and creates the object in the database" do
expect(User.count).to eq(0)
visit('/')
expect(page).to have_content("Sign Up")
click_link "Sign Up"
fill_in "First Name", with: "John"
fill_in "Last Name", with: "Smith"
fill_in "Password", with: "password123"
fill_in "Password Confirmation", with: "password123"
click_button "Sign Up"
expect(User.count).to eq(1)
end
end
Here's my style.css
#about {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#about-content {
text-align: left;
}
#article-image {
float: left;
}
#article-links {
list-style-type: none;
}
#article-links a {
font-weight: bold;
color: #3f4944;
text-decoration: none;
}
#article-links img {
margin-right: 20px;
}
#article-show {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
.bit-5 {
background: white;
padding: 20px;
text-align: center;
border: 2px solid #57645d;
color: #606e67;
float: right;
display: block;
}
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent:
}
.clearfooter {
height: 330px;
clear: both;
}
#contact {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#contact-content {
text-align: left;
}
footer {
position: relative;
width: 100%;
height: 330px;
background: #3f4944;
}
html,body {
background: #efeddf;
height: 100%;
}
#title a {
color: #555;
text-decoration: none !important;
}
#main-header {
height: 180px;
background: #57645d;
position: fixed;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
}
#main-nav ul {
text-align: center;
margin-top: 120px;
}
#main-nav ul li {
padding-left: 10px;
display: inline-block;
margin-right: 20px;
}
#main-nav ul li a {
text-decoration: none;
color: #efeddf;
font-size: x-large;
}
#new-article-path a {
font-weight: bold;
color: #3f4944;
}
#recent-article li {
list-style: none;
}
#recent-article li a {
color: #57645d;
text-decoration: none;
}
My grid(lemonade.css)
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Set the width of the grid */
.frame {
margin: auto;
width: 1100px;
margin-top: 200px;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
/* Attribute selector */
[class*='bit-'] {
float: left;
padding: 0.3em;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
float: right
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both
}
/* Main Widths */
.bit-1 { width: 100% }
.bit-2 { width: 50% }
.bit-3 { width: 33.33% }
.bit-4 { width: 25% }
.bit-5 { width: 20% }
.bit-6 { width: 16.6666666667% }
.bit-7 { width: 14.2857142857% }
.bit-8 { width: 12.5% }
.bit-9 { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}
/* Landscape mobile & down */
#media (max-width: 30em) {
.bit-1,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9,
.bit-10,
.bit-11,
.bit-12 {
width: 100%;
}
}
/* Portrait tablet to landscape */
#media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11 {
width: 100%
}
}
/* Landscape to small desktop */
#media (min-width: 50em) and (max-width: 68.750em) {
.bit-2,
.bit-7 {
width: 100%
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
}
Im still pretty new at all this so any help/and or criticisms would be appreciated. Thanks.
Your style.css is invalid which is causing following error:
Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS
after " text-indent:": expected expression (e.g. 1px, bold), was "}"
In your style.css, for class .bit-75, you forgot to set value of text-indent property
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent: // <-- set a value here for eg : 10px;
}
i need to make my responsive css page content 100 % min-height ... i need help..
#media (min-width: 980px) and (max-width: 1280px) {
.page-boxed .header .dropdown .username {
display: none;
}
}
#media (min-width: 980px) {
/***
Page sidebar
***/
.page-sidebar {
position: absolute;
width: 225px;
min-height:100%;
}
.page-sidebar-fixed .page-sidebar {
position: fixed !important;
top: 41px;
}
.page-sidebar-fixed ul.page-sidebar-menu > li.last {
margin-bottom: 15px !important;
}
.page-sidebar-fixed.page-sidebar-hover-on .page-sidebar {
z-index: 10000;
width: 35px;
}
.page-sidebar-fixed.page-sidebar-hover-on .page-sidebar .selected {
display: none;
}
.page-sidebar-fixed.page-sidebar-hover-on .page-content {
margin-left: 35px;
}
.page-sidebar-fixed.page-sidebar-hover-on .footer {
margin-left: 35px;
}
.page-sidebar-fixed .page-sidebar-closed .page-sidebar .sidebar-search .submit,
.page-sidebar-fixed .page-sidebar .sidebar-toggler {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.page-sidebar-hovering {
overflow: hidden !important;
}
.page-sidebar-hovering .sub-menu,
.page-sidebar-hovering span.title,
.page-sidebar-hovering span.arrow {
display: none !important;
}
.page-sidebar-hovering .submit {
opacity: 0;
width: 0 !important;
height: 0 !important;
}
/***
Page content
***/
.page-content {
margin-left: 225px;
margin-top: 0px;
min-height: 760px;
}
.page-sidebar-fixed .page-content {
min-height: 600px;
}
.page-content.no-min-height {
min-height: auto;
}
/***
Footer
***/
/* fixed sidebar */
.page-sidebar-fixed .footer {
margin-left: 225px;
background-color: #fff;
}
.page-sidebar-fixed .footer .footer-inner {
color: #333;
}
.page-sidebar-fixed.page-sidebar-closed .footer {
margin-left: 35px;
}
.page-sidebar-fixed .footer .footer-tools .go-top {
background-color: #666;
}
.page-sidebar-fixed .footer .footer-tools .go-top i {
color: #ddd;
}
/* boxed layout */
.page-boxed .header .brand {
margin-left: 0px !important;
width: 226px;
}
.page-boxed .header .brand img {
margin-left: 10px;
}
}
/***
For tablets and phones
***/
#media (max-width:979px) {
/***
Body
***/
body {
margin: 0px !important;
}
/***
Page header
***/
.header {
margin: 0 !important;
}
.header .nav li.dropdown i {
display: inline-block;
position: relative;
top:1px;
right:0px;
}
.header .nav {
margin-bottom: 0px !important;
}
.header .brand {
margin-left: 0px !important;
padding-left: 0px !important;
}
.header .brand img {
margin-left: 2px !important;
}
/***
Page container
***/
.page-container {
margin: 0 !important;
padding: 0 !important;
}
.page-header-fixed .page-container {
margin-top: 0px !important;
}
/***
Page content
***/
.page-content {
margin: 0px !important;
padding: 0px !important;
min-height: 280px;
}
/***
Page sidebar
***/
.page-sidebar {
margin: 0 10px;
}
.page-sidebar.in {
margin: 15px;
position: relative;
z-index: 5;
}
.page-sidebar .sidebar-toggler {
display: none;
}
.page-sidebar ul {
margin-top:0px;
width:100%;
}
.page-sidebar .selected {
display: none !important;
}
.page-sidebar .sidebar-search {
width: 220px;
margin-top: 20px;
margin-bottom:20px;
}
/***
Page title
***/
.page-title {
margin: 15px 0px;
}
/***
Styler panel
***/
.styler-panel {
top:55px;
right:20px;
}
}
#media (min-width: 768px) and (max-width: 1280px) {
/***
Form wizard
***/
.form-wizard .step .desc {
margin-top: 10px;
display: block;
}
/***
Pricing tables
***/
.pricing-table .rate .price,
.pricing-table2 .rate .price {
width: 100%;
display: block;
text-align: center;
margin-bottom: 10px;
}
}
#media (min-width: 768px) and (max-width: 979px) {
/***
Body
***/
body {
padding-top: 0px;
}
/***
Page sidebar
***/
.page-sidebar .btn-navbar.collapsed .arrow {
display: none;
}
.page-sidebar .btn-navbar .arrow {
position: absolute;
right: 25px;
width: 0;
height: 0;
top:50px;
border-bottom: 15px solid #5f646b;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
}
#media (max-width: 767px) {
/***
Page header
***/
.header .navbar-inner .container-fluid,
.header .navbar-inner .container {
margin-left: 10px !important;
margin-right: 10px !important;
}
.header .top-nav .nav{
margin-top: 0px;
margin-right: 5px;
}
.header .nav > li > .dropdown-menu.notification:after,
.header .nav > li > .dropdown-menu.notification:before {
margin-right: 180px;
}
.header .nav > li > .dropdown-menu.notification {
margin-right: -180px;
}
.header .nav > li > .dropdown-menu.inbox:after,
.header .nav > li > .dropdown-menu.inbox:before {
margin-right: 140px;
}
.header .nav > li > .dropdown-menu.inbox {
margin-right: -140px;
}
.header .nav > li > .dropdown-menu.tasks:after,
.header .nav > li > .dropdown-menu.tasks:before {
margin-right: 90px;
}
.header .nav > li > .dropdown-menu.tasks {
margin-right: -90px;
}
/* Header logo */
.header .brand {
margin-left: 0px !important;
width: 110px;
}
/***
Page content
***/
.page-content {
padding: 10px !important;
}
/***
Page title
***/
.page-title {
margin-bottom: 20px;
}
/***
Styler pagel
***/
.styler-panel {
top:58px;
right:12px;
}
/***
Page breadcrumb
***/
.breadcrumb {
padding-left: 10px;
padding-right: 10px;
}
/***
Portlet form action
***/
.portlet-body.form .form-actions{
padding-left: 15px;
}
/***
Gritter notification
***/
#gritter-notice-wrapper {
right:1px !important;
}
/***
Form input validation states
***/
.input-icon .input-error,
.input-icon .input-warning,
.input-icon .input-success {
top:-27px;
float: right;
right:10px !important;
}
/***
Advance tables
***/
.table-advance tr td.highlight:first-child a {
margin-left: 8px;
}
/***
Footer
***/
.footer {
padding-left: 10px;
padding-right: 10px;
}
.footer .go-top {
float: right;
display: block;
margin-right: 0px;
}
/***
Vertical inline menu
***/
.ver-inline-menu li.active:after {
display: none;
}
/***
Form controls
***/
.form-horizontal .form-actions {
padding-left: 180px;
}
.portlet .form-horizontal .form-actions {
padding-left: 190px;
}
}
#media (max-width: 480px) {
/***
Header navbar
***/
.header .nav {
clear:both !important;
}
.header .nav > li.dropdown .dropdown-toggle {
margin-top:3px !important;
}
.header .nav li.dropdown .dropdown-toggle .badge {
top: 11px;
}
/***
Page sidebar
***/
.page-sidebar.in {
margin-top: 7px !important;
}
/***
Styler panel
***/
.styler-panel {
top:92px;
right:12px;
}
/***
Page title
***/
.page-title small {
display: block;
clear: both;
}
/***
Dashboard date range panel
***/
.page-content .breadcrumb .dashboard-date-range {
padding-bottom: 8px;
}
.page-content .breadcrumb .dashboard-date-range span {
display: none;
}
/***
Login page
***/
.login .logo {
margin-top:10px;
}
.login .content {
padding: 30px;
width: 222px;
}
.login .content h3 {
font-size: 22px;
}
.login .content .m-wrap {
width: 180px;
}
.login .checkbox {
font-size: 13px;
}
/***
Form controls
***/
.form-horizontal.form-bordered .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
margin-top: 0;
margin-left: 10px;
}
.form-horizontal.form-bordered .controls {
padding-top: 0 !important;
border-left: 0 !important;
}
.form-horizontal.form-bordered.form-label-stripped .control-group:nth-child(even) {
background-color: none !important;
}
.form-horizontal.form-bordered.form-label-stripped .control-group:nth-child(even) .controls {
background-color: none !important;
}
.form-horizontal.form-row-seperated .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
margin-left: 10px;
}
.form-horizontal.form-row-seperated .controls {
border-left: 0;
margin-left: 10px;
}
.portlet .form-horizontal .form-actions {
padding-left: 10px;
}
/***
Hidden phone
***/
.hidden-480 {
display: none;
}
/***
Modal header close button fix
***/
.modal-header .close {
margin-top: 5px !important;
}
/***
Fix text view
***/
.control-group .controls .text {
display: block !important;
margin-bottom: 10px;
}
}
#media (max-width: 320px) {
.header .nav > li.dropdown .dropdown-toggle {
padding-left: 8px !important;
padding-right: 8px !important;
}
/***
Hidden phone
***/
.hidden-320 {
display: none;
}
.header .brand {
width: 100px;
}
}
You may want to look at the MDN article on min-height
The min-height CSS property is used to set the minimum height of a
given element. It prevents the used value of the height property from
becoming smaller than the value specified for min-height.
Specifically- you need to also define the height when declaring min-height, as that is what min-height is calculated relative to.
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the percentage value is treated as 0.
The most common way to have content 100% of viewport height is to assign a height value of 100% to the html and body elements, then the main page 'container'. One other approach is to have an absolutely positioned element with a top and bottom setting of zero.
Having some issues trying to create a fixed header layout for this jsfiddle:
http://jsfiddle.net/4xk4D/107/
Basically, I'd like the id element app-header-container to be fixed on the page.
I used this article as a reference but no luck yet!
NOTE: I am using SCSS in the jsfiddle.
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
Trying to modify your css:
#app-header-wrapper
{
width: 1024px;
margin: 10px auto;
background-color: pink;
}
#app-header-container
{
}
#app-main-nav
{
background-color: pink;
}
#app-header
{
height: 93px;
background-color: blue;
}
#app-access
{
background-color: green;
}
#app-content-container
{
width: 1024px;
margin: 10px auto;
background-color: red;
}
#app-content
{
float: left;
width: 739px;
background-color: yellow;
}
#app-sidebar
{
float: right;
width: 275px;
background-color: orange;
}
#app-footer
{
margin: 0 auto;
width: 1024px;
height: 50px;
background-color: pink;
}
.clearfix:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Or just try using css grid for layouting. One of them http://1kbgrid.com/
#app-header-wrapper {
width: 1024px;
margin: 10px auto;
background-color: pink;
#app-header-container {
#app-access {
background-color: green;
}
#app-header {
height: 93px;
background-color: blue;
}
#app-main-nav {
background-color: pink;
}
}
}
You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }