pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

initial commit

Browse source
This commit is contained in:
Henrik Hautakoski 2017-09-01 17:10:27 +02:00
commit e869a1cab4
107 changed files with 9029 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
app/assets/less/application.less Normal file
View file

@ -0,0 +1,46 @@
// ---------------------------
// Framework
// ---------------------------
@import "vendor/bootstrap-framework";
// Webfonts
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
// ---------------------------
// Site
// ---------------------------
// variables & mixins.
@import "variables";
@import "mixins";
// Base
@import "base/global";
@import "base/typography";
// Layout
@import "layout/sections";
@import "layout/navigation";
@import "layout/masthead";
@import "layout/footer";
// Components
@import "components/icon";
@import "components/button";
@import "components/badge";
@import "components/section";
@import "components/pagination";
@import "components/blankslate";
@import "components/request-item";
@import "components/callback-list";
// Views
@import "views/landingpage";
@import "views/about";
@import "views/login";
// Plugins
@import "vendor/ionicons/ionicons";

5
app/assets/less/base/global.less Normal file
View file

@ -0,0 +1,5 @@
html {
position: relative;
min-height: 100%;
}

11
app/assets/less/base/typography.less Normal file
View file

@ -0,0 +1,11 @@
// Section header (part of .section)
.hdr-center {
//&:extend(.text-center);
display: inline-block;
padding: 20px 80px;
margin: 30px auto;
border-bottom: 2px solid @border-color;
}

18
app/assets/less/components/badge.less Normal file
View file

@ -0,0 +1,18 @@
.badge {
display: inline-block;
padding: .2em .4em;
line-height: 1;
text-align: center;
border-radius: 2px;
vertical-align: baseline;
&:empty {
display:none;
}
}
.badge-primary {
color: white;
background-color: @brand-color;
}

36
app/assets/less/components/blankslate.less Normal file
View file

@ -0,0 +1,36 @@
// ----------------------------------
// Base style.
// ----------------------------------
.blankslate {
border-radius: 4px;
.box-shadow(inset 0 0 4px rgba(0,0,0, .1));
border: solid 1px @blankslate-border;
color: @blankslate-color;
background-color: @blankslate-bg;
padding: @blankslate-spacing;
h3, p {
text-align: center;
}
:last-child {
margin-bottom: 0;
}
}
// ----------------------------------
// Variants
// ----------------------------------
// Sizes
// ----------------------------------
.blankslate-sm {
padding: @blankslate-spacing-sm;
}

68
app/assets/less/components/button.less Normal file
View file

@ -0,0 +1,68 @@
// ----------------------------------
// Base style.
// ----------------------------------
.button {
display: inline-block;
padding: 0.5rem 2rem;
cursor: pointer;
vertical-align: middle;
// Resets for <button> elements.
border: 1px solid transparent;
transition: all .2s ease-in-out;
&:active,
&:hover {
color: inherit;
text-decoration: none;
}
&.disabled {
cursor: not-allowed;
}
}
// ----------------------------------
// Variants
// ----------------------------------
// Round button
// ----------------------------------
.button-round {
padding: 0;
.button-circle(40px);
}
// Colors
// ----------------------------------
.button-default { .button-variant(@text-color, @button-bg-color); }
.button-primary { .button-variant(@button-primary-color, @button-primary-bg); }
.button-brand { .button-variant(@button-brand-color, @button-brand-bg); }
.button-light { .button-variant(@text-light-color, @button-bg-color, @button-hover-color); }
.button-github { .button-variant(@button-github-color, @button-github-bg); }
.button-google { .button-variant(@button-google-color, @button-google-bg); }
// Outline
// ----------------------------------
.button-outline-primary { .button-outline-variant(@text-color, @button-bg-color); }
// Sizes
// ----------------------------------
.button-large { font-size: @text-size-large; }
.button-small { font-size: 0.6em; }
// Block button
// ----------------------------------
.button-block {
display: block;
width: 100%;
}

79
app/assets/less/components/callback-list.less Normal file
View file

@ -0,0 +1,79 @@
.callback-list-item {
position: relative;
&:extend(.clearfix all);
padding: .6em 1em;
&:hover {
background: @lightest-gray;
}
// Borders.
// --------
border: solid @callback-list-border-color @callback-list-border-size;
// Remove top border for all except first child.
&:not(:first-child) {
border-top: 0;
}
// top border radius for first child.
&:first-child {
border-top-left-radius: @callback-list-border-radius;
border-top-right-radius: @callback-list-border-radius;
}
// bottom border radius for first child.
&:last-child {
border-bottom-left-radius: @callback-list-border-radius;
border-bottom-right-radius: @callback-list-border-radius;
}
// Sections.
// ---------
&-header {
margin-bottom: .4em;
}
&-info {
font-size: @font-size-small;
color: @callback-list-info-color;
> span {
display: inline-block;
margin-right: 1.6em;
}
.icon {
.icon-vcenter();
font-size: 20px;
padding: .2em;
}
}
&-name {
margin-right: 1em;
font-size: @callback-list-name-text-size;
color: @callback-list-name-color;
&:hover {
color: @callback-list-name-hover-color;
text-decoration: none;
}
}
&-arrow {
color: #bcbcbc;
position: absolute;
right: .8em;
top: 50%;
> .icon {
font-size: 35px;
transform: translateY(-50%);
}
}
}

