From 22e19a640350735369b3a18736ec1899ca9daaa1 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 22 Jan 2018 13:27:57 -0500 Subject: [PATCH] styles for vault --- package.json | 1 + src/app/vault/vault.component.html | 96 ++++-- src/scss/styles.scss | 481 ++++++++++++++++++++++++++++- webpack.common.js | 24 ++ 4 files changed, 555 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index e5b8e752a3..4445d3460c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "font-awesome": "4.7.0", + "google-fonts-webpack-plugin": "^0.4.4", "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "node-sass": "^4.7.2", diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index c970cf34b9..4f7866b8b7 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -1,50 +1,86 @@
+
-
- Filters -
-
Something
Something
Something
+ +

Types

+ +

Folders

+ +

Collections

+
-
- Search Bar +
-
Something Something Something Something Something Something
-
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
Something
Something
Something
Something
-
-
-
- View Item -
Something Something Something Something Something Something
Something
Something
Something
Something
diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 809fb36114..3df20c422e 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1,14 +1,42 @@ -* { +$fa-font-path: "~font-awesome/fonts"; +@import "~font-awesome/scss/font-awesome.scss"; + +$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; +$font-size-base: 14px; +$font-size-large: 18px; +$font-size-small: 12px; +$text-color: #000000; +$background-color: #efeff4; +$border-color: #f0f0f0; +$border-color-dark: #ddd; +$list-item-hover: #fbfbfb; +$list-icon-color: #c7c7cd; + +$gray: #555; +$gray-light: #777; +$text-muted: $gray-light; + +$brand-primary: #3c8dbc; +$brand-danger: #dd4b39; +$brand-success: #00a65a; +$brand-info: #555555; +$brand-warning: #f39c12; +$brand-primary-accent: #286090; + +$background-color: white; +$background-color-alt: #f9fafc; + +* { box-sizing: border-box; } -*::-webkit-scrollbar { +div::-webkit-scrollbar { width: 10px; height: 10px; background-color: #aaa; } -*::-webkit-scrollbar-thumb { +div::-webkit-scrollbar-thumb { background: #888; } @@ -16,11 +44,22 @@ html, body { margin: 0; padding: 0; height: 100%; - background-color: gray; + background-color: $background-color; overflow: hidden; - font-family: Arial; - font-size: 14px; - color: #000; + font-family: $font-family-sans-serif; + font-size: $font-size-base; + color: $text-color; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $font-family-sans-serif; + margin: 0; + padding: 0; +} + +a { + color: $brand-primary; + text-decoration: none; } #vault { @@ -59,26 +98,46 @@ html, body { } #categories { - background-color: #222d32; + background-color: $background-color-alt; width: 15%; min-width: 175px; max-width: 250px; - color: white; + border-right: 1px solid $border-color-dark; + padding: 10px 15px; - .header { - background-color: #367fa9; + h2 { + font-size: $font-size-base; + font-weight: bold; + margin-bottom: 5px; + } + + ul { + margin: 0 0 20px 0; + padding: 0; + + li { + margin: 0; + padding: 0; + + a { + display: block; + padding: 5px 0; + color: $text-color; + } + } } } #items { - background-color: #ecf0f5; + background-color: $background-color; width: 25%; min-width: 200px; max-width: 350px; + border-right: 1px solid $border-color-dark; } #details { - background-color: #f9fafc; + background-color: $background-color; flex: 1; min-width: 400px; } @@ -89,10 +148,123 @@ html, body { } .header { - height: 50px; - background-color: #3c8dbc; - color: #fff; + min-height: 44px; + max-height: 44px; + background-color: $brand-primary; + color: white; + text-align: center; + overflow: hidden; flex: 0 0 auto; + + a, button { + color: white !important; + text-decoration: none; + background: none; + + &:hover, &:focus { + background-color: rgba(255, 255, 255, 0.1); + } + + &:hover { + text-decoration: none; + } + + &:focus { + text-decoration: underline; + } + } + + .title { + font-weight: bold; + display: block; + padding: 12px 0; + text-align: center; + } + + .left { + display: block; + position: absolute; + left: 0; + text-align: left; + + a, button { + padding: 12px 10px; + display: block; + float: left; + } + + .fa-spinner { + padding: 15px; + display: block; + float: left; + } + } + + .right { + display: block; + right: 0; + position: absolute; + z-index: 99999; + + a, button { + padding: 12px 10px; + display: block; + float: right; + } + + .fa-spinner { + padding: 15px; + display: block; + float: right; + } + } + + &.header-search { + .left, .right, .search { + display: table-cell; + position: relative; + } + + .search { + padding: 0 7px; + width: 100%; + text-align: left; + position: relative; + + .fa-search { + position: absolute; + top: 15px; + left: 15px; + color: lighten($brand-primary, 30%); + } + + input { + width: 100%; + margin: 0; + float: none; + background: darken($brand-primary, 8%); + border: none; + color: white; + padding: 5px 10px 5px 30px; + border-radius: 5px; + + &:focus { + border-radius: 5px; + outline: none; + background: darken($brand-primary, 10%); + } + + &::-webkit-input-placeholder { + color: lighten($brand-primary, 35%); + } + } + } + + a { + white-space: nowrap; + float: none; + } + } } .content { @@ -103,7 +275,282 @@ html, body { .footer { height: 50px; - background-color: #fff; + background-color: $background-color-alt; flex: 0 0 auto; + border-top: 1px solid $border-color-dark; + } +} + + +.list { + .list-grouped { + .list-grouped-header { + background-color: transparent; + padding: 10px 10px; + color: $gray-light; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + small { + float: right; + } + } + } + + .list-section { + padding-bottom: 10px; + + &:first-child { + padding-top: 10px; + } + + .list-section-header { + background-color: transparent; + padding: 5px 10px; + color: $gray-light; + text-transform: uppercase; + font-size: ($font-size-base - 1); + + label { + font-weight: normal; + } + + span { + float: right; + } + } + + .list-section-items { + border-top: 1px solid $border-color-dark; + border-bottom: 1px solid $border-color-dark; + } + + .list-section-footer { + padding: 5px 10px; + font-size: $font-size-small; + color: $gray-light; + } + } + + .list-grouped-item, .list-section-item { + display: block; + padding: 10px 10px; + background-color: white; + text-decoration: none; + color: $text-color; + position: relative; + z-index: 1; + + &:not(.pre) { + &:after { + content: ""; + display: table; + clear: both; + } + } + + &.pre { + white-space: pre; + overflow-x: auto; + } + + &.text-primary { + color: $brand-primary !important; + } + + &.text-danger { + color: $brand-danger !important; + } + + &:not(.wrap) { + .text, .detail { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &:before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + height: 1px; + width: calc(100% - 10px); + border-bottom: 1px solid $border-color; + } + + &:last-child { + &:before { + border: none; + height: 0; + } + } + + &:hover, &:focus, &.active { + background-color: $list-item-hover; + } + + &:not(:hover):focus { + border-left: 5px solid $brand-primary; + padding-left: 5px; + } + + .leading-icon { + font-size: 35px; + float: left; + display: inline-block; + margin: 0 8px 5px 0; + } + + .text { + display: block; + color: $text-color; + } + + .detail { + font-size: $font-size-small; + color: $gray-light; + display: block; + } + + .item-label { + font-size: $font-size-small; + color: $gray-light; + display: block; + width: 100%; + font-weight: normal; + margin-bottom: 5px; + } + + &.list-section-item-table { + display: table; + width: 100%; + } + + .action-button { + padding: 8px 10px 8px 5px; + display: table-cell; + width: 20px; + vertical-align: middle; + + &.text-danger { + color: $brand-danger !important; + } + } + + .action-button-content { + display: table-cell; + vertical-align: middle; + } + + .field-type { + margin: 5px 0 0 27px; + width: calc(100% - 27px); + } + + .icon { + display: flex; + justify-content: center; + align-items: center; + float: left; + height: 36px; + width: 34px; + margin-left: -5px; + color: $text-muted; + + img { + border-radius: 3px; + max-height: 20px; + max-width: 20px; + } + + &.single-line { + height: initial; + display: block; + text-align: center; + } + } + + .action-buttons { + float: right; + + .btn-list { + float: left; + cursor: pointer; + padding: 10px 8px; + background: none; + border: none; + color: $brand-primary; + + &:hover, &:focus { + color: darken($brand-primary, 10%); + } + + &.disabled { + color: $list-icon-color; + + &:hover { + color: $list-icon-color; + } + } + + &:last-child { + padding-right: 2px !important; + } + } + } + + .fa-chevron-right, .right-icon { + float: right; + margin-top: 4px; + color: $list-icon-color; + } + + .item-sub-label { + float: right; + display: block; + margin-right: 15px; + color: $gray-light; + } + + small.item-sub-label { + margin-top: 2px; + } + + &.condensed { + padding: 3px 10px; + + .action-buttons { + .btn-list { + padding: 8px 5px; + } + } + + &:not(:hover):focus { + padding-left: 5px; + } + } + + &.wrap { + overflow-wrap: break-word; + } + + &.flex { + display: flex; + } + + .flex-grow { + flex-grow: 1; + } + } +} + +.list-no-selection { + .list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) { + &:hover { + background-color: white; + } } } diff --git a/webpack.common.js b/webpack.common.js index 13ab356d4d..e695747e65 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -3,6 +3,7 @@ const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); +const GoogleFontsPlugin = require("google-fonts-webpack-plugin"); const isVendorModule = (module) => { if (!module.context) { @@ -40,12 +41,35 @@ module.exports = { test: /\.(html)$/, loader: 'html-loader' }, + { + test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, + use: [{ + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: 'fonts/' + } + }] + } ] }, plugins: [ new CleanWebpackPlugin([ path.resolve(__dirname, 'build/*') ]), + new GoogleFontsPlugin({ + fonts: [ + { + family: 'Open Sans', + variants: ['300', '300italic', '400', '400italic', '600', '600italic', + '700', '700italic', '800', '800italic'], + subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext'] + } + ], + formats: ['woff2'], + path: 'fonts/', + filename: 'css/fonts.css' + }), new webpack.optimize.CommonsChunkPlugin({ name: 'app/vendor', chunks: ['app/main'],