Baobab: CSS
De Casiopea
Viene del Proyecto: Baobab: Plataforma para el desarrollo de comunidades
body
Las propiedades dadas para body definen por defecto los valores de los otros elementos, que pueden ser modificados para cada caso en particular. El archivo .less define estas propiedades, y el javascript compila los valores, traduciéndolo a .css
body{
background: @backgroundColor;
color: @grayDark;
margin-top: @headerHeight;
#font > .sans-serif;
font-weight: lighter;
}
body{
background-color: #FAFAFA;
color: #404040;
margin-top: 100px;
font-family: "Helvetica",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: lighter;
}
Encabezados (h1, h2, h3, h4, h5)
h1, h2, h3, h4, h5, h6{
font-weight: normal;
}
/*LESS*/
h3, h4, h5, h6 {
line-height: @baseline;
}
/*CSS*/
h3, h4, h5, h6 {
line-height: 25.34px;
}
h1
Título en h1
/*LESS*/
h1{
font-size: 30px;
line-height: @baseline * 2;
text-shadow: @shadow;
}
a h1{
color:@lightGray;
.transition(@transition);
}
/*CSS*/
h1{
font-size: 30px;
line-height: 100%;
text-shadow: 0 1px 1px
rgba(0, 0, 0, 0.1);
color: #BFBFBF;
}
h2
Título en h2
/*LESS*/
h2{
font-size: 24px;
color: @grayLight;
line-height: @baseline * 2;
display:inline-block;
}
/*CSS*/
h2{
font-size: 24px;
color: #BFBFBF;
line-height: 50px;
display:inline-block;
}
.profile-info h2
Título en .profile-info h2
/*LESS*/
.profile-info{
h2{
width:100%;
font-size: x-large;
line-height:120%;
padding: 20px 0;
border-bottom: 1px dotted
darken(@backgroundColor, 5%);
margin-bottom: 10px;
color: @grayDark;
}
}
/*CSS*/
.profile-info h2{
width:100%;
font-size: x-large;
line-height:120%;
padding: 20px 0;
border-bottom: 1px dotted #EDEDED;
margin-bottom: 10px;
color: #404040;
}
.profile-info h2 span
Título en .profile-info h2 span
/*LESS*/
.profile-info{
h2{
span{
font-size: large;
color: @grayLight;
display: block;
}
}
}
/*CSS*/
.profile-info h2 span{
font-size: large;
color: #BFBFBF;
display:block;
}
Aside h2
Aside h2
/*LESS*/
aside{
&#archive-list{
h2{
font-size: @titleSize*0.84;
display:block;
}
}
}
/*CSS*/
.profile-info h2 span{
font-size: 21px;
display:block;
}
.sub-block h2
.sub-clock h2.evento .sub-clock h2.proyecto .sub-clock h2.debate .sub-clock h2.mercado .sub-clock h2.noticia .sub-clock h2.idea
/*LESS*/
.sub-block{
h2{
line-height:100%;
text-transform:uppercase;
font-size:@cuerpo*0.8;
letter-spacing:0.15em;
&.evento{color:@blueDarkness;}
&.proyecto{color:@red;}
&.debate{color:@yellow;}
&.mercado{color:@greenDarkness;}
&.noticia{color:@black;}
&.idea{color:@rosado;}
}
}
/*CSS*/
.sub-block h2{
line-height:100%;
text-transform:uppercase;
font-size: 11.2px;
letter-spacing:0.15em;
}
.sub-block h2.evento{
color:#3474BA;
}
.sub-block h2.proyecto{
color:#D01B00;
}
.sub-block h2.debate{
color:#E4AC04;
}
.sub-block h2.mercado{
color:#00845F;
}
.sub-block h2.noticia{
color: #000000;
}
.sub-block h2.idea{
color: #E666BD;
}
h3
encabezado h3
/*LESS*/
h3{
font-size: 18px;
color:@gray;
}
/*CSS*/
h3{
font-size: 18px;
color: #808080;
}
.block .sub-block h3
.block .sub-block h3
/*LESS*/
.block {
.sub-block{
a{
h3{
#font >.serif(normal,1.4em,@baseline/1.5);
color:@grayDark;
line-height:@baseline;
padding:@baseline*0.3 0;
text-shadow:@shadow;
}
}
}
}
/*CSS*/
.block .sub-block a h3{
font-family:"Georgia",Times New Roman,
Times,serif;
font-weight:normal;
line-height:25px;
color: #404040;
font-size:1.4em;
padding: 7.6px 0;
text-shadow:0 1px 1px
rgba(0, 0, 0, 0.1);
}
.portada .top-news a h3
.portada .top-news a h3
/*LESS*/
.portada {
.top-news{
#font > .serif;
text-align:center;
a{
h3{
width:60%;
margin: 0 auto;
font-size: 4em;
color: @white;
line-height: 120%;
padding: 0 20px;
letter-spacing: -1px;
}
}
}
}
/*CSS*/
.portada .top-news{
font-family:"Georgia",Times New Roman,
Times,serif;
font-weight:normal;
font-size:14px;
text-align:center;
}
.portada .top-news a h3{
width:60%;
margin: 0 auto;
font-size: 4em;
color: #FFFFFF;
line-height: 120%;
padding: 0 20px;
letter-spacing: -1px;
}
.title h3
article .title h3
/*LESS*/
article{
&.#publicacion, &.permanente{
title{
h3{
font-size: @titleSize;
line-height: 120%;
margin:@cuerpo/4 0;
}
}
}
}
/*CSS*/
article#publicacion .title h3,
article#permanente .title h3{
font-size: 25px;
line-height:120%;
margin:3.5px 0;
}
.article h4
.article#publicacion h4
/*LESS*/
article{
&#publicacion{
&.wrap, .wrap, .wrap2{
h4{
font-size:@cuerpo;
text-transform:uppercase;
margin:@cuerpo 0 @cuerpo/2;
}
}
}
}
/*CSS*/
article#publicacion.wrap h4,
article#publicacion .wrap h4,
article#publicacion .wrap2 h4{
font-size:14px;
text-transform:uppercase;
margin:14px 0 7px;
}
Textos
Párrafo (p)
article .column2 p
In at nunc purus. Nullam venenatis ornare commodo. Aliquam iaculis, orci eu auctor blandit, nisi augue tempor lorem, quis tempor justo nibh et nisi. Vestibulum eu erat eu elit molestie euismod at et tortor. Maecenas venenatis risus in nisl commodo vel mattis nisl pretium. Pellentesque ac posuere purus. Etiam ut velit a neque pharetra gravida at a leo. Duis sed ultrices nisi. Integer consectetur varius tortor, id tincidunt est iaculis ac. Vestibulum vel neque felis. Suspendisse rutrum dictum orci eget elementum. Sed commodo neque ac mauris sagittis ac sagittis velit iaculis. Sed ac est tortor. Mauris nulla odio, interdum sit amet blandit eu, eleifend nec sapien. Pellentesque nec arcu quis nulla auctor pulvinar in sit amet augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Phasellus ullamcorper dolor commodo velit adipiscing ornare. Etiam rutrum dui at nunc varius ac auctor urna dignissim. Fusce vitae elit a turpis cursus condimentum. Phasellus nisl lacus, congue ac venenatis quis, dapibus non orci. Fusce elementum hendrerit nisl, eget suscipit lorem venenatis ut. Integer porta venenatis eros in pharetra. Quisque ut lorem augue. Aenean congue blandit commodo.
/*LESS*/
article{
&#publicacion, &#permanente{
.column2{
.content-columns(2, @baseline);
p{
font-size:@small;
font-weight:lighter;
line-height:140%;
margin-bottom:@small;
}
}
}
}
/*CSS*/
article#publicacion .column2,
article#permanente .column2 {
-moz-column-count: 2;
-moz-column-gap: 25.34px;
-webkit-column-count: 2;
-webkit-column-gap: 25.34px;
column-count: 2;
column-gap: 25.34px;
}
article#publicacion .column2 p,
article#permanente .column2 p {
font-size: 12.32px;
font-weight: lighter;
line-height: 140%;
margin-bottom: 12.32px;
}
STRONG Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel...
EM Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel...
STRONG EM Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel...
OL LI
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Cum sociis natoque penatibus et magnis dis parturient montes.
- ultricies nec, pellentesque eu, pretium quis, sem.
UL LI
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Cum sociis natoque penatibus et magnis dis parturient montes.
- ultricies nec, pellentesque eu, pretium quis, sem.
/*LESS*/
article{
&#publicacion, &#permanente{
.column2{
.content-columns(2, @baseline);
strong{
font-weight: bold;
}
em{
font-style: italic;
}
em strong{
font-style: italic; font-weight: bold;
}
ul, ol{
margin-bottom: @cuerpo;
li{
font-size:@small;
line-height:120%;
}
}
ul{
li{
list-style: disc inside;
}
}
ol{
li{
list-style: decimal inside;
}
}
}
}
}
/*CSS*/
article#publicacion .column2,
article#permanente .column2 {
-moz-column-count: 2;
-moz-column-gap: 25.34px;
-webkit-column-count: 2;
-webkit-column-gap: 25.34px;
column-count: 2;
column-gap: 25.34px;
}
article#publicacion .column2 strong{
font-weight: bold;
}
article#publicacion .column2 em{
font-style: italic;
}
article#publicacion .column2 em strong{
font-style: italic;
font-weight: bold;
}
article#publicacion .column2 ul, ol{
margin-bottom: 14px;
article#publicacion .column2 ul li{
list-style: disc inside;
font-size:12px;
line-height:120%;
}
article#publicacion .column2 ol li{
list-style: decimal inside;
font-size:12px;
line-height:120%;
}
.block .sub-block p
.block .sub-block p ~.block .sub-block p a
.block .sub-block p ~.block .sub-block p a:hover
/*LESS*/
.block{
.sub-block{
p{
padding-top:@cuerpo/2;
font-family:@special;
line-height:100%;
display:inline-block;
color:@gray;
a{
&:link, &:visited{color:@black;}
&:hover{color:@colorHover;}
}
}
}
}
/*CSS*/
content .pagewrap .block .sub-block p{
padding-top:7px;
font-family:'Open Sans',sans-serif;
line-height:100%;
display:inline-block;
color:#808080;
}
.block .sub-block p a:link,
.block .sub-block p a:visited{
color:#000000;
}
.block .sub-block p a:hover{
color:#0B507B;
}
.portada .top-news a p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem felis, rhoncus id dignissim in, rhoncus in enim. Duis vitae ipsum justo, id vestibulum ante. Cras sollicitudin ante eros.
/*LESS*/
.portada{
.top-news{
#font > .serif;
text-align:center;
a{
p{
font-size:1.2em;
padding: 10px 0;
margin: 0 auto;
width: 50%;
line-height:160%;
color:lighten(@lightGray, 20%);
&.top-dato{
border-top: 1px dotted
rgba(255,255,255,0.4);
font-size: 1em;
font-style: italic;
}
}
}
}
}
/*CSS*/
.portada .top-news{
font-family:"Georgia",Times New Roman,
Times,serif;
font-weight:normal;
font-size:14px;
text-align:center;
}
.portada .top-news a p{
font-size:1.2em;
padding: 10px 0;
margin: 0 auto;
width: 50%;
line-height:160%;
color:#F2F2F2;
}
.portada .top-news a p.top-dato{
border-top: 1px dotted
rgba(255,255,255,0.4);
font-size: 1em;
font-style: italic;
}
Botones
<a class="btn">
A partir de una clase llamada .btn que define los parámetros generales del div, se generan los botones.
estructura de botón
/*LESS*/
a.btn{
color: @white;
text-decoration:none;
}
.btn{
color: @white;
outline: none;
cursor: pointer;
text-align: center;
padding: .5em 2em .55em;
font-size: @small;
text-shadow: @shadow;
.box-shadow;
.border-radius;
.transition(@transition);
.gradientBar(@grayLight, darken(@grayLight, 20%));
&:active{
position:relative;
top:1px;
}
}
/*CSS*/
a.btn{
color: #FFFFFF;
text-decoration:none;
}
.btn{
color: #FFFFFF;
outline: none;
cursor: pointer;
text-align: center;
padding: .5em 2em .55em;
font-size: 12px;
text-shadow:0 1px 1px rgba(0,0,0, .1);
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
transition: all 0.3s ease 0s;
}
.btn:active{
position:relative;
top:1px;
}
El color, posición, padding y otras especificaciones se los da una segunda clase. A continuación, el catálogo de los botones que utilizan la clase button.
<a class="btn blue">
btn.blue
btn.blue:hover
/*LESS*/
.btn{
&.blue{
border: 1px solid @blue;
.gradientBar(@blue, @blueDark);
&:hover{
.gradientBar(darken(@blue, 8%),
darken(@blueDark,8%));
}
}
}
/*CSS*/
.btn.blue{
border: 1px solid #34A5EC;
background-color: #127EC1;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#34A5EC), to(#127EC1));
background-image: -moz-linear-gradient(top, #34A5EC, #127EC1);
background-image: -ms-linear-gradient(top, #34A5EC, #127EC1);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34A5EC),
color-stop(100%, #127EC1));
background-image: -webkit-linear-gradient(top, #34A5EC, #127EC1);
background-image: -o-linear-gradient(top, #34A5EC, #127EC1);
background-image: linear-gradient(top, #34A5EC, #127EC1);
filter: e(%("progid:DXImageTransform.Microsoft.gradient
(startColorstr='%d', endColorstr='%d', GradientType=0)",#34A5EC,#127EC1));
border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn.blue:hover{
background-color: #0F659C;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#1593E2), to(#0F659C));
background-image: -moz-linear-gradient(top, #1593E2, #0F659C);
background-image: -ms-linear-gradient(top, #1593E2, #0F659C);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1593E2),
color-stop(100%, #0F659C));
background-image: -webkit-linear-gradient(top, #1593E2, #0F659C);
background-image: -o-linear-gradient(top, #1593E2, #0F659C);
background-image: linear-gradient(top, #1593E2, #0F659C);
filter: e(%("progid:DXImageTransform.Microsoft.gradient
(startColorstr='%d', endColorstr='%d', GradientType=0)",#1593E2,#0F659C));
border: 1px solid rgba(0, 0, 0, 0.1);
}
<a class="btn green">
.btn.green
.btn.green:hover
/*LESS*/
.btn{
&.green{
border: 1px solid @green;
.gradientBar(@green, @greenDark);
padding:0.5em 1em;
font-size:12px;
vertical-align:middle;
color: @white;
&:hover{
.gradientBar(darken(@green, 5%),
darken(@greenDark,5%));
}
}
}
/*CSS*/
.btn.green{
border: 1px solid #8EC236;
background-color: #609D1E;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#8EC236), to(#609D1E));
background-image: -moz-linear-gradient(top, #8EC236, #609D1E);
background-image: -ms-linear-gradient(top, #8EC236, #609D1E);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #8EC236), color-stop(100%, #609D1E));
background-image: -webkit-linear-gradient(top, #8EC236, #609D1E);
background-image: -o-linear-gradient(top, #8EC236, #609D1E);
background-image: linear-gradient(top, #8EC236, #609D1E);
filter: e(%("progid:DXImageTransform.Microsoft.gradient
(startColorstr='%d', endColorstr='%d', GradientType=0)",#8EC236,#609D1E));
padding:0.5em 1em;
font-size:12px;
vertical-align:middle;
color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn.green:hover{
background-color: #53881A;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#7FAE30), to(#53881A));
background-image: -moz-linear-gradient(top, #7FAE30, #53881A);
background-image: -ms-linear-gradient(top, #7FAE30, #53881A);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #7FAE30), color-stop(100%, #53881A));
background-image: -webkit-linear-gradient(top, #7FAE30, #53881A);
background-image: -o-linear-gradient(top, #7FAE30, #53881A);
background-image: linear-gradient(top, #7FAE30, #53881A);
filter: e(%("progid:DXImageTransform.Microsoft.gradient
(startColorstr='%d', endColorstr='%d', GradientType=0)",#7FAE30,#53881A));
}
<div class="reply">
ol.commentlist li div.reply a
ol.commentlist li div.reply a
/*LESS*/
(...)
div.reply{
text-align: left;
a {
font-size: .8em;
background: @greenDark;
padding: .4em .65em .3em;
color: @white;
.border-radius(3px);
&:hover{
background:@black;
}
}
}
/*CSS*/
ol.commentlist li div.reply a{
font-size: .8em;
background: #609D1E;
padding: .4em .65em .3em;
color: #FFFFFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
ol.commentlist li div.reply a:hover{
background-color:#000000;
}
<div class="profile-info"><span>
.profile-info h2 span a .profile-info h2 span a:hover
/*LESS*/
(...)
span{
a{
font-size: small;
padding: 3px 10px;
.border-radius(4px);
background: @grayLight;
text-shadow: none;
.transition(@transition);
vertical-align: text-top;
color: @white;
&:hover{
color: @white;
background: @color;
}
}
}
/*CSS*/
.profile-info h2 span a{
font-size: 13px;
padding: 3px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #BFBFBF;
text-shadow:none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
vertical-align: text-top;
color: #FFFFFF;
}
.profile-info h2 span a:hover{
background:#127EC1;
}
Formularios (input)
input.datos
|
campo de texto
/*LESS*/
(...)
form, #map_form{
input{
&.datos{
border: 1px solid @borde;
.border-radius(2px);
.box-shadow(0 1px 3px @grayLighter inset);
padding: 8px;
width: 97%;
margin-bottom: 5px;
font-size:12px;
font-weight:lighter;
}
&.w70{width: 70%;}
}
}
/*CSS*/
article#publicacion form input.datos,
article#publicacion #map_form input.datos{
border: 1px solid
rgba(128, 128, 128, 0.3);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px #FAFAFA
inset;
-moz-box-shadow: 0 1px 3px #FAFAFA
inset;
box-shadow: 0 1px 3px #FAFAFA inset;
padding: 8px;
width: 97%;
margin-bottom: 5px;
font-size: 12px;
font-weight: lighter;
}
article#publicacion form input.datos.w70,
article#publicacion #map_form input.datos.w70{
width:70%;
}
textarea.text-input
campo de texto |
/*LESS*/
#commentform{
width: @commentWidth - @commentPadding;
.text-input {
#font > .sans-serif(lighter,@small,135%);
background: @white;
width: 100%;
border: 1px solid @grayLight;
.border-radius(2px);
height: 100px;
.box-shadow(0 1px 3px
rgba(102, 102, 102, 0.2) inset);
color: lighten(@grayDark, 15%);
padding: @commentPadding;
margin-bottom: @margin/2;
}
}
/*CSS*/
#respond #commentform{
width: 58%;
}
#respond #commentform .text-input{
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
font-size: 12px;
line-height: 135%;
background: #FFFFFF;
width: 100%;
border: 1px solid #BFBFBF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height: 100px;
-webkit-box-shadow: inset 0 1px 3px
rgba(102, 102, 102, 0.2);
-moz-box-shadow: inset 0 1px 3px
rgba(102, 102, 102, 0.2);
box-shadow: inset 0 1px 3px
rgba(102, 102, 102, 0.2);
color: #666666;
padding: 2%;
margin-bottom: 12px;
}
Iconografía
Compartir en redes
Links
Publicaciones