4
app/assets/less/components/icon.less Normal file
View file

@ -0,0 +1,4 @@
.icon {
display: inline-block;
}

31
app/assets/less/components/pagination.less Normal file
View file

@ -0,0 +1,31 @@
.pagination {
&:extend(.nav);
margin-top: 1em;
margin-bottom: 1em;
> li {
display: inline-block;
.middle, a {
padding: .4em .8em;
margin: 0 .4em;
}
a {
&:extend(.button all);
display: block;
border: solid 1px @pagination-border;
color: @pagination-color;
&:hover {
color: @pagination-color;
}
}
&.active a {
background: @pagination-active-bg;
border-color: @pagination-active-border;
}
}
}

102
app/assets/less/components/request-item.less Normal file
View file

@ -0,0 +1,102 @@
.request-list {
&-item {
// Header Section
// --------------
&-header {
display: block;
padding: .5em 1em;
color: @request-item-active-color;
background-color: @request-item-active-background;
border: 1px solid @request-item-active-border-color;
&:hover,
&:active,
&:focus {
color: @request-item-active-color;
text-decoration: none;
}
&.collapsed {
background-color: @request-item-background;
&:hover {
background-color: @request-item-hover-background;
}
&:hover,
&:active,
&:focus {
color: @request-item-color;
}
}
&-index {
display: inline-block;
width: 10%;
}
&-type,
&-size,
&-timestamp {
display: inline-block;
width: 20%;
.icon {
padding: 0 .4em;
}
}
}
// Detail section
// --------------
&-detail {
background-color: @request-detail-background;
border: 1px solid @request-item-border-color;
padding: 1em;
&-headers {
&:extend(.table all);
&:extend(.table-bordered all);
background: white;
&-key {
width: 30%;
}
}
&-body {
margin-bottom: 1em;
}
&-button {
&:extend(.button all);
&:extend(.button-brand all);
display: block;
margin-bottom: 1em;
}
}
// Border overrides
// ----------------
// Remove bottom border from header for all but last request-item.
&:not(:last-child) &-header {
border-bottom: 0;
}
// Remove top border from detail element for last request-item.
&:last-child &-detail {
border-top: 0;
}
// Remove bottom border from detail element for all but last request-item.
&:not(:last-child) &-detail {
border-bottom: 0;
}
}
}

24
app/assets/less/components/section.less Normal file
View file

@ -0,0 +1,24 @@
// ---------------------------
// Section
// ---------------------------
.section {
position: relative;
background-color: @section-bg;
padding: @section-padding;
margin-bottom: 60px;
border-radius: 2px;
.box-shadow(@block-shadow-third);
&-header {
text-align: center;
margin-bottom: 15px;
> h1 {
display: inline-block;
border-bottom: 2px solid @border-color;
padding: 20px 80px;
}
}
}

41
app/assets/less/layout/footer.less Normal file
View file

