Skip to content

Commit

Permalink
Update list styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rukenshia
Rukenshia committed Dec 10, 2018
1 parent cc48840 commit 27a0b02
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 180 deletions.
8 changes: 4 additions & 4 deletions frontend/shipvote-frontend/dist/config.vue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -809,7 +809,7 @@ window.App = {
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__ = __webpack_require__(6);
/* empty harmony namespace reexport */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_55e235b1_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__ = __webpack_require__(15);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_487d8bad_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__ = __webpack_require__(15);
function injectStyle (ssrContext) {
__webpack_require__(13)
}
Expand All @@ -829,7 +829,7 @@ var __vue_scopeId__ = null
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_55e235b1_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_487d8bad_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
Expand All @@ -850,7 +850,7 @@ var content = __webpack_require__(14);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(1)("a5bfb16c", content, true, {});
var update = __webpack_require__(1)("69da162c", content, true, {});

/***/ }),
/* 14 */
Expand All @@ -861,7 +861,7 @@ exports = module.exports = __webpack_require__(0)(false);
exports.push([module.i, "@import url(https://fonts.googleapis.com/css?family=Roboto);", ""]);

// module
exports.push([module.i, "\n.mdc-text-field--box {\n margin-top: 0;\n}\n.dark {\n background-color: #201c2b;\n color: #e5e3e8;\n}\n.dark a {\n color: #e2dbf0;\n}\n.dark .mdc-card .mdc-card__supporting-text {\n color: #e5e3e8;\n}\n.dark .mdc-card.mdc-card--flat {\n background-color: #6441a4;\n color: inherit;\n}\n.dark .mdc-tab--active .mdc-tab__text-label {\n color: #6441a4;\n}\n.dark .mdc-tab__text-label {\n color: #e5e3e8;\n}\n.dark .mdc-form-field > label {\n color: #e2dbf0;\n}\n.dark .mdc-text-field, .dark .mdc-select {\n background-color: #6441a4;\n}\n.dark .mdc-text-field label, .dark .mdc-select label {\n color: #e2dbf0 !important;\n}\n.dark .mdc-text-field input, .dark .mdc-text-field select, .dark .mdc-select input, .dark .mdc-select select {\n color: #e5e3e8 !important;\n}\n.dark .mdc-button.mdc-button--outlined {\n border-color: #e2dbf0;\n color: #e2dbf0;\n}\n.dark .mdc-list {\n color: inherit;\n}\n.dark .mdc-list .mdc-list-item .mdc-list-item__secondary-text {\n color: #e2dbf0;\n}\n.dark .vote-notice .cta {\n background-color: #6441a4;\n}\n.dark .selection .card {\n background-color: #201c2b;\n}\n.dark .selection .card .ship {\n background-color: #6441a4;\n border-color: #6441a4;\n}\n.dark .selection .card .ship .vote-button {\n background-color: #e5e3e8;\n color: #6441a4;\n}\n.dark .selection .card .ship .progress-bar .progress {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.typography {\n font-family: Roboto, sans-serif;\n}\n.typography__color--warning {\n color: orange;\n}\n.typography__color--success {\n color: #3fc380;\n}\n.typography__color--error {\n color: #d24d57;\n}\n.typography--headline1 {\n font-size: 20px;\n font-weight: bold;\n display: block;\n}\n.typography--subtitle {\n color: #3f3f3f;\n}\n.card {\n background-color: #ffffff;\n border-radius: 4px;\n padding: 8px 12px;\n overflow: hidden;\n}\n.card .card__divider {\n height: 12px;\n}\n.raised {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n:root {\n --mdc-theme-secondary: #6441a4;\n --mdc-theme-primary: #6441a4;\n}\n.mdc-card.mdc-card--flat {\n padding: 4px;\n box-shadow: none;\n border-radius: 8px;\n background-color: #f8f9fa;\n color: #5f6368;\n}\n.mdc-list.mdc-list--bordered li:first-child {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.mdc-list.mdc-list--bordered li:last-child {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n.mdc-list .mdc-list-item {\n padding-top: 16px;\n}\n.fullwidth,\n.fullwidth .mdc-textfield {\n width: 100%;\n}\n", ""]);
exports.push([module.i, "\n.mdc-text-field--box {\n margin-top: 0;\n}\n.dark {\n background-color: #201c2b;\n color: #e5e3e8;\n}\n.dark a {\n color: #e2dbf0;\n}\n.dark .mdc-card .mdc-card__supporting-text {\n color: #e5e3e8;\n}\n.dark .mdc-card.mdc-card--flat {\n background-color: #6441a4;\n color: inherit;\n}\n.dark .mdc-tab--active .mdc-tab__text-label {\n color: #6441a4;\n}\n.dark .mdc-tab__text-label {\n color: #e5e3e8;\n}\n.dark .mdc-form-field > label {\n color: #e2dbf0;\n}\n.dark .mdc-text-field, .dark .mdc-select {\n background-color: #6441a4;\n}\n.dark .mdc-text-field label, .dark .mdc-select label {\n color: #e2dbf0 !important;\n}\n.dark .mdc-text-field input, .dark .mdc-text-field select, .dark .mdc-select input, .dark .mdc-select select {\n color: #e5e3e8 !important;\n}\n.dark .mdc-button.mdc-button--outlined {\n border-color: #e2dbf0;\n color: #e2dbf0;\n}\n.dark .mdc-list {\n color: inherit;\n}\n.dark .mdc-list .mdc-list-item .mdc-list-item__secondary-text {\n color: #e2dbf0;\n}\n.dark .mdc-list.mdc-list--bordered .mdc-list-item {\n border-color: #e2dbf0;\n}\n.dark .vote-notice .cta {\n background-color: #6441a4;\n}\n.dark .selection .card {\n background-color: #201c2b;\n}\n.dark .selection .card .ship {\n background-color: #6441a4;\n border-color: #6441a4;\n}\n.dark .selection .card .ship .vote-button {\n background-color: #e5e3e8;\n color: #6441a4;\n}\n.dark .selection .card .ship .progress-bar .progress {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.typography {\n font-family: Roboto, sans-serif;\n}\n.typography__color--warning {\n color: orange;\n}\n.typography__color--success {\n color: #3fc380;\n}\n.typography__color--error {\n color: #d24d57;\n}\n.typography--headline1 {\n font-size: 20px;\n font-weight: bold;\n display: block;\n}\n.typography--subtitle {\n color: #3f3f3f;\n}\n.card {\n background-color: #ffffff;\n border-radius: 4px;\n padding: 8px 12px;\n overflow: hidden;\n}\n.card .card__divider {\n height: 12px;\n}\n.raised {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.mdc-list .mdc-list-item {\n padding-top: 8px;\n}\n.mdc-list .mdc-list-item .mdc-list-item__graphic {\n padding-left: 8px;\n}\n.mdc-list .mdc-list-item .mdc-list-item__text {\n margin-top: 4px;\n}\n.mdc-list .mdc-list-item .mdc-list-item__meta {\n margin-top: -8px;\n}\n:root {\n --mdc-theme-secondary: #6441a4;\n --mdc-theme-primary: #6441a4;\n}\n.mdc-card.mdc-card--flat {\n padding: 4px;\n box-shadow: none;\n border-radius: 8px;\n background-color: #f8f9fa;\n color: #5f6368;\n}\n.mdc-list.mdc-list--bordered li:first-child {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.mdc-list.mdc-list--bordered li:last-child {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n.fullwidth,\n.fullwidth .mdc-textfield {\n width: 100%;\n}\n", ""]);

