OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
openproject/app/assets/stylesheets/styleguide.html.lsg

108 lines
2.2 KiB

@require sassc
@sass ../stylesheets/openproject.sass
@title "Living Style Guide for OpenProject"
@style base-font: Lato
@style base-font-size: 16px
@style background-color: white
@default preprocessor: sass
@css
.livingstyleguide--header {
@include grid-content;
}
.livingstyleguide--footer {
@include grid-content;
}
.livingstyleguide--intro {
@include grid-content;
}
.styleguide-banner {
height: 280px;
padding: 200px 0 0;
background: url('/assets/styleguide/logo_openproject.png');
background-position: top center;
background-repeat: no-repeat;
}
.styleguide-banner--text {
text-align: center;
}
.styleguide-nav--menu-items {
@extend %menu-bar;
@include menu-bar-layout;
@include menu-bar-style(#eee);
}
.livingstyleguide--code-block {
max-height: 300px;
}
.livingstyleguide--example {
overflow: visible;
}
.lsg-search-box {
width: 40%;
margin: 0 auto;
}
.icon-list {
display: flex;
flex-flow: row wrap;
width: 640px;
margin: 0 auto;
}
.icon-list li {
flex: 1;
flex-basis: 15%;
display: block;
text-align: center;
margin: 10px;
font-size: 12px;
}
.icon-list .span {
display: block;
font-size: 30px;
}
@header
<header class="livingstyleguide--header">
<div class="styleguide-banner">
<h1 class="styleguide-banner--text">Living Style Guide</h1>
</div>
</header>
<nav class="styleguide-nav">
<ul class="styleguide-nav--menu-items">
<li><a target="_self" href="#color-variables">Colors</a></li>
<li><a target="_self" href="#fonts">Fonts</a></li>
<li><a target="_self" href="#forms">Forms</a></li>
<li><a target="_self" href="#notifications">Notifications</a></li>
<li><a target="_self" href="#buttons">Buttons</a></li>
<li><a target="_self" href="#pagination">Pagination</a></li>
</ul>
</nav>
<section class="livingstyleguide--intro">
<p>&nbsp;</p>
</section>
@javascript-before /assets/styleguide.js
@search-box
@footer
<footer class="livingstyleguide--footer">
Copyright © 2019 OpenProject - All rights reserved.
</footer>
@import ../stylesheets/**/_*.lsg