@import url('fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&display=swap’);@import url('fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
$primary-color: #8600E8; $dark-color: #142233; $gray-200: #F1F5F9; $gray-400: #DFE5EC; $text-color-primary: $dark-color; $text-color-regular: #3E546B; $link-color: #8905EA; $link-color-hover: #6109A1; $header-bg: f4f7fd; $code-bg: f4f7fd; $font-family-primary: 'Poppins', sans-serif; $font-family-regular: 'Source Sans Pro', sans-serif;
@mixin shadow($alpha) {
-webkit-box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha); -moz-box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha); box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha);
}
body {
color: $text-color-regular; margin: 0; padding-top: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #F9FBFD; font-family: $font-family-regular;
}
a {
color: $link-color; text-decoration: none; &:hover { color: $link-color-hover; }
}
a.ad-btn-nav-home {
font-family: $font-family-primary; margin-top: 5px; margin-bottom: 25px; padding: 15px; display: block; border: 1px solid $gray-400; border-radius: 5px; line-height: 13px; font-size: 14px; font-weight: 400; color: $text-color-primary; letter-spacing: 0.4px; .symbol { font-size: 12px; margin-right: 3px; } &:hover { background: rgba(200,200,255, 0.08); } &.active { background: $primary-color; color: #fff; }
}
.ad-btn-default {
@include shadow(0.05); font-family: $font-family-primary; background: transparent; border: 1px solid $link-color; border-radius: 5px; padding: 5px 10px; &:hover { border-color: $link-color-hover; color: $link-color-hover; }
}
.ad-btn-primary {
@include shadow(0.2); font-family: $font-family-primary; background: $link-color; border: 1px solid $link-color; border-radius: 5px; color: #fff; padding: 5px 10px; &:hover { background: $link-color-hover; color: #fff; }
}
.btn-lg {
font-size: 20px; font-weight: 600; font-family: $font-family-primary; padding: 10px 15px;
}
.primary-color {
color: $primary-color;
}
h1 {
font-family: $font-family-primary; font-size: 42px; text-transform: uppercase; font-weight: 800; i.fas, .symbol { font-size: 20px; margin-right: 7px; }
}
h2 {
margin-top: 60px; margin-bottom: 15px; font-size: 32px; font-family: $font-family-primary; border-bottom: 1px solid $gray-400; i.fas, .symbol { font-size: 16px; margin-right: 5px; }
}
h3 {
margin-top: 40px; margin-bottom: 10px; font-size: 20px; font-family: $font-family-primary; i.fas, .symbol { font-size: 14px; margin-right: 5px; }
}
h4 {
margin-top: 30px; margin-bottom: 5px; font-family: $font-family-primary; font-weight: 600; i.fas, .symbol { font-size: 14px; margin-right: 5px; }
}
p + ul {
margin-top: 5px; margin-bottom: 20px;
}
p {
margin-top: 15px; margin-bottom: 5px;
}
hr {
height: 1px; background-color: $gray-400; border: none;
}
.container {
max-width: 1200px; margin-left: auto; margin-right: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.ad-page__two-columns-layout {
display: flex; min-height: calc(100% - 80px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .ad-page__sidebar { width: 300px; min-width: 300px; border-right: 1px solid $gray-400; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ad-page__content { width: 100%; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}
.ad-page__navbar {
@include shadow(0.1); border-bottom: 1px solid $gray-400; position: fixed; top: 0; width: 100%; background: #fff; .nav-brand { color: $text-color-primary; font-family: $font-family-primary; font-weight: bold; } .ad-page__navbar-content { padding: 5px 15px; display: flex; align-items: center; min-height: 40px; }
}
.ad-site-nav {
}
button.ad-collapsible, .ad-collapsible {
font-family: $font-family-primary; background: transparent; border-width: 0; box-shadow: none; width: 100%; padding-top: 12px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; cursor: pointer; text-align: left; border-bottom: 1px solid $gray-400; font-size: 14px; font-weight: bold; text-transform: uppercase; color: $text-color-regular; margin-bottom: 5px; &:after { content: '\25BE'; font-size: 13px; float: right; margin-left: 5px; } &.active:after { content: "\2212"; } &:focus { outline: none; background: rgba(0,0,0,0.01); }
}
.ad-collapsible-content {
box-sizing: border-box; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; margin: 5px 0; list-style: none; padding: 0; font-weight: 400; font-size: 14px; line-height: 14px; li { a { width: 100%; padding: 5px 10px; display: block; box-sizing: border-box; } a:hover { background: rgba(200,200,255, 0.08); } &.active a { color: #fff; font-weight: 600; background: $primary-color; border-radius: 3px; } }
}
.ad-page__footer {
background: $dark-color; padding: 30px 15px; color: #fff; .links-list { list-style: none; padding-left: none; li { padding: 2px 5px; a { color: $text-color-regular; font-size: 14px; i { margin-right: 3px; font-size: 11px; } &:hover { color: $link-color; } } } } .ad-page__footer-content { display: flex; align-items: center; justify-content: flex-end; } .ad-page__subfooter-content { border-top: 1px solid $text-color-regular; font-size: 11px; text-align: center; padding: 5px; color: $text-color-regular; }
}
.ad-doc__header {
border-bottom: 1px solid #f3f3f3; background: $header-bg; padding: 30px; h1 { margin-top: 0; margin-bottom: 30px; } .ad-doc__table-of-contents { ul.section-nav { padding-left: 5px; list-style: none; margin: 0; ul { padding-left: 25px; list-style: none; } } }
}
.ad-doc__content {
padding: 15px; max-width: 800px; img { max-width: 100%; } table { border: 1px solid $gray-400; box-sizing: border-box; border-spacing: 0; font-size: 14px; td, th { border-right: 1px solid $gray-400; border-bottom: 1px solid $gray-400; padding: 3px; &:last-child { border-right-width: 0px; } } th { font-size: 14px; } tr:last-child td { border-bottom-width: 0px; } }
}
.ad-project-overview {
.ad-project-overview__header { padding: 30px; background: $header-bg; h1 { margin-bottom: 5px; } .ad-project-overview__version { opacity: 0.3; font-size: 12px; } .ad-project-overview__site-description { color: $text-color-regular; opacity: 0.5; } }
}
.ad-page-section {
padding-top: 15px; padding-bottom: 15px;
}
.ad-system_components {
display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; .ad-system_component { min-width: 120px; flex: 1; display: flex; flex-direction: column; border: 1px solid $gray-200; padding: 5px; .name { font-family: $font-family-primary; font-weight: bold; text-transform: uppercase; font-size: 12px; } ul { list-style: none; padding-left: 5px; margin-top: 3px; margin-bottom: 3px; font-size: 12px; } }
}
.ad-useful-links {
display: flex; flex-wrap: wrap; .ad-useful-links__col { flex: 1; border-right: 1px solid $gray-400; &:last-child { border-width: 0; } &.w-200 { width: 200px; min-width: 200px; max-width: 200px; } ul { list-style: none; margin: 3px 0; padding-left: 0; li { padding: 2px 5px; a { font-size: 16px; i { min-width: 16px; text-align: center; margin-right: 3px; font-size: 11px; } } } } }
}
.ad-project-overview__next-button {
padding-top: 40px; padding-bottom: 40px; text-align: center;
}
.tag {
padding: 2px 4px; background: $primary-color; color: #fff; font-size: 12px; border-radius: 3px; font-weight: 500; font-family: $font-family-primary; text-transform: uppercase; &.tag--planning { background: #06A789; } &.tag--todo { background: #0392CC; } &.tag--inprogress { background: #F6D102; } &.tag--done { background: #09D660; } &.tag--pause { background: #ABC9B8; } &.tag--low { background: #8AADB4; } &.tag--medium { background: #F2BE04; } &.tag--high { background: #F20455; } &.tag--epic { background: #0392CC; } &.tag--user-story { background: #ABC9B8; }
}
.ad-nav-link {
display: flex; flex-direction: column; .title { } .doc-meta-nav { padding-top: 5px; padding-bottom: 3px; opacity: 0.2; & > span { margin-right: 5px; &:last-child { margin-right: 0; } } .tag { letter-spacing: 0.5px; font-size: 9px; padding: 1px 2px; } .version { font-size: 11px; font-weight: 500; } } &:hover { .doc-meta-nav { opacity: 1; } }
}
.ad-site-nav {
li.active { .ad-nav-link { .doc-meta-nav { opacity: 1; } } }
}
.feature-meta {
display: flex; & > div { padding: 10px; min-width: 20%; border-right: 1px solid $gray-200; display: flex; flex-direction: column; &:last-child { border-width: 0; } label { font-size: 12px; margin-bottom: 2px; font-weight: 500; font-family: $font-family-primary; color: $gray-400; } }
}
.requirements-list {
padding-top: 40px; padding-bottom: 40px; .requirements-list__item { border-bottom: 1px solid $gray-200; padding-top: 20px; padding-bottom: 20px; h4 { margin-top: 0px; } .requirements-list__id { font-size: 10px; color: $primary-color; } ul.links { margin-top: 20px; list-style: none; padding-left: 0; margin-top: 3px; margin-bottom: 3px; font-size: 14px; } }
}
code.highlighter-rouge {
background: $code-bg; padding: 1px 3px; border-radius: 2px; color: #e00bbc;
}
pre.highlight {
padding: 10px; background: $code-bg; border: 1px solid $gray-400; border-radius: 3px; overflow-x: auto; .k { color: #e00bbc; font-weight: bold; } .nf { color: #6902f1; font-weight: bold; } .s2 { color: #189c41; }
}
.highlighter-rouge.language-scss {
.c1 { color: #aaa; } .nv { color: #e00bbc; font-weight: bold; } .nt { color: #0b11d8; font-weight: bold; } .nc { color: #cea513; font-weight: bold; }
}
.highlighter-rouge.language-ruby {
.n { color: blue; } .ss { color: #34bad8; } .s1 { color: #189c41; } .c1 { color: #aaa; }
}
.highlighter-rouge.language-bash {
.nv { color: blue; } .nb { color: #189c41; } .nt { color: #34bad8; } .c { color: #aaa; }
}
.highlighter-rouge.language-javascript {
.nv { color: #cea513; } .nx { color: blue; } .nt { color: #34bad8; } .c1 { color: #aaa; } .kd { color: #cea513; font-weight: bold; }
}