blahutka · April 8, 2011 18:01
diff --git a/menus.scss b/menus.scss
 @import "compass/utilities";
 @import "compass/css3";

 body {background-color:#7A7B82;}
 .rounded-border {
   background-color: white;
   border: 1px solid #9A9A9A;
   @include border-radius(5px, 5px);
 }
 .round-gray {
   min-width:400px;
   min-height:37px;
   background-color: gray;
   border: 1px solid #9A9A9A;
   @include border-radius(5px, 5px);
   @include background-image(linear-gradient(#F1F1F1, #CCCCCC));
   @include box-shadow( 1px 1px 2px #333333);
 }

 .menu-vertical {
     width: 400px;
   & ul {list-style: none;}
   & li {@extend .round-gray; margin: 5px 0;padding:10px; @include float-left;}
   & li:hover {@include background-image(linear-gradient(scale-lightness(#F1F1F1, -30), scale-lightness(#CCCCCC, -30)));}
   & li a {color:#444446; text-decoration:none;}
   & li a {@extend .text-shadow;}
 }

 .button {
     font-size:10px !important;
     border: 1px solid #cccccc; border-bottom:1px solid #eaeaea;
     background-color: white;
     padding: 3px 8px;
    @include border-radius(5px, 5px);
 }

 .buttons {float:right;margin: 0 10px;}

 .content {@include float-left; @include clearfix;
  margin:10px 0 0;
  @extend .rounded-border;
  width:100%;
  height:50px;
  clear:both;
  padding:5px 0 5px;
 }

 .text-shadow {
   font-weight:bold;
   font-size:14px;
   color:#444446;
   @include text-shadow(1px 1px 2px white);
 }

 /*
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
    <title>BASE::Menus</title>
    <link rel="stylesheet" href="style.css"/>
 </head>
 <body class="menus-page">


 <div class="round-gray"></div>

 <div class="menu-vertical">
    <ul>
        <li>
            <div>
                <a href="#">This is loreipsum</a>

                <div class="buttons"><a href="#" class="button active">Upravit</a></div>
                <div class="content">content</div>
            </div>
        </li>
        <li><a href="#">This is loreipsum</a></li>
        <li><a href="#">This is loreipsum</a></li>
        <li><a href="#">This is loreipsum</a></li>
    </ul>
 </div>

 </body>
 </html>

 */
	@import "compass/utilities";
	@import "compass/css3";

	body {background-color:#7A7B82;}
	.rounded-border {
	background-color: white;
	border: 1px solid #9A9A9A;
	@include border-radius(5px, 5px);
	}
	.round-gray {
	min-width:400px;
	min-height:37px;
	background-color: gray;
	border: 1px solid #9A9A9A;
	@include border-radius(5px, 5px);
	@include background-image(linear-gradient(#F1F1F1, #CCCCCC));
	@include box-shadow( 1px 1px 2px #333333);
	}

	.menu-vertical {
	width: 400px;
	& ul {list-style: none;}
	& li {@extend .round-gray; margin: 5px 0;padding:10px; @include float-left;}
	& li:hover {@include background-image(linear-gradient(scale-lightness(#F1F1F1, -30), scale-lightness(#CCCCCC, -30)));}
	& li a {color:#444446; text-decoration:none;}
	& li a {@extend .text-shadow;}
	}

	.button {
	font-size:10px !important;
	border: 1px solid #cccccc; border-bottom:1px solid #eaeaea;
	background-color: white;
	padding: 3px 8px;
	@include border-radius(5px, 5px);
	}

	.buttons {float:right;margin: 0 10px;}

	.content {@include float-left; @include clearfix;
	margin:10px 0 0;
	@extend .rounded-border;
	width:100%;
	height:50px;
	clear:both;
	padding:5px 0 5px;
	}

	.text-shadow {
	font-weight:bold;
	font-size:14px;
	color:#444446;
	@include text-shadow(1px 1px 2px white);
	}

	/*
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>BASE::Menus</title>
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body class="menus-page">


	<div class="round-gray"></div>

	<div class="menu-vertical">
	<ul>
	<li>
	<div>
	<a href="#">This is loreipsum</a>

	<div class="buttons"><a href="#" class="button active">Upravit</a></div>
	<div class="content">content</div>
	</div>
	</li>
	<li><a href="#">This is loreipsum</a></li>
	<li><a href="#">This is loreipsum</a></li>
	<li><a href="#">This is loreipsum</a></li>
	</ul>
	</div>

	</body>
	</html>

	*/