// exports

Expand Down
57 changes: 52 additions & 5 deletions frontend/shipvote-frontend/dist/live_config.vue.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions frontend/shipvote-frontend/dist/video_overlay.vue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2350,7 +2350,7 @@ exports = module.exports = __webpack_require__(0)(false);
exports.push([module.i, "@import url(https://fonts.googleapis.com/css?family=Roboto);", ""]);

// module
exports.push([module.i, "\n.mdc-text-field--box {\n margin-top: 0;\n}\n.dark {\n background-color: #201c2b;\n color: #e5e3e8;\n}\n.dark a {\n color: #e2dbf0;\n}\n.dark .mdc-card .mdc-card__supporting-text {\n color: #e5e3e8;\n}\n.dark .mdc-card.mdc-card--flat {\n background-color: #6441a4;\n color: inherit;\n}\n.dark .mdc-tab--active .mdc-tab__text-label {\n color: #6441a4;\n}\n.dark .mdc-tab__text-label {\n color: #e5e3e8;\n}\n.dark .mdc-form-field > label {\n color: #e2dbf0;\n}\n.dark .mdc-text-field, .dark .mdc-select {\n background-color: #6441a4;\n}\n.dark .mdc-text-field label, .dark .mdc-select label {\n color: #e2dbf0 !important;\n}\n.dark .mdc-text-field input, .dark .mdc-text-field select, .dark .mdc-select input, .dark .mdc-select select {\n color: #e5e3e8 !important;\n}\n.dark .mdc-button.mdc-button--outlined {\n border-color: #e2dbf0;\n color: #e2dbf0;\n}\n.dark .mdc-list {\n color: inherit;\n}\n.dark .mdc-list .mdc-list-item .mdc-list-item__secondary-text {\n color: #e2dbf0;\n}\n.dark .vote-notice .cta {\n background-color: #6441a4;\n}\n.dark .selection .card {\n background-color: #201c2b;\n}\n.dark .selection .card .ship {\n background-color: #6441a4;\n border-color: #6441a4;\n}\n.dark .selection .card .ship .vote-button {\n background-color: #e5e3e8;\n color: #6441a4;\n}\n.dark .selection .card .ship .progress-bar .progress {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.typography {\n font-family: Roboto, sans-serif;\n}\n.typography__color--warning {\n color: orange;\n}\n.typography__color--success {\n color: #3fc380;\n}\n.typography__color--error {\n color: #d24d57;\n}\n.typography--headline1 {\n font-size: 20px;\n font-weight: bold;\n display: block;\n}\n.typography--subtitle {\n color: #3f3f3f;\n}\n.card {\n background-color: #ffffff;\n border-radius: 4px;\n padding: 8px 12px;\n overflow: hidden;\n}\n.card .card__divider {\n height: 12px;\n}\n.raised {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.vote-notice {\n position: fixed;\n left: 50%;\n bottom: 88px;\n transform: translateX(-50%);\n}\n.vote-notice[data-active='true'] .cta {\n opacity: 1;\n}\n.vote-notice[data-initial='true'] .cta,\n .vote-notice[data-active='true']:hover .cta {\n width: 186px;\n}\n.vote-notice[data-active='true']:hover .cta {\n transition: width 0.5s;\n cursor: pointer;\n}\n.vote-notice[data-dismissed='true'] .cta {\n transition: width 0.5s, opacity 0.2s;\n}\n.vote-notice .cta {\n display: flex;\n align-items: center;\n background-color: #ffffff;\n border-radius: 20px;\n padding: 8px 12px;\n width: 24px;\n height: 24px;\n overflow: hidden;\n opacity: 0;\n transition: width 0.5s 0.8s, opacity 1s ease-in;\n}\n.vote-notice .cta span {\n margin-left: 4px;\n font-size: 16px;\n font-family: Roboto;\n white-space: nowrap;\n overflow: hidden;\n}\n.selection {\n position: fixed;\n left: 8px;\n top: 80px;\n width: 386px;\n}\n.selection .card {\n height: 0;\n opacity: 0;\n visibility: hidden;\n overflow-y: scroll;\n transition: visibility 0s linear 0.5s, height 0.5s, opacity 0.45s;\n}\n.selection[data-active='true'] .card {\n visibility: visible;\n transition-delay: 0s;\n opacity: 1;\n}\n:root {\n --mdc-theme-secondary: #6441a4;\n --mdc-theme-primary: #6441a4;\n}\n", ""]);
exports.push([module.i, "\n.mdc-text-field--box {\n margin-top: 0;\n}\n.dark {\n background-color: #201c2b;\n color: #e5e3e8;\n}\n.dark a {\n color: #e2dbf0;\n}\n.dark .mdc-card .mdc-card__supporting-text {\n color: #e5e3e8;\n}\n.dark .mdc-card.mdc-card--flat {\n background-color: #6441a4;\n color: inherit;\n}\n.dark .mdc-tab--active .mdc-tab__text-label {\n color: #6441a4;\n}\n.dark .mdc-tab__text-label {\n color: #e5e3e8;\n}\n.dark .mdc-form-field > label {\n color: #e2dbf0;\n}\n.dark .mdc-text-field, .dark .mdc-select {\n background-color: #6441a4;\n}\n.dark .mdc-text-field label, .dark .mdc-select label {\n color: #e2dbf0 !important;\n}\n.dark .mdc-text-field input, .dark .mdc-text-field select, .dark .mdc-select input, .dark .mdc-select select {\n color: #e5e3e8 !important;\n}\n.dark .mdc-button.mdc-button--outlined {\n border-color: #e2dbf0;\n color: #e2dbf0;\n}\n.dark .mdc-list {\n color: inherit;\n}\n.dark .mdc-list .mdc-list-item .mdc-list-item__secondary-text {\n color: #e2dbf0;\n}\n.dark .mdc-list.mdc-list--bordered .mdc-list-item {\n border-color: #e2dbf0;\n}\n.dark .vote-notice .cta {\n background-color: #6441a4;\n}\n.dark .selection .card {\n background-color: #201c2b;\n}\n.dark .selection .card .ship {\n background-color: #6441a4;\n border-color: #6441a4;\n}\n.dark .selection .card .ship .vote-button {\n background-color: #e5e3e8;\n color: #6441a4;\n}\n.dark .selection .card .ship .progress-bar .progress {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.typography {\n font-family: Roboto, sans-serif;\n}\n.typography__color--warning {\n color: orange;\n}\n.typography__color--success {\n color: #3fc380;\n}\n.typography__color--error {\n color: #d24d57;\n}\n.typography--headline1 {\n font-size: 20px;\n font-weight: bold;\n display: block;\n}\n.typography--subtitle {\n color: #3f3f3f;\n}\n.card {\n background-color: #ffffff;\n border-radius: 4px;\n padding: 8px 12px;\n overflow: hidden;\n}\n.card .card__divider {\n height: 12px;\n}\n.raised {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.vote-notice {\n position: fixed;\n left: 50%;\n bottom: 88px;\n transform: translateX(-50%);\n}\n.vote-notice[data-active='true'] .cta {\n opacity: 1;\n}\n.vote-notice[data-initial='true'] .cta,\n .vote-notice[data-active='true']:hover .cta {\n width: 186px;\n}\n.vote-notice[data-active='true']:hover .cta {\n transition: width 0.5s;\n cursor: pointer;\n}\n.vote-notice[data-dismissed='true'] .cta {\n transition: width 0.5s, opacity 0.2s;\n}\n.vote-notice .cta {\n display: flex;\n align-items: center;\n background-color: #ffffff;\n border-radius: 20px;\n padding: 8px 12px;\n width: 24px;\n height: 24px;\n overflow: hidden;\n opacity: 0;\n transition: width 0.5s 0.8s, opacity 1s ease-in;\n}\n.vote-notice .cta span {\n margin-left: 4px;\n font-size: 16px;\n font-family: Roboto;\n white-space: nowrap;\n overflow: hidden;\n}\n.selection {\n position: fixed;\n left: 8px;\n top: 80px;\n width: 386px;\n}\n.selection .card {\n height: 0;\n opacity: 0;\n visibility: hidden;\n overflow-y: scroll;\n transition: visibility 0s linear 0.5s, height 0.5s, opacity 0.45s;\n}\n.selection[data-active='true'] .card {\n visibility: visible;\n transition-delay: 0s;\n opacity: 1;\n}\n:root {\n --mdc-theme-secondary: #6441a4;\n --mdc-theme-primary: #6441a4;\n}\n", ""]);

