mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Add styleguide classes.
This commit is contained in:
parent
f6ebbc37db
commit
033e3cfcc6
2 changed files with 66 additions and 0 deletions
65
services/web/public/stylesheets/app/ol-style-guide.less
Normal file
65
services/web/public/stylesheets/app/ol-style-guide.less
Normal 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,3 +1,4 @@
|
|||
// Core variables and mixins
|
||||
@import "core/ol-variables.less";
|
||||
@import "app/ol-style-guide.less";
|
||||
@import "_style_includes.less";
|
Loading…
Reference in a new issue