@ -0,0 +1,41 @@
.footer {
&:extend(.container all);
display: flex;
align-items: center;
min-height: @footer-height;
a {
color: @footer-link-color;
font-weight: 700;
&:hover,
&:active {
color: @footer-link-hover-color;
}
}
&-left,
&-right {
.make-xs-column(5);
}
&-middle {
.make-xs-column(2);
}
&-right {
text-align: right;
}
// Top button
&-button-top {
&:extend(.center-block);
&:extend(.button);
&:extend(.button-round);
font-size: 1.5em;
.button-variant(@footer-link-color, white, white);
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
}

26
app/assets/less/layout/masthead.less Normal file
View file

@ -0,0 +1,26 @@
.masthead {
&:extend(.container all);
display: block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
h1, p {
color: @text-light-color;
text-shadow: @header-text-shadow;
}
h1 {
font-size: 48px;
}
p {
font-size: 22px;
}
.masthead-get-started-button {
margin-top: 2em;
.button-outline-variant(black, white);
}
}

127
app/assets/less/layout/navigation.less Normal file
View file

@ -0,0 +1,127 @@
// ----------------------------------
// Navigation
// ----------------------------------
.navigation {
// General styling (for all viewport widths)
&:extend(.clearfix all);
&:extend(.container all);
min-height: @navbar-height;
color: @navbar-link-color;
text-shadow: @navbar-link-text-shadow;
font-size: @font-size-navigation;
// Links inside navigation.
a {
color: @navbar-link-color;
&:hover,
&:active {
color: @navbar-link-hover-color;
text-decoration: none;
}
}
// Menu button
// -------------------
.menu-button {
.button();
.button-variant(white, #242424);
margin-top: 8px;
font-size: 24px;
// Hide for larger view-ports.
@media (min-width: @navbar-breakpoint-min) {
display: none;
}
}
// Menu
// -------------------
&-menu ul {
&:extend(.nav);
> li {
// Inline list for larger viewports.
@media (min-width: @navbar-breakpoint-min) {
display: inline-block;
a {
display: block;
.navbar-vertical-align(@line-height-computed + (@navbar-link-vertical-spacing * 2));
padding: @navbar-link-vertical-spacing 10px @navbar-link-vertical-spacing;
line-height: @line-height-computed;
margin-left: (@navbar-link-spacing / 2);
margin-right: (@navbar-link-spacing / 2);
&:hover {
color: @navbar-link-hover-color;
.box-shadow(0 -@navbar-link-underline-height
0 @navbar-link-hover-underline inset);
}
}
&.active a {
color: @navbar-link-active-color;
.box-shadow(0 -@navbar-link-underline-height
0 @navbar-link-active-underline inset);
}
}
}
// Only for small viewports.
@media (max-width: @navbar-breakpoint-min) {
margin: 1em 0;
> li {
a {
display: block;
padding: .5em 1em;
background: @navbar-background;
&:hover {
background: darken(@navbar-background, 10%);
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
}
}
// Always show menu for larger viewport.
@media (min-width: @navbar-breakpoint-min) {
&-menu.collapse {
display: block;
}
}
// User Menu
// -------------------
&-user-menu {
&:extend(.nav);
.pull-right();
margin-top: 18px;
> li {
display: inline-block;
.icon {
margin-right: .2em;
}
&:not(:first-child) {
padding-left: 1em;
}
}
}
}

43
app/assets/less/layout/sections.less Normal file
View file

@ -0,0 +1,43 @@
// ----------------------------------
// Head section
// ----------------------------------
.head-section {
background-color: @brand-color;
background-image: url('@{image-path}/header-pattern.jpg');
margin-bottom: 60px;
.top-section {
background-color: @navbar-background;
}
}
// ----------------------------------
// Content section
// ----------------------------------
.content-section {
&:extend(.container);
margin-bottom: @footer-height;
}
// ----------------------------------
// Footer section
// ----------------------------------
.footer-section {
position: absolute;
bottom: 0;
width: 100%;
color: @footer-text-color;
border-top: 1px solid #bcbcbc;
background-color: @footer-border-color;
background-image: url("@{image-path}/footer-pattern.jpg");
}

34
app/assets/less/mixins.less Normal file
View file

@ -0,0 +1,34 @@
@import "mixins/button";
@import "mixins/icon-vcenter";
// Rectangular button.
.rect-button(@color, @hover-color: darken(@color, 20%)) {
border-radius: 0;
border: 2px solid @color;
color: @color;
&:hover {
color: @hover-color;
border-color: @hover-color;
}
}
.button-color(@color, @background-color, @hover-color: darken(@background-color, 10%)) {
&:not(.button-ghost) {
color: @color;
background-color: @background-color;
&:hover {
color: @color;
background-color: @hover-color;
}
}
.button-ghost& {
border: 2px solid @background-color;
color: @background-color;
}
}

33
app/assets/less/mixins/button.less Normal file
View file

@ -0,0 +1,33 @@
.button-variant(@color, @background, @hover: darken(@background, 10%)) {
color: @color;
background-color: @background;
&:hover,
&:active {
color: @color;
background-color: @hover;
}
}
.button-outline-variant(@color, @background) {
box-shadow: inset 0 0 0 2px @background;
color: @background;
&:hover,
&:active {
color: @color;
background-color: @background;
}
}
.button-circle(@width) {
display: block;
text-align: center;
width: @width;
height: @width;
line-height: @width;
border-radius: 50%;
}

5
app/assets/less/mixins/icon-vcenter.less Normal file
View file

@ -0,0 +1,5 @@
.icon-vcenter() {
margin-top: -0.2em;
vertical-align: middle;
}

173
app/assets/less/variables.less Normal file
View file

@ -0,0 +1,173 @@
// ----------------------------------
// Paths
// ----------------------------------
@base-path: '..';
@image-path: '@{base-path}/img';
// ----------------------------------
// General colors.
// ----------------------------------
@blue: #0000ff;
@lightest-gray: #f9f9f9;
@light-grey: #dcdcdc;
@dark-grey: #444;
@darker-grey: #202020;
@black: #000;
@white: #fff;
// ----------------------------------
// Global colors.
// ----------------------------------
@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;
// Branding colors
@google-color: #db4437;
@github-color: #4183c4;
// ----------------------------------
// Font
// ----------------------------------
@font-size-base: 15px;
@font-size-navigation: 20px;
@text-size-large: 20px;
@font-size-small: 14px;
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
//@font-family-sans-serif: 'Open Sans', sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
// ----------------------------------
// Layout
// ----------------------------------
@header-text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.45);
// navigation
@navbar-breakpoint-min: @screen-md-min;
@navbar-height: 60px;
@navbar-link-vertical-spacing: 8px;
@navbar-link-underline-height: 2px;
@navbar-link-spacing: 20px;
@navbar-background: fade(#1d7ed1, 50%);
@navbar-link-text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
@navbar-link-color: white;
@navbar-link-hover-color: lighten(@navbar-link-color, 10%);
@navbar-link-hover-underline: @navbar-link-color;
@navbar-link-active-color: @navbar-link-color;
@navbar-link-active-underline: @navbar-link-color;
@navbar-brand-color: @brand-color;
@navbar-brand-hover-color: darken(@brand-color, 15%);
// Footer
@footer-height: 80px;
@footer-border-color: @border-color;
@footer-text-color: @text-secondary-color;
@footer-link-color: @text-secondary-color;
@footer-link-hover-color: darken(@text-secondary-color, 10%);
// ----------------------------------
// Buttons
// ----------------------------------
@button-bg-color: #f1f1f1;
@button-hover-color: darken(@button-bg-color, 10%);
@button-border: darken(@button-bg-color, 10%);
@button-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12),
0 1px 5px 0 rgba(0, 0, 0, 0.1);
// Variations
@button-primary-color: white;
@button-primary-bg: #5fbc49;
@button-brand-color: white;
@button-brand-bg: @brand-color;
// Company.
@button-google-color: white;
@button-google-bg: @google-color;
@button-google-border: darken(@button-google-bg, 5%);
@button-github-color: white;
@button-github-bg: @github-color;
@button-github-border: darken(@button-github-bg, 5%);
// ----------------------------------
// Shadows
// ----------------------------------
@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-third: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
// ----------------------------------
// Blankslate
// ----------------------------------
@blankslate-bg: @well-bg;
@blankslate-color: @text-secondary-color;
@blankslate-border: @well-border;
@blankslate-spacing: 25px 10px;
@blankslate-spacing-sm: 15px 5px;
// ----------------------------------
// Pagination
// ----------------------------------
@pagination-color: @text-color;
@pagination-border: @border-color;
@pagination-hover-color: lighten(@text-color, 25%);
@pagination-active-bg: @brand-color;
@pagination-active-border: darken(@brand-color, 5%);
// ----------------------------------
// Section
// ----------------------------------
@section-bg: white;
@section-border: rgb(200, 200, 200);
@section-padding: 20px;
// ----------------------------------
// Callback list
// ----------------------------------
@callback-list-border-size: 1px;
@callback-list-border-color: @light-grey;
@callback-list-border-radius: 3px;
@callback-list-name-text-size: @font-size-h4;
@callback-list-name-color: @text-color;
@callback-list-name-hover-color: @link-color;
@callback-list-info-color: @text-secondary-color;
// ----------------------------------
// Request list
// ----------------------------------
@request-item-color: @dark-grey;
@request-item-background: transparent;
@request-item-border-color: @light-grey;
@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-detail-background: lighten(@brand-color, 45%);

13
app/assets/less/views/about.less Normal file
View file

@ -0,0 +1,13 @@
.about {
&:extend(.row all);
&-main {
.make-sm-column(8);
}
&-reference {
.make-sm-column(4);
}
}

43
app/assets/less/views/landingpage.less Normal file
View file

@ -0,0 +1,43 @@
// ----------------------------------
// Feature section
// ----------------------------------
.feature-section {
&:extend(.section);
> div + div {
margin-top: 2em;
}
.steps {
&:extend(.row all);
.steps-img {
&:extend(.center-block);
width: 270px;
height: 220px;
}
.steps-step1 .steps-img {
background-image: url('@{image-path}/step1.png');
}
.steps-step2 .steps-img {
background-image: url('@{image-path}/step2.png');
}
.steps-step3 .steps-img {
background-image: url('@{image-path}/step3.png');
}
.steps-step1,
.steps-step2,
.steps-step3 {
.make-md-column(4);
.text-center();
}
}
.call-to-action {
&:extend(.text-center);
}
}

24
app/assets/less/views/login.less Normal file
View file

@ -0,0 +1,24 @@
.login-container {
.center-block();
width: 400px;
h3 {
width: 100%;
text-align: center;
}
.oauth > a {
font-size: @font-size-large;
width: 100%;
margin-bottom: 4px;
text-align: center;
.icon {
.icon-vcenter();
font-size: 24px;
margin-right: .2em;
}
}
}