github/clearless
1
1
Fork 0
mirror of https://github.com/clearleft/clearless.git synced 2026-01-06 20:33:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix syntax issue in arrows.less. Closes issue #3

Browse Source
This commit is contained in:
Mark Perkins
2012-10-09 09:57:06 +01:00
parent b09e8ed96a
commit 33cfea8156
4 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
examples/arrows.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" class="generatedcontent">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/example.css" type="text/css">
<title>ClearLess Examples</title>
</head>
<body>
<div class="receptacle header">
<h1>Arrows</h1>
</div>
<div class="receptacle">
<h2>Arrow box</h2>
<div class="arrowbox-example">
<p>This is a box with a handy pointer arrow!</p>
</div>
</div>
</body>
</html>

34
examples/css/example.css
View File

@@ -502,4 +502,36 @@ h2 {
.social--huffduffer:before {
background: url('../img/huffduffer-32x32.png') no-repeat 0 0;
}
/* Other Helpers */
/* Arrows */
.arrowbox-example {
position: relative;
background: #ffffff;
border: 1px solid #999999;
margin: 30px 0;
max-width: 300px;
padding: 20px;
}
.arrowbox-example:after,
.arrowbox-example:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrowbox-example:after {
border-color: transparent;
border-bottom-color: #ffffff;
border-width: 15px;
left: 50%;
margin-left: -15px;
}
.arrowbox-example:before {
border-color: transparent;
border-bottom-color: #999999;
border-width: 16px;
left: 50%;
margin-left: -16px;
}

8
examples/less/example.less
View File

@@ -264,6 +264,12 @@ h2 {
}
/* Other Helpers */
/* Arrows */
.arrowbox-example {
.arrowbox( up, 15px, #fff, 1px, #999 );
margin: 30px 0;
max-width: 300px;
padding: 20px;
}

4
mixins/arrows.less
View File

@@ -7,7 +7,7 @@
.arrowbox(@pos, @size, @bg-color, @offset:50%) {
@after-margin = @size * -1px;
@after-margin: @size * -1px;
position: relative;
background: @bg-color;
@@ -35,7 +35,7 @@
.arrowbox(@pos, @size, @bg-color, @border-width, @border-color, @offset:50%) {
@before-margin = (@size + round(@border-width * 1.41421356)) * -1px;
@before-margin: (@size + round(@border-width * 1.41421356)) * -1px;
.arrowbox(@pos, @size, @bg-color, @offset);