github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-02 10:00:47 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add styleguide classes.

Browse source
This commit is contained in:
Paulo Reis 2017-10-20 10:53:08 +01:00
parent f6ebbc37db
commit 033e3cfcc6
2 changed files with 66 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
services/web/public/stylesheets/app/ol-style-guide.less Normal file
View file

@ -0,0 +1,65 @@
.renderColorSwatchClasses(@colorName) {
@colorVal: @@colorName;
@colorValRed: red(@colorVal);
@colorValGreen: green(@colorVal);
@colorValBlue: blue(@colorVal);
@colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
&.@{colorName} {
.color-swatch {
background-color: @colorVal;
}
.color-less-var::before {
content: '@@{colorName}';
}
.color-hex-val::before {
content: '@{colorVal}';
}
.color-rgb-val::before {
content: '@{colorValAsRGB}';
}
}
}
.color-row {
display: flex;
justify-content: space-between;
}
.color-box {
background: white;
margin: 10px 4px;
flex: 1;
border-radius: 4px;
.renderColorSwatchClasses(ol-blue-gray-1);
.renderColorSwatchClasses(ol-blue-gray-2);
.renderColorSwatchClasses(ol-blue-gray-3);
.renderColorSwatchClasses(ol-blue-gray-4);
.renderColorSwatchClasses(ol-blue-gray-5);
.renderColorSwatchClasses(ol-blue-gray-6);
.renderColorSwatchClasses(ol-green);
.renderColorSwatchClasses(ol-dark-green);
.renderColorSwatchClasses(ol-blue);
.renderColorSwatchClasses(ol-dark-blue);
.renderColorSwatchClasses(ol-red);
.renderColorSwatchClasses(ol-dark-red);
}
.color-swatch {
height: 100px;
width: 100px;
margin: 10px auto;
border-radius: 4px;
}
.color-label {
display: flex;
flex-direction: column;
margin: 0 3px 10px;
}
.color-label pre {
font-size: 12px;
line-height: 1.8em;
margin: 0 auto;
}

1
services/web/public/stylesheets/ol-style.less
View file

@ -1,3 +1,4 @@
// Core variables and mixins // Core variables and mixins
@import "core/ol-variables.less"; @import "core/ol-variables.less";
@import "app/ol-style-guide.less";
@import "_style_includes.less"; @import "_style_includes.less";