diff --git a/ui-v2/GNUmakefile b/ui-v2/GNUmakefile index 0b000172ca..c8b855c3fe 100644 --- a/ui-v2/GNUmakefile +++ b/ui-v2/GNUmakefile @@ -7,6 +7,19 @@ deps: node_modules clean clean: rm -rf ./tmp +# target for netlify ui previews +# Netlify Settings +# base-directory: ui-v2 +# build command: make netlify +# publish directory: ui-v2/ui-dist +netlify: build-staging + mkdir -p ui-dist/ui \ + && mv dist/* ui-dist/ui/ \ + && cp _redirects ui-dist/_redirects + +build-staging: deps + yarn run build:staging + build-ci: deps yarn run build-ci --output-path=dist diff --git a/ui-v2/_redirects b/ui-v2/_redirects new file mode 100644 index 0000000000..3f6c546aab --- /dev/null +++ b/ui-v2/_redirects @@ -0,0 +1,2 @@ +/ /ui +/ui/* /ui/index.html 200 diff --git a/ui-v2/app/adapters/node.js b/ui-v2/app/adapters/node.js index 3b1cace76b..7e7ba7514a 100644 --- a/ui-v2/app/adapters/node.js +++ b/ui-v2/app/adapters/node.js @@ -20,6 +20,38 @@ export default Adapter.extend({ } return this.appendURL('internal/ui/node', [query.id], this.cleanQuery(query)); }, + urlForRequest: function({ type, snapshot, requestType }) { + switch (requestType) { + case 'queryLeader': + return this.urlForQueryLeader(snapshot, type.modelName); + } + return this._super(...arguments); + }, + urlForQueryLeader: function(query, modelName) { + // https://www.consul.io/api/status.html#get-raft-leader + return this.appendURL('status/leader', [], this.cleanQuery(query)); + }, + isQueryLeader: function(url, method) { + return url.pathname === this.parseURL(this.urlForQueryLeader({})).pathname; + }, + queryLeader: function(store, modelClass, id, snapshot) { + const params = { + store: store, + type: modelClass, + id: id, + snapshot: snapshot, + requestType: 'queryLeader', + }; + // _requestFor is private... but these methods aren't, until they disappear.. + const request = { + method: this.methodForRequest(params), + url: this.urlForRequest(params), + headers: this.headersForRequest(params), + data: this.dataForRequest(params), + }; + // TODO: private.. + return this._makeRequest(request); + }, handleBatchResponse: function(url, response, primary, slug) { const dc = url.searchParams.get(API_DATACENTER_KEY) || ''; return response.map((item, i, arr) => { @@ -41,7 +73,21 @@ export default Adapter.extend({ const method = requestData.method; if (status === HTTP_OK) { const url = this.parseURL(requestData.url); + let temp, port, address; switch (true) { + case this.isQueryLeader(url, method): + // This response is just an ip:port like `"10.0.0.1:8000"` + // split it and make it look like a `C`onsul.`R`esponse + // popping off the end for ports should cover us for IPv6 addresses + // as we should always get a `address:port` or `[a:dd:re:ss]:port` combo + temp = response.split(':'); + port = temp.pop(); + address = temp.join(':'); + response = { + Address: address, + Port: port, + }; + break; case this.isQueryRecord(url, method): response = this.handleSingleResponse(url, fillSlug(response), PRIMARY_KEY, SLUG_KEY); break; diff --git a/ui-v2/app/components/app-view.js b/ui-v2/app/components/app-view.js index ed526eab0d..f4ae4791ce 100644 --- a/ui-v2/app/components/app-view.js +++ b/ui-v2/app/components/app-view.js @@ -11,6 +11,7 @@ export default Component.extend(SlotsMixin, { classNameBindings: ['enabled::disabled', 'authorized::unauthorized'], dom: service('dom'), didReceiveAttrs: function() { + this._super(...arguments); // right now only manually added classes are hoisted to const $root = get(this, 'dom').root(); let cls = get(this, 'class') || ''; @@ -22,18 +23,22 @@ export default Component.extend(SlotsMixin, { if (cls) { // its possible for 'layout' templates to change after insert // check for these specific layouts and clear them out - [...$root.classList].forEach(function(item, i) { + const receivedClasses = new Set(templatize(cls.split(' '))); + const difference = new Set([...$root.classList].filter(item => !receivedClasses.has(item))); + [...difference].forEach(function(item, i) { if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) { $root.classList.remove(item); } }); - $root.classList.add(...templatize(cls.split(' '))); + $root.classList.add(...receivedClasses); } }, didInsertElement: function() { + this._super(...arguments); this.didReceiveAttrs(); }, didDestroyElement: function() { + this._super(...arguments); const cls = get(this, 'class') + ' loading'; if (cls) { const $root = get(this, 'dom').root(); diff --git a/ui-v2/app/components/healthcheck-output.js b/ui-v2/app/components/healthcheck-output.js index 227501fc5c..35c2e7a280 100644 --- a/ui-v2/app/components/healthcheck-output.js +++ b/ui-v2/app/components/healthcheck-output.js @@ -1,5 +1,6 @@ import Component from '@ember/component'; +import Slotted from 'block-slots'; -export default Component.extend({ +export default Component.extend(Slotted, { classNames: ['healthcheck-output'], }); diff --git a/ui-v2/app/components/phrase-editor.js b/ui-v2/app/components/phrase-editor.js index e280b571c1..4eb7bce817 100644 --- a/ui-v2/app/components/phrase-editor.js +++ b/ui-v2/app/components/phrase-editor.js @@ -1,44 +1,67 @@ import Component from '@ember/component'; import { get, set } from '@ember/object'; +import { inject as service } from '@ember/service'; export default Component.extend({ + dom: service('dom'), classNames: ['phrase-editor'], item: '', - remove: function(index, e) { - this.items.removeAt(index, 1); + didInsertElement: function() { + this._super(...arguments); + // TODO: use {{ref}} + this.input = get(this, 'dom').element('input', this.element); + }, + onchange: function(e) {}, + search: function(e) { + // TODO: Temporarily continue supporting `searchable` + let searchable = get(this, 'searchable'); + if (searchable) { + if (!Array.isArray(searchable)) { + searchable = [searchable]; + } + searchable.forEach(item => { + item.search(get(this, 'value')); + }); + } this.onchange(e); }, - add: function(e) { - const value = get(this, 'item').trim(); - if (value !== '') { - set(this, 'item', ''); - const currentItems = get(this, 'items') || []; - const items = new Set(currentItems).add(value); - if (items.size > currentItems.length) { - set(this, 'items', [...items]); - this.onchange(e); + oninput: function(e) {}, + onkeydown: function(e) {}, + actions: { + keydown: function(e) { + switch (e.keyCode) { + case 8: // backspace + if (e.target.value == '' && get(this, 'value').length > 0) { + this.actions.remove.bind(this)(get(this, 'value').length - 1); + } + break; + case 27: // escape + set(this, 'value', []); + this.search({ target: this }); + break; } - } - }, - onkeydown: function(e) { - switch (e.keyCode) { - case 8: - if (e.target.value == '' && this.items.length > 0) { - this.remove(this.items.length - 1); + this.onkeydown({ target: this }); + }, + input: function(e) { + set(this, 'item', e.target.value); + this.oninput({ target: this }); + }, + remove: function(index, e) { + get(this, 'value').removeAt(index, 1); + this.search({ target: this }); + this.input.focus(); + }, + add: function(e) { + const item = get(this, 'item').trim(); + if (item !== '') { + set(this, 'item', ''); + const currentItems = get(this, 'value') || []; + const items = new Set(currentItems).add(item); + if (items.size > currentItems.length) { + set(this, 'value', [...items]); + this.search({ target: this }); } - break; - } - }, - oninput: function(e) { - set(this, 'item', e.target.value); - }, - onchange: function(e) { - let searchable = get(this, 'searchable'); - if (!Array.isArray(searchable)) { - searchable = [searchable]; - } - searchable.forEach(item => { - item.search(get(this, 'items')); - }); + } + }, }, }); diff --git a/ui-v2/app/components/sort-control.js b/ui-v2/app/components/sort-control.js new file mode 100644 index 0000000000..f02e3602e9 --- /dev/null +++ b/ui-v2/app/components/sort-control.js @@ -0,0 +1,15 @@ +import Component from '@ember/component'; +import { get, set } from '@ember/object'; +export default Component.extend({ + classNames: ['sort-control'], + direction: 'asc', + onchange: function() {}, + actions: { + change: function(e) { + if (e.target.type === 'checkbox') { + set(this, 'direction', e.target.checked ? 'desc' : 'asc'); + } + this.onchange({ target: { value: `${get(this, 'value')}:${get(this, 'direction')}` } }); + }, + }, +}); diff --git a/ui-v2/app/components/stats-card.js b/ui-v2/app/components/stats-card.js new file mode 100644 index 0000000000..5d59c19c13 --- /dev/null +++ b/ui-v2/app/components/stats-card.js @@ -0,0 +1,4 @@ +import Component from '@ember/component'; +import Slotted from 'block-slots'; + +export default Component.extend(Slotted, {}); diff --git a/ui-v2/app/controllers/settings.js b/ui-v2/app/controllers/settings.js index 8bb96673cd..7f0df20d36 100644 --- a/ui-v2/app/controllers/settings.js +++ b/ui-v2/app/controllers/settings.js @@ -34,9 +34,6 @@ export default Controller.extend({ const blocking = get(this, 'item.client.blocking'); switch (target.name) { case 'client[blocking]': - if (typeof blocking === 'undefined') { - set(this, 'item.client', {}); - } set(this, 'item.client.blocking', !blocking); this.send('update', get(this, 'item')); break; diff --git a/ui-v2/app/helpers/starts-with.js b/ui-v2/app/helpers/starts-with.js new file mode 100644 index 0000000000..b4e25bc69e --- /dev/null +++ b/ui-v2/app/helpers/starts-with.js @@ -0,0 +1,7 @@ +import { helper } from '@ember/component/helper'; + +export function startsWith([needle, haystack = ''] /*, hash*/) { + return haystack.startsWith(needle); +} + +export default helper(startsWith); diff --git a/ui-v2/app/instance-initializers/selection.js b/ui-v2/app/instance-initializers/selection.js new file mode 100644 index 0000000000..72b7e697c5 --- /dev/null +++ b/ui-v2/app/instance-initializers/selection.js @@ -0,0 +1,63 @@ +import env from 'consul-ui/env'; + +const SECONDARY_BUTTON = 2; +const isSelecting = function(win = window) { + const selection = win.getSelection(); + let selecting = false; + try { + selecting = + 'isCollapsed' in selection && !selection.isCollapsed && selection.toString().length > 1; + } catch (e) { + // passthrough + } + return selecting; +}; +export default { + name: 'selection', + initialize(container) { + if (env('CONSUL_UI_DISABLE_ANCHOR_SELECTION')) { + return; + } + const dom = container.lookup('service:dom'); + const findAnchor = function(el) { + return el.tagName === 'A' ? el : dom.closest('a', el); + }; + const mousedown = function(e) { + const $a = findAnchor(e.target); + if ($a) { + if (typeof e.button !== 'undefined' && e.button === SECONDARY_BUTTON) { + const dataHref = $a.dataset.href; + if (dataHref) { + $a.setAttribute('href', dataHref); + } + return; + } + const href = $a.getAttribute('href'); + if (href) { + $a.dataset.href = href; + $a.removeAttribute('href'); + } + } + }; + const mouseup = function(e) { + const $a = findAnchor(e.target); + if ($a) { + const href = $a.dataset.href; + if (!isSelecting() && href) { + $a.setAttribute('href', href); + } + } + }; + + document.body.addEventListener('mousedown', mousedown); + document.body.addEventListener('mouseup', mouseup); + + container.reopen({ + willDestroy: function() { + document.body.removeEventListener('mousedown', mousedown); + document.body.removeEventListener('mouseup', mouseup); + return this._super(...arguments); + }, + }); + }, +}; diff --git a/ui-v2/app/mixins/kv/with-actions.js b/ui-v2/app/mixins/kv/with-actions.js index b281ef2c51..ae099359b6 100644 --- a/ui-v2/app/mixins/kv/with-actions.js +++ b/ui-v2/app/mixins/kv/with-actions.js @@ -29,7 +29,7 @@ export default Mixin.create(WithBlockingActions, { delete item.Session; set(controller, 'session', null); }); - }, 'delete'); + }, 'deletesession'); }, }, }); diff --git a/ui-v2/app/models/coordinate.js b/ui-v2/app/models/coordinate.js index 7449c6c871..ae95ea1030 100644 --- a/ui-v2/app/models/coordinate.js +++ b/ui-v2/app/models/coordinate.js @@ -10,4 +10,5 @@ export default Model.extend({ Coord: attr(), Segment: attr('string'), Datacenter: attr('string'), + SyncTime: attr('number'), }); diff --git a/ui-v2/app/models/node.js b/ui-v2/app/models/node.js index be33ca7cf6..7c4de8a598 100644 --- a/ui-v2/app/models/node.js +++ b/ui-v2/app/models/node.js @@ -21,6 +21,7 @@ export default Model.extend({ Datacenter: attr('string'), Segment: attr(), Coord: attr(), + SyncTime: attr('number'), meta: attr(), hasStatus: function(status) { return hasStatus(get(this, 'Checks'), status); diff --git a/ui-v2/app/models/proxy.js b/ui-v2/app/models/proxy.js index bb28d6ac08..cbd26bbc4f 100644 --- a/ui-v2/app/models/proxy.js +++ b/ui-v2/app/models/proxy.js @@ -10,4 +10,5 @@ export default Model.extend({ ServiceID: attr('string'), Node: attr('string'), ServiceProxy: attr(), + SyncTime: attr('number'), }); diff --git a/ui-v2/app/models/service.js b/ui-v2/app/models/service.js index 6e0092e5f8..6c7300fb7f 100644 --- a/ui-v2/app/models/service.js +++ b/ui-v2/app/models/service.js @@ -31,6 +31,7 @@ export default Model.extend({ Node: attr(), Service: attr(), Checks: attr(), + SyncTime: attr('number'), meta: attr(), passing: computed('ChecksPassing', 'Checks', function() { let num = 0; diff --git a/ui-v2/app/models/session.js b/ui-v2/app/models/session.js index d569c051bd..c16f900b24 100644 --- a/ui-v2/app/models/session.js +++ b/ui-v2/app/models/session.js @@ -20,4 +20,5 @@ export default Model.extend({ }, }), Datacenter: attr('string'), + SyncTime: attr('number'), }); diff --git a/ui-v2/app/routes/dc/kv/edit.js b/ui-v2/app/routes/dc/kv/edit.js index 44c13a5f15..37581dc029 100644 --- a/ui-v2/app/routes/dc/kv/edit.js +++ b/ui-v2/app/routes/dc/kv/edit.js @@ -17,6 +17,7 @@ export default Route.extend(WithKvActions, { isLoading: false, parent: repo.findBySlug(ascend(key, 1) || '/', dc), item: repo.findBySlug(key, dc), + session: null, }).then(model => { // TODO: Consider loading this after initial page load const session = get(model.item, 'Session'); diff --git a/ui-v2/app/routes/dc/nodes/index.js b/ui-v2/app/routes/dc/nodes/index.js index 8cbd56ecdc..2852d3dff6 100644 --- a/ui-v2/app/routes/dc/nodes/index.js +++ b/ui-v2/app/routes/dc/nodes/index.js @@ -12,8 +12,10 @@ export default Route.extend({ }, }, model: function(params) { + const dc = this.modelFor('dc').dc.Name; return hash({ - items: get(this, 'repo').findAllByDatacenter(this.modelFor('dc').dc.Name), + items: get(this, 'repo').findAllByDatacenter(dc), + leader: get(this, 'repo').findByLeader(dc), }); }, setupController: function(controller, model) { diff --git a/ui-v2/app/routes/settings.js b/ui-v2/app/routes/settings.js index d62cb6b9c8..567f5040cb 100644 --- a/ui-v2/app/routes/settings.js +++ b/ui-v2/app/routes/settings.js @@ -1,7 +1,7 @@ import Route from '@ember/routing/route'; import { inject as service } from '@ember/service'; import { hash } from 'rsvp'; -import { get } from '@ember/object'; +import { get, set } from '@ember/object'; export default Route.extend({ client: service('client/http'), @@ -12,6 +12,9 @@ export default Route.extend({ item: get(this, 'repo').findAll(), dcs: get(this, 'dcRepo').findAll(), }).then(model => { + if (typeof get(model.item, 'client.blocking') === 'undefined') { + set(model, 'item.client', { blocking: true }); + } return hash({ ...model, ...{ diff --git a/ui-v2/app/search/filters/service/node.js b/ui-v2/app/search/filters/service/node.js index 5f12724218..b156254655 100644 --- a/ui-v2/app/search/filters/service/node.js +++ b/ui-v2/app/search/filters/service/node.js @@ -8,7 +8,8 @@ export default function(filterable) { .indexOf(term) !== -1 || get(item, 'Service.ID') .toLowerCase() - .indexOf(term) !== -1 + .indexOf(term) !== -1 || + `${get(item, 'Service.Address')}:${get(item, 'Service.Port')}`.indexOf(term) !== -1 ); }); } diff --git a/ui-v2/app/serializers/application.js b/ui-v2/app/serializers/application.js index defe01efe8..45a614f9e6 100644 --- a/ui-v2/app/serializers/application.js +++ b/ui-v2/app/serializers/application.js @@ -1,6 +1,6 @@ import Serializer from 'ember-data/serializers/rest'; -import { get } from '@ember/object'; +import { set } from '@ember/object'; import { HEADERS_SYMBOL as HTTP_HEADERS_SYMBOL, HEADERS_INDEX as HTTP_HEADERS_INDEX, @@ -44,14 +44,17 @@ export default Serializer.extend({ requestType ); }, + timestamp: function() { + return new Date().getTime(); + }, normalizeMeta: function(store, primaryModelClass, headers, payload, id, requestType) { const meta = { cursor: headers[HTTP_HEADERS_INDEX], - date: headers['date'], }; if (requestType === 'query') { - meta.ids = payload.map(item => { - return get(item, this.primaryKey); + meta.date = this.timestamp(); + payload.forEach(function(item) { + set(item, 'SyncTime', meta.date); }); } return meta; diff --git a/ui-v2/app/services/clipboard/local-storage.js b/ui-v2/app/services/clipboard/local-storage.js index 9f72e4d7ec..d7464064a7 100644 --- a/ui-v2/app/services/clipboard/local-storage.js +++ b/ui-v2/app/services/clipboard/local-storage.js @@ -1,7 +1,7 @@ import Service from '@ember/service'; import { get } from '@ember/object'; -import Clipboard from 'npm:clipboard'; +import Clipboard from 'clipboard'; class ClipboardCallback extends Clipboard { constructor(trigger, cb) { diff --git a/ui-v2/app/services/clipboard/os.js b/ui-v2/app/services/clipboard/os.js index 0aee0bfe11..e51f37007f 100644 --- a/ui-v2/app/services/clipboard/os.js +++ b/ui-v2/app/services/clipboard/os.js @@ -1,6 +1,6 @@ import Service from '@ember/service'; -import Clipboard from 'npm:clipboard'; +import Clipboard from 'clipboard'; export default Service.extend({ execute: function(trigger) { diff --git a/ui-v2/app/services/repository/node.js b/ui-v2/app/services/repository/node.js index eec4f211d3..70ee56e308 100644 --- a/ui-v2/app/services/repository/node.js +++ b/ui-v2/app/services/repository/node.js @@ -1,9 +1,17 @@ import RepositoryService from 'consul-ui/services/repository'; import { inject as service } from '@ember/service'; +import { get } from '@ember/object'; + const modelName = 'node'; export default RepositoryService.extend({ coordinates: service('repository/coordinate'), getModelName: function() { return modelName; }, + findByLeader: function(dc) { + const query = { + dc: dc, + }; + return get(this, 'store').queryLeader(this.getModelName(), query); + }, }); diff --git a/ui-v2/app/services/repository/type/event-source.js b/ui-v2/app/services/repository/type/event-source.js index 7c4423835e..0ef3dcb0b9 100644 --- a/ui-v2/app/services/repository/type/event-source.js +++ b/ui-v2/app/services/repository/type/event-source.js @@ -6,8 +6,27 @@ import LazyProxyService from 'consul-ui/services/lazy-proxy'; import { cache as createCache, BlockingEventSource } from 'consul-ui/utils/dom/event-source'; const createProxy = function(repo, find, settings, cache, serialize = JSON.stringify) { - // proxied find*..(id, dc) const client = get(this, 'client'); + const store = get(this, 'store'); + // custom createEvent, here used to reconcile the ember-data store for each tick + const createEvent = function(result, configuration) { + const event = { + type: 'message', + data: result, + }; + const meta = get(event.data || {}, 'meta') || {}; + if (typeof meta.date !== 'undefined') { + // unload anything older than our current sync date/time + store.peekAll(repo.getModelName()).forEach(function(item) { + const date = get(item, 'SyncTime'); + if (typeof date !== 'undefined' && date != meta.date) { + store.unloadRecord(item); + } + }); + } + return event; + }; + // proxied find*..(id, dc) return function() { const key = `${repo.getModelName()}.${find}.${serialize([...arguments])}`; const _args = arguments; @@ -46,8 +65,9 @@ const createProxy = function(repo, find, settings, cache, serialize = JSON.strin key: key, type: BlockingEventSource, settings: { - enabled: settings.blocking, + enabled: typeof settings.blocking === 'undefined' || settings.blocking, }, + createEvent: createEvent, } ); }; diff --git a/ui-v2/app/services/store.js b/ui-v2/app/services/store.js index 640e1b7d13..081508e9a3 100644 --- a/ui-v2/app/services/store.js +++ b/ui-v2/app/services/store.js @@ -23,4 +23,9 @@ export default Store.extend({ const adapter = this.adapterFor(modelName); return adapter.self(this, { modelName: modelName }, token); }, + queryLeader: function(modelName, query) { + // TODO: no normalization, type it properly for the moment + const adapter = this.adapterFor(modelName); + return adapter.queryLeader(this, { modelName: modelName }, null, query); + }, }); diff --git a/ui-v2/app/styles/base/color/frame-placeholders.scss b/ui-v2/app/styles/base/color/frame-placeholders.scss index fa1aa302a4..d31afd33bc 100644 --- a/ui-v2/app/styles/base/color/frame-placeholders.scss +++ b/ui-v2/app/styles/base/color/frame-placeholders.scss @@ -83,12 +83,24 @@ background-color: $yellow-050; border-color: $color-warning; } +%frame-yellow-800 { + @extend %frame-border-000; + background-color: $yellow-500; + border-color: $yellow-800; + color: $white; +} %frame-green-500 { @extend %frame-border-000; background-color: $green-050; border-color: $green-500; color: $green-500; } +%frame-green-800 { + @extend %frame-border-000; + background-color: $green-500; + border-color: $green-800; + color: $white; +} %frame-blue-500 { @extend %frame-border-000; background-color: $blue-050; @@ -143,6 +155,12 @@ border-color: $red-800; color: $white; } +%frame-red-800 { + @extend %frame-border-000; + background-color: $red-500; + border-color: $red-800; + color: $white; +} %frame-red-900 { @extend %frame-border-000; background-color: $red-700; @@ -155,3 +173,69 @@ border-color: $magenta-600; color: $magenta-600; } +%frame-magenta-800 { + @extend %frame-border-000; + background-color: $magenta-500; + border-color: $magenta-800; + color: $white; +} +%frame-steel-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $steel-600; + color: $steel-600; +} +%frame-steel-800 { + @extend %frame-border-000; + background-color: $steel-500; + border-color: $steel-800; + color: $white; +} +%frame-cobalt-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $cobalt-600; + color: $cobalt-600; +} +%frame-cobalt-800 { + @extend %frame-border-000; + background-color: $cobalt-500; + border-color: $cobalt-800; + color: $white; +} +%frame-indigo-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $indigo-600; + color: $indigo-600; +} +%frame-indigo-800 { + @extend %frame-border-000; + background-color: $indigo-500; + border-color: $indigo-800; + color: $white; +} +%frame-teal-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $teal-600; + color: $teal-600; +} +%frame-teal-800 { + @extend %frame-border-000; + background-color: $teal-500; + border-color: $teal-800; + color: $white; +} +%frame-cyan-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $cyan-600; + color: $cyan-600; +} +%frame-cyan-800 { + @extend %frame-border-000; + background-color: $cyan-500; + border-color: $cyan-800; + color: $white; +} diff --git a/ui-v2/app/styles/base/components/action-group/index.scss b/ui-v2/app/styles/base/components/action-group/index.scss new file mode 100644 index 0000000000..8f8357d067 --- /dev/null +++ b/ui-v2/app/styles/base/components/action-group/index.scss @@ -0,0 +1,7 @@ +@import '../toggle-button/index'; +@import './skin'; +@import './layout'; + +%action-group label:first-of-type { + @extend %toggle-button; +} diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/base/components/action-group/layout.scss similarity index 82% rename from ui-v2/app/styles/components/action-group/layout.scss rename to ui-v2/app/styles/base/components/action-group/layout.scss index 6c51241feb..44cab04720 100644 --- a/ui-v2/app/styles/components/action-group/layout.scss +++ b/ui-v2/app/styles/base/components/action-group/layout.scss @@ -1,20 +1,11 @@ -%action-group label span { - display: none; -} -%action-group-action { - width: 170px; - padding: 10px 10px; - text-align: left; -} -%action-group li > * { - @extend %action-group-action; -} %action-group { + display: inline-block; + position: relative; width: 30px; height: 30px; - position: absolute; - top: 8px; - right: 15px; +} +%action-group label span { + display: none; } %action-group label { display: block; @@ -26,29 +17,47 @@ z-index: -1; top: 0; } +%action-group-action { + width: 170px; + padding: 10px 10px; + text-align: left; +} /* this is actually the group */ %action-group ul { position: absolute; - right: 0px; padding: 1px; } +%action-group li > * { + @extend %action-group-action; +} %action-group ul::before { position: absolute; - right: 9px; content: ''; display: block; width: 10px; height: 10px; } +%action-group ul:not(.left) { + right: 0px; +} +%action-group ul:not(.left)::before { + right: 9px; +} +%action-group ul.left { + left: 0px; +} +%action-group ul.left::before { + left: 9px; +} %action-group ul:not(.above) { - top: 35px; + top: 23px; } %action-group ul:not(.above)::before { top: -6px; transform: rotate(45deg); } %action-group ul.above { - bottom: 35px; + bottom: 23px; } %action-group ul.above::before { bottom: -6px; @@ -67,6 +76,7 @@ %action-group input[type='radio']:checked ~ .with-confirmation > ul { display: block; } +/*TODO: If anything this is %toggle-button*/ %action-group input[type='radio']:checked ~ label[for='actions_close'] { z-index: 1; } diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/base/components/action-group/skin.scss similarity index 82% rename from ui-v2/app/styles/components/action-group/skin.scss rename to ui-v2/app/styles/base/components/action-group/skin.scss index 344fa9319c..d9ffcfb222 100644 --- a/ui-v2/app/styles/components/action-group/skin.scss +++ b/ui-v2/app/styles/base/components/action-group/skin.scss @@ -1,6 +1,3 @@ -%action-group label:first-of-type { - @extend %toggle-button; -} %action-group input[type='radio']:checked + label:first-of-type { /* frame-gray */ background-color: $gray-050; @@ -10,12 +7,13 @@ cursor: pointer; } %action-group label:first-of-type::after { - @extend %with-more-horizontal-icon, %as-pseudo; + @extend %with-more-horizontal-icon; + @extend %as-pseudo; opacity: 0.7; } %action-group ul { border: $decor-border-100; - border-radius: $radius-small; + border-radius: $decor-radius-100; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); } %action-group ul::before { @@ -36,3 +34,6 @@ %action-group ul::before { background-color: $white; } +%action-group li { + list-style-type: none; +} diff --git a/ui-v2/app/styles/base/components/anchors/index.scss b/ui-v2/app/styles/base/components/anchors/index.scss new file mode 100644 index 0000000000..eb8b9d1b26 --- /dev/null +++ b/ui-v2/app/styles/base/components/anchors/index.scss @@ -0,0 +1,29 @@ +%anchor-decoration, +%anchor-decoration-active { + text-decoration: none; +} +%anchor-decoration-intent { + text-decoration: underline; +} +%anchor, +%anchor-intent, +%anchor-active { + color: $color-action; +} +%anchor-decoration:hover, +%anchor-decoration:focus { + @extend %anchor-decoration-intent; +} +%anchor-decoration:active { + @extend %anchor-decoration-active; +} +%anchor { + @extend %anchor-decoration; +} +%anchor:hover, +%anchor:focus { + @extend %anchor-intent; +} +%anchor:active { + @extend %anchor-active; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss new file mode 100644 index 0000000000..074420f1da --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss @@ -0,0 +1,8 @@ +@import './skin'; +@import './layout'; +%breadcrumbs li > * { + @extend %breadcrumb; +} +%breadcrumbs strong { + @extend %breadcrumb-selected; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss new file mode 100644 index 0000000000..1b3faf25cf --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss @@ -0,0 +1,11 @@ +%breadcrumbs { + display: inline-flex; +} +%breadcrumbs li > * { + display: inline-flex; + align-items: center; +} +%breadcrumbs li > *::before, +%breadcrumbs li { + margin-right: 0.5em; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss new file mode 100644 index 0000000000..853da9dedf --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss @@ -0,0 +1,21 @@ +%breadcrumbs li { + list-style-type: none; +} +%breadcrumb::before { + content: '❮'; + line-height: 1; + font-size: 0.7em; + margin-top: 0.1em; +} +%breadcrumb { + color: $color-action; +} +%breadcrumb-selected { + color: $gray-400; +} +%breadcrumb::before { + color: rgba($color-action, 0.5); +} +%breadcrumb-selected::before { + color: $gray-300; +} diff --git a/ui-v2/app/styles/components/action-group/index.scss b/ui-v2/app/styles/base/components/buttons/index.scss similarity index 100% rename from ui-v2/app/styles/components/action-group/index.scss rename to ui-v2/app/styles/base/components/buttons/index.scss diff --git a/ui-v2/app/styles/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss similarity index 97% rename from ui-v2/app/styles/components/buttons/layout.scss rename to ui-v2/app/styles/base/components/buttons/layout.scss index 249ef1c502..33c64218cf 100644 --- a/ui-v2/app/styles/components/buttons/layout.scss +++ b/ui-v2/app/styles/base/components/buttons/layout.scss @@ -32,7 +32,7 @@ margin-right: 8px; } %button-compact { - // @extend %button; + /* @extend %button;*/ padding-left: calc(1.6em - 1px) !important; padding-right: calc(1.6em - 1px) !important; padding-top: calc(0.35em - 1px) !important; diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss similarity index 89% rename from ui-v2/app/styles/components/buttons/skin.scss rename to ui-v2/app/styles/base/components/buttons/skin.scss index 0ba5ebcd34..5c506b6f93 100644 --- a/ui-v2/app/styles/components/buttons/skin.scss +++ b/ui-v2/app/styles/base/components/buttons/skin.scss @@ -9,9 +9,17 @@ box-shadow: none; } %copy-button { - @extend %button, %with-clipboard; + @extend %button; min-height: 17px; } +%copy-button::before { + @extend %with-copy-action-icon; + @extend %as-pseudo; + width: 16px; + height: 16px; + position: absolute; + left: 12px; +} %copy-button:not(:empty) { padding-left: 38px !important; } @@ -20,7 +28,7 @@ %dangerous-button { @extend %button; border-width: 1px; - border-radius: $radius-small; + border-radius: $decor-radius-100; box-shadow: 0 3px 1px 0 rgba($black, 0.12); } /* color */ diff --git a/ui-v2/app/styles/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/notice/index.scss similarity index 100% rename from ui-v2/app/styles/components/breadcrumbs/index.scss rename to ui-v2/app/styles/base/components/notice/index.scss diff --git a/ui-v2/app/styles/base/components/notice/layout.scss b/ui-v2/app/styles/base/components/notice/layout.scss new file mode 100644 index 0000000000..be21421b7f --- /dev/null +++ b/ui-v2/app/styles/base/components/notice/layout.scss @@ -0,0 +1,13 @@ +%notice { + position: relative; + padding: 1em; +} +/* this is probably skin */ +%notice { + padding-left: calc(1em + 32px); +} +%notice::before { + position: absolute; + left: 16px; + top: 16px; +} diff --git a/ui-v2/app/styles/base/components/notice/skin.scss b/ui-v2/app/styles/base/components/notice/skin.scss new file mode 100644 index 0000000000..53ce949f68 --- /dev/null +++ b/ui-v2/app/styles/base/components/notice/skin.scss @@ -0,0 +1,29 @@ +%notice { + border-radius: $decor-radius-100; + border-width: 1px; +} +%notice-success, +%notice-info, +%notice-highlight, +%notice-error, +%notice-warning { + @extend %notice; +} +%notice::before { + @extend %as-pseudo; +} +%notice-success { + @extend %frame-green-500; +} +%notice-info { + @extend %frame-blue-500; +} +%notice-highlight { + @extend %frame-gray-800; +} +%notice-warning { + @extend %frame-yellow-500; +} +%notice-error { + @extend %frame-red-500; +} diff --git a/ui-v2/app/styles/components/buttons/index.scss b/ui-v2/app/styles/base/components/pill/index.scss similarity index 100% rename from ui-v2/app/styles/components/buttons/index.scss rename to ui-v2/app/styles/base/components/pill/index.scss diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss new file mode 100644 index 0000000000..95b1e132ea --- /dev/null +++ b/ui-v2/app/styles/base/components/pill/layout.scss @@ -0,0 +1,12 @@ +%pill { + display: inline-flex; + align-items: center; + padding: 1px 5px; + position: relative; +} +%pill button { + padding: 0; + height: 10px; + margin-right: 3px; + font-size: 0; +} diff --git a/ui-v2/app/styles/base/components/pill/skin.scss b/ui-v2/app/styles/base/components/pill/skin.scss new file mode 100644 index 0000000000..e238b47d60 --- /dev/null +++ b/ui-v2/app/styles/base/components/pill/skin.scss @@ -0,0 +1,14 @@ +%pill { + border-radius: $decor-radius-100; +} +%pill button { + background-color: $transparent; + /* font-size: 0; */ + cursor: pointer; +} +%pill button::before { + @extend %with-cancel-plain-icon; + @extend %as-pseudo; + width: 10px; + height: 10px; +} diff --git a/ui-v2/app/styles/base/components/sort-control/index.scss b/ui-v2/app/styles/base/components/sort-control/index.scss new file mode 100644 index 0000000000..0650ebf9ba --- /dev/null +++ b/ui-v2/app/styles/base/components/sort-control/index.scss @@ -0,0 +1 @@ +@import './skin'; diff --git a/ui-v2/app/styles/base/components/sort-control/skin.scss b/ui-v2/app/styles/base/components/sort-control/skin.scss new file mode 100644 index 0000000000..4b9f1e6bff --- /dev/null +++ b/ui-v2/app/styles/base/components/sort-control/skin.scss @@ -0,0 +1,17 @@ +%sort-control input { + display: none; +} +%sort-control label { + @extend %user-select-none; + cursor: pointer; +} +%sort-control input[type='checkbox'] + label::after { + @extend %as-pseudo; + opacity: 0.7; +} +%sort-control input[type='checkbox'] + label::after { + @extend %with-arrow-down-icon; +} +%sort-control input[type='checkbox']:checked + label::after { + @extend %with-arrow-up-icon; +} diff --git a/ui-v2/app/styles/components/healthchecked-resource/index.scss b/ui-v2/app/styles/base/components/stats-card/index.scss similarity index 100% rename from ui-v2/app/styles/components/healthchecked-resource/index.scss rename to ui-v2/app/styles/base/components/stats-card/index.scss diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss new file mode 100644 index 0000000000..a6aed4fa28 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/layout.scss @@ -0,0 +1,54 @@ +/*%stats-card li:not(:last-child) span {*/ +%stats-card { + position: relative; +} +%stats-card header a, +%stats-card header a > * { + display: block; +} +%stats-card header a > *, +%stats-card li a > :last-child { + /* TODO: %truncate */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +%stats-card header a { + padding: 12px 15px; +} +%stats-card header > :not(a) { + @extend %stats-card-icon; +} +%stats-card-icon { + display: inline-flex; + align-items: center; +} +%stats-card-icon:last-child { + position: absolute; + background-size: 16px; + background-position: 5px 5px; + font-size: 1.5em; + width: 28px; + height: 28px; + top: calc(-28px / 2); + left: 15px; + font-size: 0; +} +%stats-card-icon:first-child { + float: right; + padding-left: 30px; + height: 16px; + margin-top: 15px; + margin-right: 15px; +} + +%stats-card li { + height: 33px; +} +%stats-card li a { + display: flex; + vertical-align: text-top; + align-items: center; + padding: 0 15px 0 12px; + height: 100%; +} diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss new file mode 100644 index 0000000000..4e9a908a22 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/skin.scss @@ -0,0 +1,31 @@ +%stats-card { + border: $decor-border-100; + border-radius: $decor-radius-100; +} +%stats-card li { + border-top: $decor-border-100; +} +%stats-card, +%stats-card li { + border-color: $gray-200; +} +%stats-card, +%stats-card header::before { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); +} +%stats-card:hover, +%stats-card:focus { + box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); +} +%stats-card header > :not(a):last-child { + border: $decor-border-100; + border-radius: 100%; + border-color: $gray-200; + background-color: $white; +} +%stats-card ul { + /*TODO: %list-style-none?*/ + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/ui-v2/app/styles/components/notice/index.scss b/ui-v2/app/styles/base/components/table/index.scss similarity index 100% rename from ui-v2/app/styles/components/notice/index.scss rename to ui-v2/app/styles/base/components/table/index.scss diff --git a/ui-v2/app/styles/base/components/table/layout.scss b/ui-v2/app/styles/base/components/table/layout.scss new file mode 100644 index 0000000000..41c3cdb984 --- /dev/null +++ b/ui-v2/app/styles/base/components/table/layout.scss @@ -0,0 +1,52 @@ +%table { + width: 100%; + border-collapse: collapse; +} +%table-flex tr { + display: flex; +} +%table-flex tr > * { + flex: 1 1 auto; + display: inline-flex; + align-items: center; +} +%table caption, +%table thead th { + text-align: left; +} +%table-actions { + width: 60px !important; +} +%table th.actions input { + display: none; +} +%table th.actions { + text-align: right; +} +%table td a { + display: block; +} +%table td:not(.actions), +%table td:not(.actions) > *:only-child { + overflow-x: hidden; +} +%table td:not(.actions) > * { + white-space: nowrap; +} +%table td:not(.actions) > *:only-child { + text-overflow: ellipsis; +} +%table td { + height: 50px; +} +%table caption { + margin-bottom: 0.8em; +} +%table th { + padding-bottom: 0.6em; +} +%table th:not(.actions), +%table td:not(.actions), +%table td a { + padding-right: 0.9em; +} diff --git a/ui-v2/app/styles/base/components/table/skin.scss b/ui-v2/app/styles/base/components/table/skin.scss new file mode 100644 index 0000000000..99e5c49b95 --- /dev/null +++ b/ui-v2/app/styles/base/components/table/skin.scss @@ -0,0 +1,24 @@ +%table th, +%table td { + border-bottom: $decor-border-100; +} +%table th { + border-color: $gray-300; +} +%table td { + border-color: $gray-200; + color: $gray-500; +} +%table th, +%table td strong { + color: $gray-600; +} +/* TODO: Add to native selector `tbody th` - will involve moving all + * current th's to `thead th` and changing the templates + */ +%tbody-th { + color: $gray-900; +} +%table td:first-child { + @extend %tbody-th; +} diff --git a/ui-v2/app/styles/base/components/tabs/index.scss b/ui-v2/app/styles/base/components/tabs/index.scss new file mode 100644 index 0000000000..cfb5d586ca --- /dev/null +++ b/ui-v2/app/styles/base/components/tabs/index.scss @@ -0,0 +1,26 @@ +@import './skin'; +@import './layout'; +%tab-nav li a { + @extend %tab-button; +} +%tab-nav li:not(.selected) a:hover, +%tab-nav li:not(.selected) a:focus { + @extend %tab-button-intent; +} +%tab-nav li:not(.selected) a:active { + @extend %tab-button-active; +} +/* TODO: need to add an empty class here */ +%tab-nav .selected a { + @extend %tab-button-selected; +} +%display-state, +%display-state + * { + display: none; +} +%display-state:checked + * { + display: block; +} +%tab-section > input[type='radio'] { + @extend %display-state; +} diff --git a/ui-v2/app/styles/base/components/tabs/layout.scss b/ui-v2/app/styles/base/components/tabs/layout.scss new file mode 100644 index 0000000000..36df93be92 --- /dev/null +++ b/ui-v2/app/styles/base/components/tabs/layout.scss @@ -0,0 +1,18 @@ +%tab-nav { + clear: both; +} +%tab-nav ul { + padding: 0; + margin: 0; + display: inline-flex; + align-items: center; +} +%tab-button { + padding-left: 16px; + padding-right: 16px; +} +%tab-button { + display: inline-block; + padding-top: 13px; + padding-bottom: 13px; +} diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/base/components/tabs/skin.scss similarity index 68% rename from ui-v2/app/styles/components/tabs/skin.scss rename to ui-v2/app/styles/base/components/tabs/skin.scss index 1538bcf0d8..1f98e69188 100644 --- a/ui-v2/app/styles/components/tabs/skin.scss +++ b/ui-v2/app/styles/base/components/tabs/skin.scss @@ -7,26 +7,26 @@ /* %frame-gray-something */ border-color: $gray-200; } +%tab-nav ul { + list-style-type: none; +} %tab-nav label { cursor: pointer; } -%tab-nav a { +%tab-button { white-space: nowrap; + text-decoration: none; } -%tab-nav a { +%tab-button { border-bottom: $decor-border-200; } -%tab-nav a { +%tab-button { border-color: $color-transparent; color: $gray-500; } -%tab-nav li:not(.selected) a:hover, -%tab-nav li:not(.selected) a:focus, -%tab-nav li:not(.selected) a:active { +%tab-button-intent, +%tab-button-active { /* %frame-gray-something */ border-color: $color-transparent; background-color: $gray-100; } -%tab-nav .selected a { - @extend %frame-magenta-300; -} diff --git a/ui-v2/app/styles/components/pill/index.scss b/ui-v2/app/styles/base/components/toggle-button/index.scss similarity index 100% rename from ui-v2/app/styles/components/pill/index.scss rename to ui-v2/app/styles/base/components/toggle-button/index.scss diff --git a/ui-v2/app/styles/base/components/toggle-button/layout.scss b/ui-v2/app/styles/base/components/toggle-button/layout.scss new file mode 100644 index 0000000000..6e36aa2b3d --- /dev/null +++ b/ui-v2/app/styles/base/components/toggle-button/layout.scss @@ -0,0 +1,9 @@ +/* TODO: This should be merged with ghost-button*/ +%toggle-button { + min-width: 30px; + min-height: 30px; + /* center */ + display: inline-flex; + align-items: center; + justify-content: center; +} diff --git a/ui-v2/app/styles/components/toggle-button/skin.scss b/ui-v2/app/styles/base/components/toggle-button/skin.scss similarity index 52% rename from ui-v2/app/styles/components/toggle-button/skin.scss rename to ui-v2/app/styles/base/components/toggle-button/skin.scss index bc993a5566..d85580d364 100644 --- a/ui-v2/app/styles/components/toggle-button/skin.scss +++ b/ui-v2/app/styles/base/components/toggle-button/skin.scss @@ -1,11 +1,17 @@ %toggle-button { - border-radius: $radius-small; + border-radius: $decor-radius-100; cursor: pointer; } +%toggle-button-intent { + background-color: $gray-050; +} +%toggle-button-active { + background-color: $gray-100; +} %toggle-button:hover, %toggle-button:focus { - background-color: $gray-050; + @extend %toggle-button-intent; } %toggle-button:active { - background-color: $gray-100; + @extend %toggle-button-active; } diff --git a/ui-v2/app/styles/base/components/tooltip/index.scss b/ui-v2/app/styles/base/components/tooltip/index.scss new file mode 100644 index 0000000000..5ecc1283e8 --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/index.scss @@ -0,0 +1,32 @@ +@import './skin'; +@import './layout'; + +%with-pseudo-tooltip, +%with-tooltip { + @extend %tooltip; +} +%with-pseudo-tooltip::before, +%with-tooltip [role='tooltip'] { + @extend %tooltip-bubble; +} +%with-pseudo-tooltip::after, +%with-tooltip [role='tooltip']::after { + @extend %tooltip-tail; +} + +%with-pseudo-tooltip::after, +%with-pseudo-tooltip::before, +%with-tooltip [role='tooltip']::after, +%with-tooltip [role='tooltip'] { + @extend %blink-in-fade-out; +} +%with-pseudo-tooltip:hover::after, +%with-pseudo-tooltip:hover::before, +%with-pseudo-tooltip:focus::after, +%with-pseudo-tooltip:focus::before, +%with-tooltip:hover [role='tooltip']::after, +%with-tooltip:hover [role='tooltip'], +%with-tooltip:focus [role='tooltip']::after, +%with-tooltip:focus [role='tooltip'] { + @extend %blink-in-fade-out-active; +} diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss new file mode 100644 index 0000000000..33c7d91b87 --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/layout.scss @@ -0,0 +1,48 @@ +%tooltip { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: text-top; +} +%tooltip-bubble, +%tooltip-tail { + position: absolute; + z-index: 1; +} +%tooltip-bubble { + padding: 12px; + white-space: nowrap; + content: attr(data-tooltip); + text-indent: 0; + /* TODO: should this be hardcoded here ? */ + font-size: 14px; + /* structure */ + min-width: 192px; +} +%tooltip-bubble { + /* TODO: structure says left aligned, check this is correct */ + text-align: center; +} + +%tooltip-tail { + content: ''; + transform: scale(1, 0.5); + width: 0; + height: 0; +} +/* TODO: positioning */ +%tooltip-bubble { + bottom: calc(100% + 5px); +} +%tooltip-tail { + left: 50%; + margin-left: -9px; + bottom: -13px; +} +/* TODO: Try and use the same vertical positioning all tooltips */ +/* this is only for pseudo tooltips be want to avoid */ +/* specifiying pseudo in this file */ +%tooltip::after { + bottom: calc(100% - 7px); +} diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss new file mode 100644 index 0000000000..04c19a939e --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/skin.scss @@ -0,0 +1,19 @@ +%tooltip-bubble, +%tooltip-tail { + color: $white; + background-color: $gray-500; +} +%tooltip-tail { + background-color: transparent !important; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 18px solid $gray-500; +} +%tooltip-bubble { + font-weight: normal; + border-radius: $decor-radius-200; + /* this isn't quite like the values in structure */ + /* but this looks closer visually */ + /* TODO: try and get this closer to structure */ + box-shadow: 0 2px 5px 0 rgba($black, 0.31); +} diff --git a/ui-v2/app/styles/base/icons/base-placeholders.scss b/ui-v2/app/styles/base/icons/base-placeholders.scss index 6e49492576..0d873f2e59 100644 --- a/ui-v2/app/styles/base/icons/base-placeholders.scss +++ b/ui-v2/app/styles/base/icons/base-placeholders.scss @@ -10,4 +10,4 @@ width: 1.2em; height: 1.2em; vertical-align: text-top; -} \ No newline at end of file +} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 1be5ffae1b..0c1186120f 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -1,99 +1,110 @@ -$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); $chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); $chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$code-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$code-svg: url('data:image/svg+xml;charset=UTF-8,'); $consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); -$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$download-svg: url('data:image/svg+xml;charset=UTF-8,'); -$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$exit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); -$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); +$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); +$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$deny-svg: url('data:image/svg+xml;charset=UTF-8,'); +$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$docs-svg: url('data:image/svg+xml;charset=UTF-8,'); +$download-svg: url('data:image/svg+xml;charset=UTF-8,'); +$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$exit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); $eye-svg: url('data:image/svg+xml;charset=UTF-8,'); -$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$filter-svg: url('data:image/svg+xml;charset=UTF-8,'); -$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); +$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$filter-svg: url('data:image/svg+xml;charset=UTF-8,'); +$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); $hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$history-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$history-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$link-svg: url('data:image/svg+xml;charset=UTF-8,'); +$learn-svg: url('data:image/svg+xml;charset=UTF-8,'); +$link-svg: url('data:image/svg+xml;charset=UTF-8,'); $loading-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); -$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); +$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); $nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); -$refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); +$refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); $run-svg: url('data:image/svg+xml;charset=UTF-8,'); -$search-svg: url('data:image/svg+xml;charset=UTF-8,'); +$search-svg: url('data:image/svg+xml;charset=UTF-8,'); +$search-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); -$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $star-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); $terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,'); -$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); -$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,'); +$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index f6d41b9308..b7bc145c29 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -8,6 +8,11 @@ background-image: $alert-circle-outline-svg; } +%with-alert-triangle-color-icon { + @extend %with-icon; + background-image: $alert-triangle-color-svg; +} + %with-alert-triangle-icon { @extend %with-icon; background-image: $alert-triangle-svg; @@ -23,6 +28,11 @@ background-image: $arrow-left-svg; } +%with-arrow-right-color-icon { + @extend %with-icon; + background-image: $arrow-right-color-svg; +} + %with-arrow-right-icon { @extend %with-icon; background-image: $arrow-right-svg; @@ -53,6 +63,11 @@ background-image: $cancel-plain-svg; } +%with-cancel-square-fill-color-icon { + @extend %with-icon; + background-image: $cancel-square-fill-color-svg; +} + %with-cancel-square-fill-icon { @extend %with-icon; background-image: $cancel-square-fill-svg; @@ -73,6 +88,11 @@ background-image: $caret-up-svg; } +%with-check-circle-fill-color-icon { + @extend %with-icon; + background-image: $check-circle-fill-color-svg; +} + %with-check-circle-fill-icon { @extend %with-icon; background-image: $check-circle-fill-svg; @@ -148,11 +168,26 @@ background-image: $copy-success-svg; } +%with-deny-color-icon { + @extend %with-icon; + background-image: $deny-color-svg; +} + +%with-deny-icon { + @extend %with-icon; + background-image: $deny-svg; +} + %with-disabled-icon { @extend %with-icon; background-image: $disabled-svg; } +%with-docs-icon { + @extend %with-icon; + background-image: $docs-svg; +} + %with-download-icon { @extend %with-icon; background-image: $download-svg; @@ -248,6 +283,11 @@ background-image: $history-svg; } +%with-info-circle-fill-color-icon { + @extend %with-icon; + background-image: $info-circle-fill-color-svg; +} + %with-info-circle-fill-icon { @extend %with-icon; background-image: $info-circle-fill-svg; @@ -263,6 +303,11 @@ background-image: $kubernetes-logo-color-svg; } +%with-learn-icon { + @extend %with-icon; + background-image: $learn-svg; +} + %with-link-icon { @extend %with-icon; background-image: $link-svg; @@ -308,6 +353,11 @@ background-image: $minus-plain-svg; } +%with-minus-square-fill-color-icon { + @extend %with-icon; + background-image: $minus-square-fill-color-svg; +} + %with-minus-square-fill-icon { @extend %with-icon; background-image: $minus-square-fill-svg; @@ -372,6 +422,10 @@ @extend %with-icon; background-image: $search-svg; } +%with-search-color-icon { + @extend %with-icon; + background-image: $search-color-svg; +} %with-service-identity-icon { @extend %with-icon; diff --git a/ui-v2/app/styles/base/typography/base-placeholders.scss b/ui-v2/app/styles/base/typography/base-placeholders.scss new file mode 100644 index 0000000000..f153f07b4c --- /dev/null +++ b/ui-v2/app/styles/base/typography/base-placeholders.scss @@ -0,0 +1,51 @@ +%typo-body { + font-size: $typo-size-600; + font-family: $typo-family-sans; + line-height: $typo-lead-700; +} +%typo-header { + line-height: $typo-lead-200; +} +%h1, +%h2, +%h3, +%h4, +%h5, +%h6 { + @extend %typo-header; +} +%h1 { + font-weight: $typo-weight-bold; +} +%h2, +%h3 { + font-weight: $typo-weight-semibold; +} +%h1 { + font-size: $typo-size-100; +} +%h2 { + font-size: $typo-size-200; +} +%h3 { + font-size: $typo-size-300; +} +%typo-p { + line-height: inherit; + font-size: inherit; +} +%p, +%p1, +%p2, +%p3 { + @extend %typo-p; +} +%p1 { + font-size: $typo-size-600; +} +%p2 { + font-size: $typo-size-700; +} +%p3 { + font-size: $typo-size-800; +} diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss index 1d7b7ad13f..b0fbdc8d44 100644 --- a/ui-v2/app/styles/base/typography/base-variables.scss +++ b/ui-v2/app/styles/base/typography/base-variables.scss @@ -16,7 +16,7 @@ $typo-weight-medium: 500; $typo-weight-semibold: 600; $typo-weight-bold: 700; $typo-lead-000: 0; -$type-lead-050: 1; +$typo-lead-050: 1; $typo-lead-100: 1.2; $typo-lead-200: 1.25; $typo-lead-300: 1.28; diff --git a/ui-v2/app/styles/base/typography/index.scss b/ui-v2/app/styles/base/typography/index.scss index 6da895b1bf..7dc7ac5a75 100644 --- a/ui-v2/app/styles/base/typography/index.scss +++ b/ui-v2/app/styles/base/typography/index.scss @@ -1,2 +1,3 @@ @import './base-variables'; @import './semantic-variables'; +@import './base-placeholders'; diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss index 49aec84eb9..93c2a53d38 100644 --- a/ui-v2/app/styles/components/action-group.scss +++ b/ui-v2/app/styles/components/action-group.scss @@ -1,4 +1,16 @@ -@import './action-group/index'; +@import '../base/components/action-group/index'; .action-group { @extend %action-group; } +/* This needs to go into table */ +%action-group { + position: absolute; + top: 8px; + right: 15px; +} +%action-group ul.above { + bottom: 35px; +} +%action-group ul:not(.above) { + top: 35px; +} diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss index ad56af1bfc..ae0f360345 100644 --- a/ui-v2/app/styles/components/anchors.scss +++ b/ui-v2/app/styles/components/anchors.scss @@ -1,4 +1,5 @@ -@import './anchors/index'; +@import '../base/components/anchors/index'; +// TODO: This should go, its for links in tables/action-groups %main-content a { color: $gray-900; } diff --git a/ui-v2/app/styles/components/anchors/index.scss b/ui-v2/app/styles/components/anchors/index.scss deleted file mode 100644 index 9cd1c30b9d..0000000000 --- a/ui-v2/app/styles/components/anchors/index.scss +++ /dev/null @@ -1,10 +0,0 @@ -%anchor:hover, -%anchor:focus { - text-decoration: underline; -} -%anchor, -%anchor:hover, -%anchor:focus, -%anchor:active { - color: $color-action; -} diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 359583699a..9d6403b5c4 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -1,6 +1,6 @@ @import './app-view/index'; @import './filter-bar/index'; -@import './buttons/index'; +@import '../base/components/buttons/index'; main { @extend %app-view; } @@ -18,9 +18,7 @@ main { // TODO: This should be its own component %app-view h1 span[data-tooltip] { @extend %with-external-source-icon; - // TODO: Look to remove this, right now its needed but this - // should automaticaly vertically center - margin-top: 20px; + margin-top: 13px; } %app-view h1 span.kind-proxy { @extend %frame-gray-900; diff --git a/ui-v2/app/styles/components/breadcrumbs.scss b/ui-v2/app/styles/components/breadcrumbs.scss index 56e537ed1e..3ac07023c2 100644 --- a/ui-v2/app/styles/components/breadcrumbs.scss +++ b/ui-v2/app/styles/components/breadcrumbs.scss @@ -1,4 +1,8 @@ -@import './breadcrumbs/index'; +@import '../base/components/breadcrumbs/index'; main header nav:first-child { + position: absolute; + top: -38px; +} +main header nav:first-child ol { @extend %breadcrumbs; } diff --git a/ui-v2/app/styles/components/breadcrumbs/layout.scss b/ui-v2/app/styles/components/breadcrumbs/layout.scss deleted file mode 100644 index 8b13474d80..0000000000 --- a/ui-v2/app/styles/components/breadcrumbs/layout.scss +++ /dev/null @@ -1,10 +0,0 @@ -%breadcrumbs { - position: absolute; - top: -38px; // %app-view:margin-top - 15px; -} -%breadcrumbs ol { - display: flex; -} -%breadcrumbs li { - margin-right: 5px; -} diff --git a/ui-v2/app/styles/components/breadcrumbs/skin.scss b/ui-v2/app/styles/components/breadcrumbs/skin.scss deleted file mode 100644 index fb86355e92..0000000000 --- a/ui-v2/app/styles/components/breadcrumbs/skin.scss +++ /dev/null @@ -1,18 +0,0 @@ -%breadcrumbs li > * { - @extend %with-chevron; -} -%breadcrumbs li > strong::before { - color: $gray-300; -} -%breadcrumbs li > a::before { - color: rgba($color-action, 0.5); -} -%breadcrumbs ol { - list-style-type: none; -} -%breadcrumbs a { - color: $color-action; -} -%breadcrumbs strong { - color: $gray-400; -} diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss index 9047a583db..0e264bef7f 100644 --- a/ui-v2/app/styles/components/buttons.scss +++ b/ui-v2/app/styles/components/buttons.scss @@ -1,4 +1,7 @@ -@import './buttons/index'; +@import '../base/components/buttons/index'; +%copy-button { + @extend %with-clipboard; +} button[type='submit'], a.type-create { @extend %primary-button; diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss index 5d65866dee..5945f6adb9 100644 --- a/ui-v2/app/styles/components/filter-bar.scss +++ b/ui-v2/app/styles/components/filter-bar.scss @@ -1,33 +1,29 @@ @import './filter-bar/index'; @import './expanded-single-select/index'; -@import './icons/index'; .filter-bar { @extend %filter-bar; } %filter-bar [role='radiogroup'] { @extend %expanded-single-select; } -%filter-bar .value-passing span { - @extend %with-passing; +%filter-bar span::before { + margin-right: 9px; + opacity: 0.4; + margin-left: -2px; } -%filter-bar .value-warning span { - @extend %with-warning; + +%filter-bar .value-passing span::before { + @extend %with-check-circle-fill-icon, %as-pseudo; } %filter-bar .value-warning span::before { - @extend %with-warning-icon-grey; + @extend %with-alert-triangle-icon, %as-pseudo; } -%filter-bar .value-allow span { - @extend %with-allow; -} -%filter-bar .value-deny span { - @extend %with-deny; -} -%filter-bar .value-deny span::before { - @extend %with-deny-icon-grey; +%filter-bar .value-critical span::before { + @extend %with-cancel-square-fill-icon, %as-pseudo; } %filter-bar .value-allow span::before { - @extend %with-right-arrow-grey; + @extend %with-arrow-right-icon, %as-pseudo; } -%filter-bar .value-critical span { - @extend %with-critical; +%filter-bar .value-deny span::before { + @extend %with-deny-icon, %as-pseudo; } diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss index d4be8335c6..0b35d64c99 100644 --- a/ui-v2/app/styles/components/filter-bar/layout.scss +++ b/ui-v2/app/styles/components/filter-bar/layout.scss @@ -22,22 +22,3 @@ margin-bottom: 12px; } } -// icons -%filter-bar [role='radiogroup'] label span::before { - left: 11px; - top: 50%; - margin-top: -0.5em; -} -%filter-bar .value-allow span, -%filter-bar .value-deny span, -%filter-bar .value-passing span, -%filter-bar .value-warning span, -%filter-bar .value-critical span { - position: relative; - text-indent: 23px; -} -%filter-bar .value-warning span::after { - left: 0.7em; - top: 50%; - margin-top: -8px; -} diff --git a/ui-v2/app/styles/components/flash-message/layout.scss b/ui-v2/app/styles/components/flash-message/layout.scss index c7dea1fee6..8239a88caf 100644 --- a/ui-v2/app/styles/components/flash-message/layout.scss +++ b/ui-v2/app/styles/components/flash-message/layout.scss @@ -10,12 +10,3 @@ position: absolute; padding: 9px 15px; } -%flash-message p strong { - position: relative; - display: inline-block; - padding-left: 20px; -} -%flash-message p strong::before { - left: 0; - margin-top: -0.5em !important; -} diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss index b06698fed8..3888776bd8 100644 --- a/ui-v2/app/styles/components/flash-message/skin.scss +++ b/ui-v2/app/styles/components/flash-message/skin.scss @@ -2,14 +2,17 @@ border-width: 1px; border-radius: $decor-radius-100; } -%flash-message p.success strong { - @extend %with-passing; +%flash-message p strong::before { + @extend %as-pseudo; } -%flash-message p.warning strong { - @extend %with-warning; +%flash-message p.success strong::before { + @extend %with-check-circle-fill-color-icon; } -%flash-message p.error strong { - @extend %with-critical; +%flash-message p.warning strong::before { + @extend %with-alert-triangle-color-icon; +} +%flash-message p.error strong::before { + @extend %with-cancel-square-fill-color-icon; } %flash-message p.success { @extend %frame-green-500; diff --git a/ui-v2/app/styles/components/freetext-filter.scss b/ui-v2/app/styles/components/freetext-filter.scss index 6f92dd58b6..5b870ed586 100644 --- a/ui-v2/app/styles/components/freetext-filter.scss +++ b/ui-v2/app/styles/components/freetext-filter.scss @@ -4,5 +4,15 @@ @extend %freetext-filter; } %freetext-filter span { - @extend %with-magnifier; + position: relative; +} +%freetext-filter span::before { + @extend %with-search-icon, %as-pseudo; + width: 16px; + height: 16px; + position: absolute; + top: 50%; + left: 50%; + margin-left: -8px !important; + margin-top: -8px !important; } diff --git a/ui-v2/app/styles/components/healthcheck-info.scss b/ui-v2/app/styles/components/healthcheck-info.scss index ff44885a30..3cffc7e460 100644 --- a/ui-v2/app/styles/components/healthcheck-info.scss +++ b/ui-v2/app/styles/components/healthcheck-info.scss @@ -3,9 +3,10 @@ tr .healthcheck-info { @extend %healthcheck-info; } +// TODO: Look at why we can't have the zeros in the healthcheck-info td span.zero { - @extend %with-no-healthchecks; - // TODO: Why isn't this in layout? + @extend %with-minus-square-fill-color-icon; + background-position: left center; display: block; text-indent: 20px; color: $gray-400; diff --git a/ui-v2/app/styles/components/healthcheck-info/layout.scss b/ui-v2/app/styles/components/healthcheck-info/layout.scss index 06b64a930a..a9ec45a422 100644 --- a/ui-v2/app/styles/components/healthcheck-info/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-info/layout.scss @@ -4,22 +4,12 @@ %healthcheck-info > * { display: block; } -%healthcheck-info dt { - text-indent: -9000px; -} %healthcheck-info dt.zero { display: none; } %healthcheck-info dd.zero { visibility: hidden; } -%healthcheck-info dt.warning::before { - top: 7px; -} -%healthcheck-info dt.warning::after { - left: -2px; - top: -1px; -} %healthcheck-info dd { box-sizing: content-box; margin-left: 22px; diff --git a/ui-v2/app/styles/components/healthcheck-info/skin.scss b/ui-v2/app/styles/components/healthcheck-info/skin.scss index 9b22b05f01..5f268ab548 100644 --- a/ui-v2/app/styles/components/healthcheck-info/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-info/skin.scss @@ -1,11 +1,20 @@ -%healthcheck-info dt.passing { - @extend %with-passing; +%healthcheck-info dt { + font-size: 0; } -%healthcheck-info dt.warning { - @extend %with-warning; +%healthcheck-info dt::before { + @extend %as-pseudo; + position: absolute; + width: 18px; + height: 18px; } -%healthcheck-info dt.critical { - @extend %with-critical; +%healthcheck-info dt.passing::before { + @extend %with-check-circle-fill-color-icon; +} +%healthcheck-info dt.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-info dt.critical::before { + @extend %with-cancel-square-fill-color-icon; } %healthcheck-info dt.passing, %healthcheck-info dt.passing + dd { diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss index 96216d6315..6c3ccb5ed3 100644 --- a/ui-v2/app/styles/components/healthcheck-output.scss +++ b/ui-v2/app/styles/components/healthcheck-output.scss @@ -1,35 +1,4 @@ @import './healthcheck-output/index'; -@import './icons/index'; .healthcheck-output { @extend %healthcheck-output; } -%healthcheck-output.passing { - @extend %with-passing; -} -%healthcheck-output.warning { - @extend %with-warning; -} -%healthcheck-output.critical { - @extend %with-critical; -} -@media #{$--lt-spacious-healthcheck-output} { - .healthcheck-output button.copy-btn { - margin-top: -11px; - margin-right: -18px; - padding: 0; - width: 20px; - visibility: hidden; - } - %healthcheck-output { - padding-left: 30px; - padding-top: 10px; - padding-bottom: 15px; - padding-right: 13px; - } - %healthcheck-output::before { - width: 15px !important; - height: 15px !important; - left: 9px; - top: 13px !important; - } -} diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss index 5f1a9403de..629ef0fe9a 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -1,30 +1,75 @@ -%healthcheck-output::before { - background-size: 55%; - width: 25px !important; - height: 25px !important; - left: 17px; - top: 20px !important; - margin-top: 0 !important; -} -%healthcheck-output.warning::before { - background-size: 100%; -} %healthcheck-output { - padding: 20px 24px; - padding-bottom: 26px; - padding-left: 57px; + display: flex; + + padding: 20px 16px; + padding-right: 24px; + margin-bottom: 24px; +} +%healthcheck-output::before { + margin-right: 15px; +} +%healthcheck-output > div { + flex: 1 1 auto; +} +%healthcheck-output header { + margin-bottom: 0.9em; +} +%healthcheck-output dl:not(:last-of-type) { + float: left; + width: 25%; + margin-right: 2%; +} +%healthcheck-output dl:nth-of-type(3) { + width: 46%; + margin-right: 0; +} +%healthcheck-output dl:not(:last-of-type) dd { + word-break: break-all; +} +%healthcheck-output dt { + margin-bottom: 0; +} +%healthcheck-output dl:last-of-type { + clear: both; + margin-bottom: 0; +} +%healthcheck-output dl:last-of-type dt { + margin-bottom: 0.3em; +} +%healthcheck-output dl:last-of-type dd { position: relative; } +%healthcheck-output dl > * { + float: none; + display: block; + width: auto; + position: static; + padding-left: 0; +} %healthcheck-output pre { padding: 12px; + padding-right: 40px; + white-space: pre-wrap; } %healthcheck-output .with-feedback { - float: right; + position: absolute; + right: 0.5em; + top: 1em; } -%healthcheck-output dt { - margin-bottom: 0.2em; -} -%healthcheck-output dd:first-of-type { - margin-bottom: 0.6em; +@media #{$--lt-spacious-healthcheck-output} { + %healthcheck-output { + padding-top: 15px; + padding-bottom: 15px; + padding-left: 14px; + padding-right: 19px; + } + %healthcheck-output::before { + margin-right: 8px; + } + %healthcheck-output dl:not(:last-of-type) { + float: none; + width: auto; + margin-right: 0; + } } diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss index 9d26d4d663..ba90f3fc58 100644 --- a/ui-v2/app/styles/components/healthcheck-output/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss @@ -1,6 +1,28 @@ %healthcheck-output { border-width: 1px; } +%healthcheck-output::before { + @extend %as-pseudo; + min-width: 26px; + min-height: 26px; + margin-right: 15px; +} +@media #{$--lt-spacious-healthcheck-output} { + %healthcheck-output::before { + min-width: 18px; + min-height: 18px; + margin-right: 8px; + } +} +%healthcheck-output.passing::before { + @extend %with-check-circle-fill-color-icon; +} +%healthcheck-output.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-output.critical::before { + @extend %with-cancel-square-fill-color-icon; +} %healthcheck-output, %healthcheck-output pre { border-radius: $decor-radius-100; @@ -9,27 +31,23 @@ color: $gray-400; } %healthcheck-output pre { - background-color: $black; - color: $white; + background-color: $gray-050; + color: $gray-600; } -%healthcheck-output.passing { +%healthcheck-output { /* TODO: this should be a frame-gray */ - // @extend %frame-green-500; color: $gray-900; border-color: $gray-200; border-style: solid; + + border-left-width: 4px; +} +%healthcheck-output.passing { + border-left-color: $green-500; } %healthcheck-output.warning { - @extend %frame-yellow-500; - color: $gray-900; + border-left-color: $yellow-500; } %healthcheck-output.critical { - @extend %frame-red-500; - color: $gray-900; -} -%healthcheck-output.passing::before { - background-color: $color-success !important; -} -%healthcheck-output.critical::before { - background-color: $color-danger !important; + border-left-color: $red-500; } diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index e163ff534e..80fa42d228 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -1,14 +1,67 @@ -@import './healthchecked-resource/index'; -@import './icons/index'; -.healthchecked-resource { - @extend %healthchecked-resource; +@import '../base/components/stats-card/index'; +.healthchecked-resource > div { + @extend %stats-card; } -%healthchecked-resource li.passing { - @extend %with-passing; +%tooltip-below::after { + top: calc(100% - 8px); + bottom: auto; + border-top: none; + border-bottom: 18px solid $gray-500; } -%healthchecked-resource li.warning { - @extend %with-warning; +%tooltip-below::before { + top: calc(100% + 4px); + bottom: auto; + /*TODO: This should probably go into base*/ + line-height: 1em; } -%healthchecked-resource li.critical { - @extend %with-critical; +%tooltip-left::before { + right: 0; +} +%tooltip-right::before { + left: -10px; +} +%stats-card-icon { + @extend %tooltip-below; +} +%stats-card-icon:first-child::before { + right: 0; +} +%stats-card-icon:last-child::before { + left: -10px; +} + +%stats-card-icon:last-child { + @extend %with-star-icon; +} +%stats-card header > .zero { + @extend %with-minus-square-fill-color-icon; + color: $gray-400; +} +%stats-card header > .non-zero { + @extend %with-check-circle-fill-color-icon; + color: $green-500; +} + +%stats-card li a > :first-child { + font-size: 0; + height: 16px; + min-width: 16px; +} +[data-tooltip] { + @extend %with-pseudo-tooltip; +} +%stats-card li a > :last-child { + margin-left: 10px; +} +%stats-card a > :first-child::before { + left: -10px; +} +%stats-card a.passing > :first-child { + @extend %with-check-circle-fill-color-icon; +} +%stats-card a.warning > :first-child { + @extend %with-alert-triangle-color-icon; +} +%stats-card a.critical > :first-child { + @extend %with-cancel-square-fill-color-icon; } diff --git a/ui-v2/app/styles/components/healthchecked-resource/layout.scss b/ui-v2/app/styles/components/healthchecked-resource/layout.scss deleted file mode 100644 index 2d39692e35..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/layout.scss +++ /dev/null @@ -1,82 +0,0 @@ -%healthchecked-resource header strong, -%healthchecked-resource header span, -%healthchecked-resource header em, -%healthchecked-resource li:not(:last-child) span { - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} -%healthchecked-resource li:last-child:not(:only-child) { - overflow: hidden; - white-space: nowrap; -} -%healthchecked-resource, -%healthchecked-resource header, -%healthchecked-resource li { - position: relative; -} -%healthchecked-resource header strong { - position: absolute; -} -%healthchecked-resource a, -%healthchecked-resource header a > * { - display: block; -} -%healthchecked-resource li::before { - left: 11px; - top: 50%; - margin-top: -0.49em !important; -} -.healthy .healthchecked-resource header span { - padding-right: 20px; -} -.healthy .healthchecked-resource li { - position: absolute; - top: 8px; - right: 16px; - border: none; -} -.healthy .healthchecked-resource li::before { - left: 0; -} -.healthy .healthchecked-resource li span { - display: none; -} -.healthy .healthchecked-resource li a { - padding-left: 0; -} -%healthchecked-resource header strong { - top: 2.8em; - padding: 0 15px; -} -%healthchecked-resource header span { - margin-bottom: 1.75em; -} -%healthchecked-resource header a { - padding: 12px 15px; -} -.unhealthy .healthchecked-resource header a { - padding-bottom: 15px; -} -.unhealthy .healthchecked-resource header.with-service a { - padding-bottom: 25px; -} -%healthchecked-resource li a { - padding: 3px 15px; - padding-top: 4px; - padding-left: 39px; - height: 31px; -} -%healthchecked-resource li:not(.passing) strong, -.healthy .healthchecked-resource li:only-child strong { - display: none; -} -%healthchecked-resource ul:empty { - position: absolute; - top: 18px; - right: 20px; - width: 1em; - height: 1em; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss deleted file mode 100644 index 12b5ecc86e..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/skin.scss +++ /dev/null @@ -1,33 +0,0 @@ -%healthchecked-resource { - border: $decor-border-100; - box-shadow: 0 4px 8px 0 rgba($black, 0.05); -} -%healthchecked-resource li { - border-top: $decor-border-100; -} -%healthchecked-resource, -%healthchecked-resource li { - border-color: $gray-200; -} -%healthchecked-resource li.passing { - color: $color-success; -} -%healthchecked-resource li.warning { - color: $color-alert; -} -%healthchecked-resource li.critical { - color: $color-failure; -} -%healthchecked-resource:hover, -%healthchecked-resource:focus { - box-shadow: 0 8px 10px 0 rgba($black, 0.1); -} -%healthchecked-resource { - border-radius: $radius-small; -} -%healthchecked-resource ul:empty { - @extend %with-no-healthchecks; -} -%healthchecked-resource ul:empty::before { - color: $gray-400; -} diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 7ff829e43a..0b04361ef7 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -119,36 +119,6 @@ background-image: url('data:image/svg+xml;charset=UTF-8,'); background-color: $color-transparent; } -%with-magnifier { - position: relative; -} -%with-magnifier::before { - @extend %pseudo-icon; - cursor: pointer; // autosearch - top: 50%; - left: 50%; - margin-left: -0.2em; - margin-top: -0.2em; - font-size: 3em; - width: 0.35em; - height: 0.35em; - border: 0.05em solid; - border-radius: 0.35em; - border-color: currentColor; - background-color: $color-transparent; -} -%with-magnifier::after { - @extend %pseudo-icon; - font-size: 3em; - top: 50%; - left: 50%; - margin-top: 0.13em; - margin-left: 0.07em; - border-width: 0; - width: 0.18em; - height: 0.05em; - transform: rotate(45deg); -} %with-exit::after { @extend %pseudo-icon-bg-img; top: 3px; @@ -207,14 +177,6 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-warning-icon-orange { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-warning-icon-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} %with-right-arrow-green { @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); @@ -226,39 +188,7 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-deny-icon { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); - width: 16px; - height: 16px; - background-color: $color-transparent; -} -%with-deny-icon-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-deny::before { - @extend %with-deny-icon; -} -%with-allow::before { - @extend %with-right-arrow-green; -} -%with-passing::before { - @extend %with-tick; - border-radius: 100%; -} -%with-warning::before { - @extend %with-warning-icon-orange; - background-color: $color-transparent; -} -%with-critical::before { - @extend %with-cross; - border-radius: 20%; -} -%with-no-healthchecks::before { - @extend %with-minus; - border-radius: 20%; -} +// swap this out for new icons %with-error { position: relative; padding-left: 18px; diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss index 3493041c17..e0ee99db2b 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -2,7 +2,6 @@ @import './anchors'; @import './progress'; @import './buttons'; -@import './toggle-button'; @import './secret-button'; @import './tabs'; @import './pill'; @@ -31,4 +30,5 @@ @import './feedback-dialog'; @import './modal-dialog'; @import './notice'; -@import './with-tooltip'; +@import './tooltip'; +@import './sort-control'; diff --git a/ui-v2/app/styles/components/modal-dialog/skin.scss b/ui-v2/app/styles/components/modal-dialog/skin.scss index a97a159dcc..ef15cac407 100644 --- a/ui-v2/app/styles/components/modal-dialog/skin.scss +++ b/ui-v2/app/styles/components/modal-dialog/skin.scss @@ -20,10 +20,6 @@ %modal-window > header { border-bottom-width: 1px; } -%modal-window.warning > header { - @extend %with-warning; - text-indent: 20px; -} %modal-window > header [for='modal_close'] { @extend %bg-icon; diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index 3d0a22d22e..6b74e61f22 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -1,4 +1,23 @@ -@import './notice/index'; +@import '../base/components/notice/index'; +%notice { + margin-bottom: 1em; +} +%notice-success::before { + @extend %with-check-circle-fill-color-icon; +} +%notice-info::before { + @extend %with-info-circle-fill-color-icon; +} +%notice-highlight::before { + @extend %with-star-icon; +} +%notice-warning::before { + @extend %with-alert-triangle-color-icon; +} +%notice-error::before { + @extend %with-cancel-square-fill-color-icon; +} +/**/ .notice.warning { @extend %notice-warning; } diff --git a/ui-v2/app/styles/components/notice/layout.scss b/ui-v2/app/styles/components/notice/layout.scss deleted file mode 100644 index f2e9a9a777..0000000000 --- a/ui-v2/app/styles/components/notice/layout.scss +++ /dev/null @@ -1,12 +0,0 @@ -%notice { - position: relative; - padding: 1em; - padding-left: 45px; - margin-bottom: 1em; -} -%notice::before { - position: absolute; - left: 20px; - top: 18px; - margin-top: 0; -} diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/components/notice/skin.scss deleted file mode 100644 index c2488b3b2e..0000000000 --- a/ui-v2/app/styles/components/notice/skin.scss +++ /dev/null @@ -1,40 +0,0 @@ -%notice { - border-radius: $radius-small; - border-width: 1px; -} -%notice-success, -%notice-info, -%notice-highlight, -%notice-error, -%notice-warning { - @extend %notice; -} -%notice-success { - @extend %frame-green-500, %with-passing; -} -%notice-info { - @extend %frame-blue-500, %with-passing; /* needs a better info button*/ -} -%notice-highlight { - @extend %frame-gray-800, %with-star; -} -%notice-warning { - @extend %frame-yellow-500, %with-warning; -} -%notice-error { - @extend %frame-red-500, %with-critical; -} -%notice-highlight::before { - /* %with-star, bigger */ - width: 16px; - height: 16px; -} -%notice-success::before { - color: $color-success; -} -%notice-info::before { - color: $color-action; /* change to info */ -} -%notice-error::before { - color: $color-failure; -} diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss index 8b2771a6dd..016e265422 100644 --- a/ui-v2/app/styles/components/pill.scss +++ b/ui-v2/app/styles/components/pill.scss @@ -1,4 +1,4 @@ -@import './pill/index'; +@import '../base/components/pill/index'; td strong, %tag-list span { @extend %pill; diff --git a/ui-v2/app/styles/components/pill/layout.scss b/ui-v2/app/styles/components/pill/layout.scss deleted file mode 100644 index 325dc503fb..0000000000 --- a/ui-v2/app/styles/components/pill/layout.scss +++ /dev/null @@ -1,8 +0,0 @@ -%pill { - display: inline-block; - padding: 1px 5px; -} -%pill button { - padding: 0; - margin-right: 3px; -} diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss deleted file mode 100644 index a0ca72d168..0000000000 --- a/ui-v2/app/styles/components/pill/skin.scss +++ /dev/null @@ -1,13 +0,0 @@ -%pill { - border-radius: $radius-small; -} -%pill button { - background-color: transparent; - font-size: 0; - cursor: pointer; -} -%pill button::before { - @extend %with-cancel-plain-icon, %as-pseudo; - width: 10px; - height: 10px; -} diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss index 90fa382b25..ac501700a9 100644 --- a/ui-v2/app/styles/components/product.scss +++ b/ui-v2/app/styles/components/product.scss @@ -40,12 +40,13 @@ html.template-loading main > div { } /* toggleable toolbar for short screens */ [for='toolbar-toggle'] { - @extend %with-magnifier; + @extend %with-search-color-icon; + background-position: 0 4px; + display: inline-block; + width: 26px; + height: 26px; + cursor: pointer; color: $blue-500; - width: 20px; - height: 20px; - margin-left: 15px; - top: -3px; } #toolbar-toggle { display: none; @@ -55,10 +56,18 @@ html.template-loading main > div { display: none; } } +// reduced search magnifying icon layout @media #{$--lt-horizontal-selects} { %app-view header h1 { display: inline-block; } + %app-view header h1 { + display: inline-block; + } + // on the instance detail page we don't have the magnifier + html.template-instance.template-show h1 { + display: block; + } #toolbar-toggle + * { display: none; } diff --git a/ui-v2/app/styles/components/sort-control.scss b/ui-v2/app/styles/components/sort-control.scss new file mode 100644 index 0000000000..aa08af693b --- /dev/null +++ b/ui-v2/app/styles/components/sort-control.scss @@ -0,0 +1,4 @@ +@import '../base/components/sort-control/index'; +.sort-control { + @extend %sort-control; +} diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index 760a7799e0..c2f7be881d 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -1,5 +1,8 @@ @import './icons/index'; -@import './table/index'; +@import '../base/components/table/index'; +table { + @extend %table, %table-flex; +} html.template-service.template-list td:first-child a span, html.template-node.template-show #services td:first-child a span, @@ -29,33 +32,20 @@ table:not(.sessions) td:first-child { th { overflow: visible; } -th span { - @extend %tooltip; - margin-left: 2px; - vertical-align: text-top; -} th span::after { @extend %with-info-circle-outline-icon, %as-pseudo; opacity: 0.6; } -th span em::after { - @extend %tooltip-tail; - @extend %blink-in-fade-out; - top: auto !important; - bottom: -13px; +th span { + @extend %with-tooltip; + margin-left: 2px; } th span em { - @extend %tooltip-bubble; - @extend %blink-in-fade-out; width: 250px; font-style: normal; white-space: normal !important; } -th span:hover em::after, -th span:hover em { - @extend %blink-in-fade-out-active; -} /* ideally these would be in route css files, but left here as they */ /* accomplish the same thing (hide non-essential columns for tables) */ @media #{$--lt-medium-table} { @@ -68,6 +58,10 @@ th span:hover em { } } @media #{$--lt-wide-table} { + /* hide actions on narrow screens, you can always click in do everything from there */ + tr > .actions { + display: none; + } html.template-intention.template-list tr > :nth-last-child(2) { display: none; } diff --git a/ui-v2/app/styles/components/table/index.scss b/ui-v2/app/styles/components/table/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/table/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/table/layout.scss b/ui-v2/app/styles/components/table/layout.scss deleted file mode 100644 index da345c6153..0000000000 --- a/ui-v2/app/styles/components/table/layout.scss +++ /dev/null @@ -1,48 +0,0 @@ -table { - width: 100%; -} -%table-actions { - width: 60px !important; -} -th.actions input { - display: none; -} -th.actions { - text-align: right; -} -table tr { - display: flex; -} -table td { - display: inline-flex; - align-items: center; - height: 50px; -} -table td a { - display: block; -} -table caption { - text-align: left; - margin-bottom: 0.8em; -} -table th { - padding-bottom: 0.6em; -} -table th:not(.actions), -table td:not(.actions), -table td a { - padding-right: 0.9em; -} -th, -td:not(.actions), -td:not(.actions) a { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -/* hide actions on narrow screens, you can always click in do everything from there */ -@media #{$--lt-wide-table} { - tr > .actions { - display: none; - } -} diff --git a/ui-v2/app/styles/components/table/skin.scss b/ui-v2/app/styles/components/table/skin.scss deleted file mode 100644 index ceac149fbc..0000000000 --- a/ui-v2/app/styles/components/table/skin.scss +++ /dev/null @@ -1,23 +0,0 @@ -th, -td { - border-bottom: $decor-border-100; -} -th { - border-color: $gray-300; -} -td { - border-color: $gray-200; - color: $gray-500; -} -th, -td strong { - color: $gray-600; -} -// TODO: Add to native selector `tbody th` - will involve moving all -// current th's to `thead th` and changing the templates -%tbody-th { - color: $gray-900; -} -td:first-child { - @extend %tbody-th; -} diff --git a/ui-v2/app/styles/components/tabs.scss b/ui-v2/app/styles/components/tabs.scss index 64a1b9138e..7891006d7d 100644 --- a/ui-v2/app/styles/components/tabs.scss +++ b/ui-v2/app/styles/components/tabs.scss @@ -1,7 +1,12 @@ -@import './tabs/index'; +@import '../base/components/tabs/index'; .tab-nav { @extend %tab-nav; } .tab-section { @extend %tab-section; + /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ + margin-top: 0 !important; +} +%tab-button-selected { + @extend %frame-magenta-300; } diff --git a/ui-v2/app/styles/components/tabs/index.scss b/ui-v2/app/styles/components/tabs/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/tabs/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/tabs/layout.scss b/ui-v2/app/styles/components/tabs/layout.scss deleted file mode 100644 index 7b20b1aa1f..0000000000 --- a/ui-v2/app/styles/components/tabs/layout.scss +++ /dev/null @@ -1,34 +0,0 @@ -%tab-section { - /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ - margin-top: 0 !important; -} -%tab-nav { - clear: both; -} -@media #{$--horizontal-tabs} { - %tab-nav ul { - display: flex; - align-items: center; - } - %tab-nav a { - padding-left: 16px; - padding-right: 16px; - } -} -@media #{$--lt-horizontal-tabs} { - %tab-nav li { - width: 100%; - } -} -%tab-nav a { - display: block; - padding-top: 13px; - padding-bottom: 13px; -} -%tab-section > input[type='radio'], -%tab-section > input[type='radio'] + * { - display: none; -} -%tab-section > input[type='radio']:checked + * { - display: block; -} diff --git a/ui-v2/app/styles/components/tabular-details/layout.scss b/ui-v2/app/styles/components/tabular-details/layout.scss index 1cf49f1cb3..cb9f0669c6 100644 --- a/ui-v2/app/styles/components/tabular-details/layout.scss +++ b/ui-v2/app/styles/components/tabular-details/layout.scss @@ -12,6 +12,9 @@ position: absolute; top: 8px; } +%tabular-details-toggle-button span { + display: none; +} %tabular-details td > label { @extend %tabular-details-toggle-button; right: 2px; diff --git a/ui-v2/app/styles/components/toggle-button.scss b/ui-v2/app/styles/components/toggle-button.scss deleted file mode 100644 index 86d395e6f1..0000000000 --- a/ui-v2/app/styles/components/toggle-button.scss +++ /dev/null @@ -1 +0,0 @@ -@import './toggle-button/index'; diff --git a/ui-v2/app/styles/components/toggle-button/index.scss b/ui-v2/app/styles/components/toggle-button/index.scss deleted file mode 100644 index 07dc13fdcb..0000000000 --- a/ui-v2/app/styles/components/toggle-button/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin.scss'; -@import './layout.scss'; diff --git a/ui-v2/app/styles/components/toggle-button/layout.scss b/ui-v2/app/styles/components/toggle-button/layout.scss deleted file mode 100644 index 9d0294d3a2..0000000000 --- a/ui-v2/app/styles/components/toggle-button/layout.scss +++ /dev/null @@ -1,11 +0,0 @@ -%toggle-button { - width: 30px; - height: 30px; - /* center */ - display: flex; - align-items: center; - justify-content: center; -} -%toggle-button span { - display: none; -} diff --git a/ui-v2/app/styles/components/tooltip.scss b/ui-v2/app/styles/components/tooltip.scss new file mode 100644 index 0000000000..22f5059fbd --- /dev/null +++ b/ui-v2/app/styles/components/tooltip.scss @@ -0,0 +1,12 @@ +@import '../base/components/tooltip/index'; +%app-view h1 span[data-tooltip] { + @extend %with-pseudo-tooltip; + text-indent: -9000px; + font-size: 0; +} +/* override structure min-width for the moment */ +/* TODO: Clarify whether these should actually use */ +/* the min-width from structure */ +%tooltip-bubble { + min-width: 0; +} diff --git a/ui-v2/app/styles/components/with-tooltip.scss b/ui-v2/app/styles/components/with-tooltip.scss deleted file mode 100644 index c4e536ff12..0000000000 --- a/ui-v2/app/styles/components/with-tooltip.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './with-tooltip/index'; -%app-view h1 span[data-tooltip] { - @extend %with-pseudo-tooltip; -} diff --git a/ui-v2/app/styles/components/with-tooltip/index.scss b/ui-v2/app/styles/components/with-tooltip/index.scss deleted file mode 100644 index bca4c98e29..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/index.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import './skin'; -@import './layout'; -%with-pseudo-tooltip { - @extend %tooltip; -} -%with-pseudo-tooltip::before { - @extend %tooltip-bubble; -} -%with-pseudo-tooltip::after { - @extend %tooltip-tail; -} -%with-pseudo-tooltip { - text-indent: -9000px; - font-size: 0; - top: -7px; -} - -%with-pseudo-tooltip::after, -%with-pseudo-tooltip::before { - @extend %blink-in-fade-out; -} -%with-pseudo-tooltip:hover::after, -%with-pseudo-tooltip:hover::before, -%with-pseudo-tooltip:focus::after, -%with-pseudo-tooltip:focus::before { - @extend %blink-in-fade-out-active; -} diff --git a/ui-v2/app/styles/components/with-tooltip/layout.scss b/ui-v2/app/styles/components/with-tooltip/layout.scss deleted file mode 100644 index 130823941b..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/layout.scss +++ /dev/null @@ -1,35 +0,0 @@ -%tooltip { - position: relative; - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: text-top; -} -%tooltip-bubble, -%tooltip-tail { - position: absolute; - z-index: 1; -} -%tooltip-bubble { - padding: 10px; - bottom: calc(100% + 5px); - text-align: center; - white-space: nowrap; - content: attr(data-tooltip); - // incase you are using text-indent to hide the - // text of the element %with-tooltip - text-indent: 0; -} -%tooltip-tail { - content: ''; - left: 50%; - margin-left: -10px; - top: -10px; - transform: scale(1, 0.5); - width: 0; - height: 0; - background-color: transparent !important; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-top: 18px solid $gray-800; -} diff --git a/ui-v2/app/styles/components/with-tooltip/skin.scss b/ui-v2/app/styles/components/with-tooltip/skin.scss deleted file mode 100644 index b4a17d7c5a..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/skin.scss +++ /dev/null @@ -1,9 +0,0 @@ -%tooltip-bubble, -%tooltip-tail { - color: $white; - background-color: $gray-800; -} -%tooltip-bubble { - border-radius: $decor-radius-200; - box-shadow: 0 3px 1px 0 rgba($black, 0.12); -} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 9a0662f9c4..154cbe8e8f 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -40,7 +40,6 @@ h3, fieldset > header, caption, %header-nav, -%healthchecked-resource header span, %healthcheck-output dt, %copy-button, %app-content div > dl > dt, @@ -56,7 +55,6 @@ main label a[rel*='help'], %pill, %tbody-th em, %form-element > strong, -%healthchecked-resource strong, %app-view h1 em { font-weight: $typo-weight-normal; } @@ -72,7 +70,6 @@ td strong, /* Styling */ %form-element > em, %tbody-th em, -%healthchecked-resource header em, %app-view h1 em { font-style: normal; } @@ -91,7 +88,6 @@ h2 { h3 { font-size: $typo-header-300; } -%healthcheck-info dt, %header-drop-nav .is-active, %app-view h1 em { font-size: $typo-size-500; @@ -108,9 +104,10 @@ th, td, caption, .type-dialog, +%healthcheck-output dl > *, %form-element > span, %tooltip-bubble, -%healthchecked-resource strong, +%stats-card header a span, %footer, %app-view h1 span.kind-proxy { font-size: $typo-size-700; diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss index d10ca5debb..ee1b95dfd1 100644 --- a/ui-v2/app/styles/routes/dc/intention/index.scss +++ b/ui-v2/app/styles/routes/dc/intention/index.scss @@ -1,10 +1,12 @@ -html.template-intention.template-list td.intent-allow strong { - @extend %with-allow; +html.template-intention.template-list td strong { visibility: hidden; } -html.template-intention.template-list td.intent-deny strong { - @extend %with-deny; - visibility: hidden; +html.template-intention.template-list td.intent-allow strong::before { + @extend %with-arrow-right-color-icon, %as-pseudo; + background-size: 24px; +} +html.template-intention.template-list td.intent-deny strong::before { + @extend %with-deny-color-icon, %as-pseudo; } html.template-intention.template-list td.destination { @extend %tbody-th; diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss index d4374c0d87..a5b67ca117 100644 --- a/ui-v2/app/styles/routes/dc/nodes/index.scss +++ b/ui-v2/app/styles/routes/dc/nodes/index.scss @@ -4,10 +4,15 @@ html.template-node.template-show .sessions td:last-child { html.template-node.template-show .sessions td:first-child { @extend %tbody-th; } -html.template-node.template-list .healthy h2, html.template-node.template-list .unhealthy h2 { margin-bottom: 0.7em; } html.template-node.template-show #meta-data table tr { cursor: default; } +.healthy > div > ul > li { + padding-top: 16px; +} +.healthy h2 { + margin-bottom: 0em !important; +} diff --git a/ui-v2/app/styles/variables/custom-query.scss b/ui-v2/app/styles/variables/custom-query.scss index 3f31e55818..90523b12de 100644 --- a/ui-v2/app/styles/variables/custom-query.scss +++ b/ui-v2/app/styles/variables/custom-query.scss @@ -26,8 +26,8 @@ $--lt-wide-footer: '(max-width: 420px)'; $--spacious-page-header: '(min-width: 850px)'; $--lt-spacious-page-header: '(max-width: 849px)'; -$--spacious-healthcheck-output: '(min-width: 421px)'; -$--lt-spacious-healthcheck-output: '(max-width: 420px)'; +$--spacious-healthcheck-output: '(min-width: 651px)'; +$--lt-spacious-healthcheck-output: '(max-width: 650px)'; $--wide-form: '(min-width: 421px)'; $--lt-wide-form: '(max-width: 420px)'; diff --git a/ui-v2/app/templates/components/hashicorp-consul.hbs b/ui-v2/app/templates/components/hashicorp-consul.hbs index 4c7ba823ef..2872e6d584 100644 --- a/ui-v2/app/templates/components/hashicorp-consul.hbs +++ b/ui-v2/app/templates/components/hashicorp-consul.hbs @@ -42,7 +42,7 @@