guru.nidi.raml.doc.static.style.less Maven / Gradle / Ivy

Go to download
@title-back-color: #333;
@title-color: #fff;
@link-color: #888;
@code-link-color: blue;
@table-line-color: #ccc;
@table-head-line-color: #000;
@code-back-color: #fff;
@badge-text-color: #fff;

@get-color: #0f6ab4;
@post-color: #10a04a;
@put-color: #9b6a22;
@delete-color: #a41e22;
@patch-color: #02b0e2;
@security-color: #cb00cb;

@try-data-padding: .2em;
@resources-with: 22em;

@import "custom-variables";

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 85%;
  line-height: 1.4;
}

header {
  background-color: @title-back-color;
  color: @title-color;
  padding: 1em 2em;
  margin-bottom: 1em;

  h1 {
    margin-top: 0;
  }

  a, a:visited, a:active, a:hover {
    color: @title-color;
  }
}

a, a:visited, a:active, a:hover {
  color: @link-color;
}

.resources {
  white-space: nowrap;
  line-height: 150%;
  width: @resources-with;
  float: left;
  padding-left: 1em;
  overflow: auto;
}

.content {
  margin-left: @resources-with+2em;
  padding-right: 1em;
}

.desc {
  margin: 1em;
}

.title {
  margin-top: 1em;
  font-weight: bold;
}

.mainTitle {
  font-size: 125%;
}

.actionHeader {
  margin-top: 1em;
  min-height: 1.8em;
  cursor: pointer;
  padding: .5em;
}

.actionDetail {
  padding: .5em;
}

.actionDesc {
  margin-left: 6em;
}

table.params {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;

  input {
    width: 100%;
    box-sizing: border-box;
  }

  textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 10em;
  }

  td {
    padding: .2em;
    margin: 0;
    border-bottom: 1px solid @table-line-color;
  }

  ul, ol{
    padding-left: 1.2em;
  }
}

td.center {
  text-align: center;
}

.badge {
  float: left;
  border-radius: 0;
  color: @badge-text-color;
  text-align: center;
  text-transform: uppercase;
  width: 4em;
  padding: .3em;
}

.action(GET, @get-color);
.action(POST, @post-color);
.action(PUT, @put-color);
.action(DELETE, @delete-color);
.action(PATCH, @patch-color);
.action(SECURITY, @security-color);

.action(@name,@value) {
  .badge_@{name} {
    background-color: @value;
  }

  .border_@{name} {
    border: 1px solid lighten(@value, 45%);
  }

  .bg_@{name} {
    background-color: lighten(@value, 55%);
  }
}

.bg_SECURITY {
  padding: .5em;
}

.code {
  max-height: 25em;
  overflow: auto;
  background-color: @code-back-color;
}

code {
  white-space: nowrap;
  padding: .2em .4em;
  border-radius: .4em;
  background-color: @code-back-color;
}

pre code {
  display: block;
  padding: 1em;
  border: .1em solid @table-line-color;
  margin-bottom: .5em;
}

.tryData {
  width: 100%;
  min-height: 1em;
  max-height: 25em;
  overflow: auto;
  background-color: @code-back-color;
  font-family: inherit;
  font-size: 100%;
  margin-bottom: .8em;
  padding: @try-data-padding;

}

input.tryData {
  height: 1.4em;
}

button {
  padding: .7em;
  border-radius: .6em;
  border-style: outset;
  cursor: pointer;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

.invisible {
  display: none;
}

.active:hover, .inactive:hover {
  text-decoration: underline;
}

.active, .inactive, .example, .foldable, .clickable {
  cursor: pointer;
}

.active {
  font-weight: bolder;
}

select.contentType {
  width: 100%;
}

.response {
  margin-top: 1em;
  margin-right: 2*@try-data-padding;
}

.link {
  color: @code-link-color;
}

.subLink {
  margin-left: 1em;
}

.subLink span, .subLink a {
  float: left;
}

.foldable {
  display: inline-block;
  font-size: 80%;
  color: @link-color;
  margin-left: -1em;
}

.transform(@value){
  -moz-transform: @value;
  -ms-transform: @value;
  -o-transform: @value;
  -webkit-transform: @value;

  transform: @value;
}

.collapsed {
  .transform(rotate(-90deg));
}

.tab-body {
  margin-bottom: 1em;
}

.header-name {
  display: inline-block;
  width: 50%;
  max-width: 20em;
}

.add:before{
  content: '\2295';
  font-size: 125%;
}

.remove:before{
  content: '\2297';
  font-size: 125%;
}

h1, h2, h3 {
  margin-top: .6em;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .3em;
  font-weight: 500;
}

h1 {
  font-size: 260%;
}

h2 {
  font-size: 210%;
}

h3 {
  font-size: 170%;
}

h4 {
  font-size: 130%;
}

h5 {
  font-size: 100%;
}

h6 {
  font-size: 85%;
}

p {
  margin-bottom: .3em;
}

ul, ol {
  padding-left: 2em;
}

th {
  border-bottom: 1px solid @table-head-line-color;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

th span {
  padding: .2em;
  display: block;
}

@import "custom-style";