Converting application less to sass.
This commit is contained in:
parent
b30be955ca
commit
fec6b6caa5
26 changed files with 1140 additions and 0 deletions
32
app/assets/sass/_bootstrap-custom.scss
Normal file
32
app/assets/sass/_bootstrap-custom.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Custom bootstrap variables.
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
$body-bg: #f5f5f8;
|
||||||
|
|
||||||
|
$font-size-base: 15px;
|
||||||
|
$nav-link-hover-bg: none;
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Source imports
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
@import "bootstrap/variables";
|
||||||
|
@import "bootstrap/mixins";
|
||||||
|
|
||||||
|
@import "bootstrap/normalize";
|
||||||
|
@import "bootstrap/close";
|
||||||
|
@import "bootstrap/alerts";
|
||||||
|
@import "bootstrap/print";
|
||||||
|
@import "bootstrap/type";
|
||||||
|
@import "bootstrap/code";
|
||||||
|
@import "bootstrap/tables";
|
||||||
|
@import "bootstrap/forms";
|
||||||
|
@import "bootstrap/scaffolding";
|
||||||
|
@import "bootstrap/grid";
|
||||||
|
@import "bootstrap/utilities";
|
||||||
|
@import "bootstrap/navs";
|
||||||
|
@import "bootstrap/dropdowns";
|
||||||
|
@import "bootstrap/modals";
|
||||||
|
@import "bootstrap/component-animations";
|
||||||
3
app/assets/sass/_mixins.scss
Normal file
3
app/assets/sass/_mixins.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
|
||||||
|
@import "mixins/button";
|
||||||
|
@import "mixins/icon-vcenter";
|
||||||
212
app/assets/sass/_variables.scss
Normal file
212
app/assets/sass/_variables.scss
Normal file
|
|
@ -0,0 +1,212 @@
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Paths
|
||||||
|
// ----------------------------------
|
||||||
|
$base-path: '..';
|
||||||
|
$image-path: #{$base-path}/img;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Colors
|
||||||
|
// ----------------------------------
|
||||||
|
$gray-lightest: #f9f9f9;
|
||||||
|
$gray-light: #dcdcdc;
|
||||||
|
$gray-dark: #444;
|
||||||
|
$gray-darker: #202020;
|
||||||
|
$black: #000;
|
||||||
|
$white: #fff;
|
||||||
|
|
||||||
|
// Text
|
||||||
|
$text-color: #333;
|
||||||
|
$text-secondary-color: #666;
|
||||||
|
$text-light-color: #f1f1f1;
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
$foreground-color: $white;
|
||||||
|
$hover-color: $gray-lightest;
|
||||||
|
$border-color: $gray-light;
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
$brand-color: #03a9f4;
|
||||||
|
$brand-info: hsl(210, 70%, 50%);
|
||||||
|
$google-color: #db4437;
|
||||||
|
$github-color: #4183c4;
|
||||||
|
$gitlab-color: #548;
|
||||||
|
$linkedin-color: #0077B5;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Font
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
$font-size-navigation: 20px;
|
||||||
|
$text-size-large: 20px;
|
||||||
|
$font-size-small: 14px;
|
||||||
|
|
||||||
|
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, 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: rgba(29, 126, 209, 0.5);
|
||||||
|
$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%);
|
||||||
|
|
||||||
|
// User menu
|
||||||
|
$usermenu-button-bg: $navbar-background;
|
||||||
|
$usermenu-button-hover-bg: darken($usermenu-button-bg, 8%);
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
$footer-height: 80px;
|
||||||
|
$footer-border-color: $border-color;
|
||||||
|
$footer-text-color: $text-secondary-color;
|
||||||
|
$footer-link-color: $footer-text-color;
|
||||||
|
$footer-link-hover-color: darken($footer-link-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;
|
||||||
|
|
||||||
|
// State
|
||||||
|
$button-info-color: white;
|
||||||
|
$button-info-bg: $brand-info;
|
||||||
|
$button-success-color: white;
|
||||||
|
$button-success-bg: $brand-success;
|
||||||
|
$button-warning-color: white;
|
||||||
|
$button-warning-bg: $brand-warning;
|
||||||
|
$button-danger-color: white;
|
||||||
|
$button-danger-bg: $brand-danger;
|
||||||
|
|
||||||
|
// 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%);
|
||||||
|
|
||||||
|
$button-gitlab-color: white;
|
||||||
|
$button-gitlab-bg: $gitlab-color;
|
||||||
|
|
||||||
|
$button-linkedin-color: white;
|
||||||
|
$button-linkedin-bg: $linkedin-color;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// 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-2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
$block-shadow-3: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Dropdown
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$dropdown-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Blankslate
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$blankslate-bg: $gray-lightest;
|
||||||
|
$blankslate-color: $text-secondary-color;
|
||||||
|
$blankslate-border: $border-color;
|
||||||
|
$blankslate-spacing: 25px 10px;
|
||||||
|
$blankslate-spacing-sm: 15px 5px;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Spacer
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$spacer-color: $gray-light;
|
||||||
|
$spacer-margin: 1em 0;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Pagination
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$pagination-color: $text-color;
|
||||||
|
$pagination-border: $border-color;
|
||||||
|
$pagination-hover: $hover-color;
|
||||||
|
|
||||||
|
$pagination-active-color: $white;
|
||||||
|
$pagination-active-bg: $brand-color;
|
||||||
|
$pagination-active-border: darken($brand-color, 5%);
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Section
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$section-bg: $foreground-color;
|
||||||
|
$section-border: rgb(200, 200, 200);
|
||||||
|
$section-padding: 20px;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Callback list
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$callback-list-hover-color: $gray-lightest;
|
||||||
|
$callback-list-info-color: $text-secondary-color;
|
||||||
|
|
||||||
|
$callback-list-border-size: 1px;
|
||||||
|
$callback-list-border-color: $gray-light;
|
||||||
|
$callback-list-border-radius: 3px;
|
||||||
|
|
||||||
|
$callback-list-name-text-size: 24px;
|
||||||
|
$callback-list-name-color: $text-color;
|
||||||
|
$callback-list-name-hover-color: $link-color;
|
||||||
|
|
||||||
|
$callback-list-arrow-color: $callback-list-border-color;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Request list
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
$request-item-color: $text-color;
|
||||||
|
$request-item-secondary-color: $text-secondary-color;
|
||||||
|
$request-item-background: transparent;
|
||||||
|
$request-item-border-color: $gray-light;
|
||||||
|
|
||||||
|
$request-item-active-color: $request-item-color;
|
||||||
|
$request-item-active-background: $gray-lightest;
|
||||||
|
$request-item-active-border-color: $request-item-border-color;
|
||||||
|
$request-item-hover-background: $request-item-active-background;
|
||||||
|
|
||||||
|
$request-detail-background: lighten($brand-color, 45%);
|
||||||
44
app/assets/sass/application.scss
Normal file
44
app/assets/sass/application.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Bootstrap & Fonts
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
@import "bootstrap-custom";
|
||||||
|
@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/url";
|
||||||
|
@import "components/icon";
|
||||||
|
@import "components/button";
|
||||||
|
@import "components/badge";
|
||||||
|
@import "components/section";
|
||||||
|
@import "components/spacer";
|
||||||
|
@import "components/pagination";
|
||||||
|
@import "components/blankslate";
|
||||||
|
@import "components/request-item";
|
||||||
|
@import "components/callback-list";
|
||||||
|
|
||||||
|
// Views
|
||||||
|
@import "views/landingpage";
|
||||||
|
@import "views/about";
|
||||||
|
@import "views/login";
|
||||||
|
@import "views/register";
|
||||||
5
app/assets/sass/base/_global.scss
Normal file
5
app/assets/sass/base/_global.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
14
app/assets/sass/base/_typography.scss
Normal file
14
app/assets/sass/base/_typography.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
// Section header (part of .section)
|
||||||
|
|
||||||
|
.hdr-center {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20px 80px;
|
||||||
|
margin: 30px auto;
|
||||||
|
border-bottom: 2px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-github { color: $github-color; }
|
||||||
|
.text-gitlab { color: $gitlab-color; }
|
||||||
|
.text-google { color: $google-color; }
|
||||||
|
.text-linkedin { color: $linkedin-color; }
|
||||||
18
app/assets/sass/components/_badge.scss
Normal file
18
app/assets/sass/components/_badge.scss
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-primary {
|
||||||
|
color: white;
|
||||||
|
background-color: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
36
app/assets/sass/components/_blankslate.scss
Normal file
36
app/assets/sass/components/_blankslate.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Base style.
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
.blankslate {
|
||||||
|
border-radius: 4px;
|
||||||
|
@include 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;
|
||||||
|
}
|
||||||
76
app/assets/sass/components/_button.scss
Normal file
76
app/assets/sass/components/_button.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// 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;
|
||||||
|
@include button-circle(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
.button-default { @include button-variant($text-color, $button-bg-color); }
|
||||||
|
.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
|
||||||
|
.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
|
||||||
|
.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }
|
||||||
|
|
||||||
|
.button-info { @include button-variant($button-info-color, $button-info-bg); }
|
||||||
|
.button-success { @include button-variant($button-success-color, $button-success-bg); }
|
||||||
|
.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
|
||||||
|
.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }
|
||||||
|
|
||||||
|
.button-github { @include button-variant($button-github-color, $button-github-bg); }
|
||||||
|
.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
|
||||||
|
.button-google { @include button-variant($button-google-color, $button-google-bg); }
|
||||||
|
.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }
|
||||||
|
|
||||||
|
// Outline
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
.button-outline-primary { @include 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%;
|
||||||
|
}
|
||||||
78
app/assets/sass/components/_callback-list.scss
Normal file
78
app/assets/sass/components/_callback-list.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
|
||||||
|
|
||||||
|
.callback-list-item {
|
||||||
|
@extend .clearfix;
|
||||||
|
position: relative;
|
||||||
|
padding: .6em 1em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $gray-lightest;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
||||||
|
@include 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: $callback-list-arrow-color;
|
||||||
|
position: absolute;
|
||||||
|
right: .8em;
|
||||||
|
top: 50%;
|
||||||
|
> .icon {
|
||||||
|
font-size: 35px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
app/assets/sass/components/_icon.scss
Normal file
4
app/assets/sass/components/_icon.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
33
app/assets/sass/components/_pagination.scss
Normal file
33
app/assets/sass/components/_pagination.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
@extend .nav;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.middle, a {
|
||||||
|
padding: .4em .8em;
|
||||||
|
margin: 0 .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@extend .button;
|
||||||
|
display: block;
|
||||||
|
border: solid 1px $pagination-border;
|
||||||
|
color: $pagination-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $pagination-color;
|
||||||
|
background-color: $pagination-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active a {
|
||||||
|
color: $pagination-active-color;
|
||||||
|
background: $pagination-active-bg;
|
||||||
|
border-color: $pagination-active-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
126
app/assets/sass/components/_request-item.scss
Normal file
126
app/assets/sass/components/_request-item.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-row {
|
||||||
|
display: block;
|
||||||
|
& + & {
|
||||||
|
margin-top: .4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-method,
|
||||||
|
&-uri,
|
||||||
|
&-type,
|
||||||
|
&-timestamp,
|
||||||
|
&-size,
|
||||||
|
&-ip {
|
||||||
|
display: inline-block;
|
||||||
|
.icon {
|
||||||
|
margin: 0 .2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-type,
|
||||||
|
&-timestamp,
|
||||||
|
&-size,
|
||||||
|
&-ip {
|
||||||
|
color: $request-item-secondary-color;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-method {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-type,
|
||||||
|
&-size {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-ip,
|
||||||
|
&-timestamp {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detail section
|
||||||
|
// --------------
|
||||||
|
&-detail {
|
||||||
|
|
||||||
|
background-color: $request-detail-background;
|
||||||
|
border: 1px solid $request-item-border-color;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
&-headers {
|
||||||
|
@extend .table, .table-bordered;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
&-key {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-body {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
@extend .button, .button-brand;
|
||||||
|
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/sass/components/_section.scss
Normal file
24
app/assets/sass/components/_section.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Section
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
background-color: $section-bg;
|
||||||
|
padding: $section-padding;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
border-radius: 2px;
|
||||||
|
@include box-shadow($block-shadow-3);
|
||||||
|
|
||||||
|
&-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
display: inline-block;
|
||||||
|
border-bottom: 2px solid $border-color;
|
||||||
|
padding: 20px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
app/assets/sass/components/_spacer.scss
Normal file
6
app/assets/sass/components/_spacer.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
display: block;
|
||||||
|
border-bottom: 1px solid $gray-light;
|
||||||
|
margin: $spacer-margin;
|
||||||
|
}
|
||||||
8
app/assets/sass/components/_url.scss
Normal file
8
app/assets/sass/components/_url.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
.url {
|
||||||
|
|
||||||
|
&-query,
|
||||||
|
&-fragment {
|
||||||
|
color: #9c9c9c;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
app/assets/sass/layout/_footer.scss
Normal file
40
app/assets/sass/layout/_footer.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
@extend .container;
|
||||||
|
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 {
|
||||||
|
@include make-xs-column(5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-middle {
|
||||||
|
@include make-xs-column(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Top button
|
||||||
|
&-button-top {
|
||||||
|
@extend .center-block;
|
||||||
|
@extend .button;
|
||||||
|
@extend .button-round;
|
||||||
|
@include button-variant($footer-link-color, white, white);
|
||||||
|
|
||||||
|
font-size: 1.5em;
|
||||||
|
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
|
||||||
|
}
|
||||||
|
}
|
||||||
26
app/assets/sass/layout/_masthead.scss
Normal file
26
app/assets/sass/layout/_masthead.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
.masthead {
|
||||||
|
@extend .container;
|
||||||
|
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;
|
||||||
|
@include button-outline-variant(black, white);
|
||||||
|
}
|
||||||
|
}
|
||||||
157
app/assets/sass/layout/_navigation.scss
Normal file
157
app/assets/sass/layout/_navigation.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Navigation
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
|
||||||
|
// General styling (for all viewport widths)
|
||||||
|
@extend .clearfix;
|
||||||
|
@extend .container;
|
||||||
|
|
||||||
|
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 {
|
||||||
|
@extend .button;
|
||||||
|
@include button-variant(white, #242424);
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
// Hide for larger view-ports.
|
||||||
|
@media (min-width: $navbar-breakpoint-min) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
// -------------------
|
||||||
|
&-menu ul {
|
||||||
|
@extend .nav;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
|
||||||
|
// Inline list for larger viewports.
|
||||||
|
@media (min-width: $navbar-breakpoint-min) {
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
@include 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: 10px;
|
||||||
|
|
||||||
|
&-login {
|
||||||
|
padding-top: .3em;
|
||||||
|
padding-bottom: .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dropdown {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: .3em .8em;
|
||||||
|
background: $usermenu-button-bg;
|
||||||
|
border-radius: $border-radius-base;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $usermenu-button-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
@extend .dropdown-menu;
|
||||||
|
@extend .dropdown-menu-right;
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
> li > a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-right: .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
text-shadow: none;
|
||||||
|
@include box-shadow($dropdown-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open &-list {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
43
app/assets/sass/layout/_sections.scss
Normal file
43
app/assets/sass/layout/_sections.scss
Normal 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);
|
||||||
|
}
|
||||||
64
app/assets/sass/mixins/_button.scss
Normal file
64
app/assets/sass/mixins/_button.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
|
||||||
|
@mixin 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;
|
||||||
|
} */
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-variant($color, $background, $hover: darken($background, 10%)) {
|
||||||
|
|
||||||
|
color: $color;
|
||||||
|
background-color: $background;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: $color;
|
||||||
|
background-color: $hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-outline-variant($color, $background) {
|
||||||
|
|
||||||
|
box-shadow: inset 0 0 0 2px $background;
|
||||||
|
color: $background;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: $color;
|
||||||
|
background-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-circle($width) {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: $width;
|
||||||
|
height: $width;
|
||||||
|
line-height: $width;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rectangular button.
|
||||||
|
@mixin 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
5
app/assets/sass/mixins/_icon-vcenter.scss
Normal file
5
app/assets/sass/mixins/_icon-vcenter.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
@mixin icon-vcenter() {
|
||||||
|
margin-top: -0.2em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
13
app/assets/sass/views/_about.scss
Normal file
13
app/assets/sass/views/_about.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
.about {
|
||||||
|
@extend .row;
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
@include make-sm-column(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-reference {
|
||||||
|
@include make-sm-column(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
43
app/assets/sass/views/_landingpage.scss
Normal file
43
app/assets/sass/views/_landingpage.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Feature section
|
||||||
|
// ----------------------------------
|
||||||
|
|
||||||
|
.feature-section {
|
||||||
|
@extend .section;
|
||||||
|
|
||||||
|
> div + div {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
@extend .row;
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
@include make-md-column(4);
|
||||||
|
@extend .text-center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-to-action {
|
||||||
|
@extend .text-center;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
app/assets/sass/views/_login.scss
Normal file
24
app/assets/sass/views/_login.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
@extend .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 {
|
||||||
|
@include icon-vcenter();
|
||||||
|
font-size: 24px;
|
||||||
|
margin-right: .2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
app/assets/sass/views/_register.scss
Normal file
6
app/assets/sass/views/_register.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
.register {
|
||||||
|
@extend .section;
|
||||||
|
@include center-block();
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
Reference in a new issue