pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

Converting application less to sass.

Browse source
This commit is contained in:
Henrik Hautakoski 2018-08-19 00:26:22 +02:00
parent b30be955ca
commit fec6b6caa5
26 changed files with 1140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/assets/sass/_bootstrap-custom.scss Normal file
View 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
View file

@ -0,0 +1,3 @@
@import "mixins/button";
@import "mixins/icon-vcenter";

212
app/assets/sass/_variables.scss Normal file
View 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
View 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
View file

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

14
app/assets/sass/base/_typography.scss Normal file
View 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
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;
}
&-primary {
color: white;
background-color: $brand-color;
}
}

36
app/assets/sass/components/_blankslate.scss Normal file
View 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
View 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
View 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
View file

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

33
app/assets/sass/components/_pagination.scss Normal file
View 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
View 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
View 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
View 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
View file

@ -0,0 +1,8 @@
.url {
&-query,
&-fragment {
color: #9c9c9c;
}
}

40
app/assets/sass/layout/_footer.scss Normal file
View 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
View 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
View 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
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);
}

64
app/assets/sass/mixins/_button.scss Normal file
View 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
View file

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

13
app/assets/sass/views/_about.scss Normal file
View 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
View 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
View 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
View file

@ -0,0 +1,6 @@
.register {
@extend .section;
@include center-block();
width: 60%;
}