// exports

Expand Down Expand Up @@ -2426,7 +2426,7 @@ exports.push([module.i, "\n.card {\n background-color: #ffffff;\n border-radiu
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Ship_vue__ = __webpack_require__(10);
/* unused harmony namespace reexport */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1bf0bfed_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Ship_vue__ = __webpack_require__(29);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_c5283a58_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Ship_vue__ = __webpack_require__(29);
function injectStyle (ssrContext) {
__webpack_require__(27)
}
Expand All @@ -2446,7 +2446,7 @@ var __vue_scopeId__ = null
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Ship_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1bf0bfed_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Ship_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_c5283a58_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Ship_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
Expand All @@ -2467,7 +2467,7 @@ var content = __webpack_require__(28);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(1)("6d3995f4", content, true, {});
var update = __webpack_require__(1)("c2dbee1e", content, true, {});

/***/ }),
/* 28 */
Expand Down
4 changes: 4 additions & 0 deletions frontend/shipvote-frontend/src/_darkmode.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@
.mdc-list-item .mdc-list-item__secondary-text {
color: $color--text-highlight;
}

&.mdc-list--bordered .mdc-list-item {
border-color: $color--text-highlight;
}
}

.vote-notice .cta {
Expand Down
15 changes: 15 additions & 0 deletions frontend/shipvote-frontend/src/_list.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.mdc-list .mdc-list-item {
padding-top: 8px;

.mdc-list-item__graphic {
padding-left: 8px;
}

.mdc-list-item__text {
margin-top: 4px;
}

.mdc-list-item__meta {
margin-top: -8px;
}
}
5 changes: 1 addition & 4 deletions frontend/shipvote-frontend/src/config/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ export default window.App;
@import '../darkmode';
@import '../typography';
@import '../card';
@import '../list';
:root {
--mdc-theme-secondary: #6441a4;
Expand All @@ -296,10 +297,6 @@ export default window.App;
border-bottom-right-radius: 8px;
}
.mdc-list .mdc-list-item {
padding-top: 16px;
}
.fullwidth,
.fullwidth .mdc-textfield {
width: 100%;
Expand Down
Loading

0 comments on commit 27a0b02

Please sign in to comment.