Skip to content

Instantly share code, notes, and snippets.

@urban
Last active August 29, 2015 14:15
Show Gist options
  • Save urban/18bcc973d69887068c5f to your computer and use it in GitHub Desktop.
Save urban/18bcc973d69887068c5f to your computer and use it in GitHub Desktop.
Selectize.js less error test
<!DOCTYPE html>
<html>
<head>
<title>Less Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
{
"name": "selectize-less-test",
"version": "1.0.0",
"description": "Isolating less error for selectize.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle-css": "lessc styles.less > styles.css",
"start": "npm run bundle-css && open ./index.html"
},
"author": "Urban Faubion <urban.faubion@gmail.com>",
"dependencies": {
"less": "^2.4.0"
}
}
.container {
border: 1px solid black;
height: 25px;
position: relative;
}
.container .box {
border: 1px solid red;
height: 25px;
}
.container .box:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
@selectize-arrow-size: 5px;
@selectize-arrow-color: #808080;
@selectize-arrow-offset: 15px;
@box-height: 25px;
.container {
border: 1px solid black;
height: @box-height;
position: relative;
.box {
border: 1px solid red;
height: @box-height;
&:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: @selectize-arrow-offset;
margin-top: round(-1 * @selectize-arrow-size / 2);
width: 0;
height: 0;
border-style: solid;
border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
border-color: @selectize-arrow-color transparent transparent transparent;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment