pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

Merge branch '7-cleanup-css' into 'master'

Browse source 
Resolve "Cleanup css"

Closes #7

See merge request pnx/httpcb!5
This commit is contained in:
Henrik Hautakoski 2018-03-30 11:37:45 +00:00
commit 567c113031
7 changed files with 53 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/less/base/typography.less
View file

@ -2,7 +2,6 @@
// Section header (part of .section) // Section header (part of .section)
.hdr-center { .hdr-center {
//&:extend(.text-center);
display: inline-block; display: inline-block;
padding: 20px 80px; padding: 20px 80px;
margin: 30px auto; margin: 30px auto;

4
app/assets/less/components/badge.less
View file

@ -10,9 +10,9 @@
&:empty { &:empty {
display:none; display:none;
} }
}
.badge-primary { &-primary {
color: white; color: white;
background-color: @brand-color; background-color: @brand-color;
}
} }

4
app/assets/less/components/callback-list.less
View file

@ -7,7 +7,7 @@
padding: .6em 1em; padding: .6em 1em;
&:hover { &:hover {
background: @lightest-gray; background: @gray-lightest;
} }
// Borders. // Borders.
@ -67,7 +67,7 @@
} }
&-arrow { &-arrow {
color: #bcbcbc; color: @callback-list-arrow-color;
position: absolute; position: absolute;
right: .8em; right: .8em;
top: 50%; top: 50%;

2
app/assets/less/components/pagination.less
View file

@ -20,10 +20,12 @@
&:hover { &:hover {
color: @pagination-color; color: @pagination-color;
background-color: @pagination-hover;
} }
} }
&.active a { &.active a {
color: @pagination-active-color;
background: @pagination-active-bg; background: @pagination-active-bg;
border-color: @pagination-active-border; border-color: @pagination-active-border;
} }

2
app/assets/less/components/request-item.less
View file

@ -58,7 +58,7 @@
&-timestamp, &-timestamp,
&-size, &-size,
&-ip { &-ip {
color: @request-item-light-color; color: @request-item-secondary-color;
font-size: @font-size-small; font-size: @font-size-small;
} }

2
app/assets/less/components/section.less
View file

@ -9,7 +9,7 @@
padding: @section-padding; padding: @section-padding;
margin-bottom: 60px; margin-bottom: 60px;
border-radius: 2px; border-radius: 2px;
.box-shadow(@block-shadow-third); .box-shadow(@block-shadow-3);
&-header { &-header {
text-align: center; text-align: center;

78
app/assets/less/variables.less
View file

@ -6,32 +6,29 @@
@image-path: '@{base-path}/img'; @image-path: '@{base-path}/img';
// ---------------------------------- // ----------------------------------
// General colors. // Colors
// ---------------------------------- // ----------------------------------
@blue: #0000ff; @gray-lightest: #f9f9f9;
@lightest-gray: #f9f9f9; @gray-light: #dcdcdc;
@light-grey: #dcdcdc; @gray-dark: #444;
@dark-grey: #444; @gray-darker: #202020;
@darker-grey: #202020;
@black: #000; @black: #000;
@white: #fff; @white: #fff;
// ---------------------------------- // Text
// Global colors. @text-color: #333;
// ---------------------------------- @text-secondary-color: #666;
@brand-color: #03a9f4;
@brand-info: hsl(210, 70%, 50%);
@foreground-color: white;
//@body-bg: #f3f6fc;
@body-bg: #f5f5f6;
@border-color: @light-grey;
@text-color: #353535;
@text-secondary-color: #757575;
@text-light-color: #f1f1f1; @text-light-color: #f1f1f1;
// Branding colors // Layout
@foreground-color: @white;
@body-bg: #f5f5f8;
@hover-color: @gray-lightest;
@border-color: @gray-light;
// Brand
@brand-color: #03a9f4;
@brand-info: hsl(210, 70%, 50%);
@google-color: #db4437; @google-color: #db4437;
@github-color: #4183c4; @github-color: #4183c4;
@ -81,8 +78,8 @@
@footer-height: 80px; @footer-height: 80px;
@footer-border-color: @border-color; @footer-border-color: @border-color;
@footer-text-color: @text-secondary-color; @footer-text-color: @text-secondary-color;
@footer-link-color: @text-secondary-color; @footer-link-color: @footer-text-color;
@footer-link-hover-color: darken(@text-secondary-color, 10%); @footer-link-hover-color: darken(@footer-link-color, 10%);
// ---------------------------------- // ----------------------------------
// Buttons // Buttons
@ -116,16 +113,16 @@
// ---------------------------------- // ----------------------------------
@block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); @block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
@block-shadow-raised: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12); @block-shadow-2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12);
@block-shadow-third: 0 3px 3px 0 rgba(0, 0, 0, 0.16); @block-shadow-3: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
// ---------------------------------- // ----------------------------------
// Blankslate // Blankslate
// ---------------------------------- // ----------------------------------
@blankslate-bg: @well-bg; @blankslate-bg: @gray-lightest;
@blankslate-color: @text-secondary-color; @blankslate-color: @text-secondary-color;
@blankslate-border: @well-border; @blankslate-border: @border-color;
@blankslate-spacing: 25px 10px; @blankslate-spacing: 25px 10px;
@blankslate-spacing-sm: 15px 5px; @blankslate-spacing-sm: 15px 5px;
@ -135,7 +132,9 @@
@pagination-color: @text-color; @pagination-color: @text-color;
@pagination-border: @border-color; @pagination-border: @border-color;
@pagination-hover-color: lighten(@text-color, 25%); @pagination-hover: @hover-color;
@pagination-active-color: @white;
@pagination-active-bg: @brand-color; @pagination-active-bg: @brand-color;
@pagination-active-border: darken(@brand-color, 5%); @pagination-active-border: darken(@brand-color, 5%);
@ -143,7 +142,7 @@
// Section // Section
// ---------------------------------- // ----------------------------------
@section-bg: white; @section-bg: @foreground-color;
@section-border: rgb(200, 200, 200); @section-border: rgb(200, 200, 200);
@section-padding: 20px; @section-padding: 20px;
@ -151,24 +150,31 @@
// Callback list // Callback list
// ---------------------------------- // ----------------------------------
@callback-list-hover-color: @gray-lightest;
@callback-list-info-color: @text-secondary-color;
@callback-list-border-size: 1px; @callback-list-border-size: 1px;
@callback-list-border-color: @light-grey; @callback-list-border-color: @gray-light;
@callback-list-border-radius: 3px; @callback-list-border-radius: 3px;
@callback-list-name-text-size: @font-size-h4; @callback-list-name-text-size: @font-size-h4;
@callback-list-name-color: @text-color; @callback-list-name-color: @text-color;
@callback-list-name-hover-color: @link-color; @callback-list-name-hover-color: @link-color;
@callback-list-info-color: @text-secondary-color;
@callback-list-arrow-color: @callback-list-border-color;
// ---------------------------------- // ----------------------------------
// Request list // Request list
// ---------------------------------- // ----------------------------------
@request-item-color: @dark-grey; @request-item-color: @text-color;
@request-item-light-color: #666; @request-item-secondary-color: @text-secondary-color;
@request-item-background: transparent; @request-item-background: transparent;
@request-item-border-color: @light-grey; @request-item-border-color: @gray-light;
@request-item-active-color: @dark-grey;
@request-item-active-background: @lightest-gray;
@request-item-active-border-color: darken(@request-item-active-background, 10%);
@request-item-hover-background: @request-item-active-background; @request-item-hover-background: @request-item-active-background;
@request-item-active-color: @request-item-color;
@request-item-active-background: @gray-lightest;
@request-item-active-border-color: @request-item-border-color;
@request-detail-background: lighten(@brand-color, 45%); @request-detail-background: lighten(@brand-color, 45%);