Merge pull request #6437 from hashicorp/ui-staging
ui: UI Release Merge (ui-staging merge)
This commit is contained in:
John Cowen
GitHub
commit
b6d65ed36c
|
|
@ -7,6 +7,19 @@ deps: node_modules clean
|
||||||
clean:
|
clean:
|
||||||
rm -rf ./tmp
|
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
|
build-ci: deps
|
||||||
yarn run build-ci --output-path=dist
|
yarn run build-ci --output-path=dist
|
||||||
|
|
||||||
|
|
|
||||||
2
ui-v2/_redirects
Normal file
2
ui-v2/_redirects
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/ /ui
|
||||||
|
/ui/* /ui/index.html 200
|
||||||
|
|
@ -20,6 +20,38 @@ export default Adapter.extend({
|
||||||
}
|
}
|
||||||
return this.appendURL('internal/ui/node', [query.id], this.cleanQuery(query));
|
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) {
|
handleBatchResponse: function(url, response, primary, slug) {
|
||||||
const dc = url.searchParams.get(API_DATACENTER_KEY) || '';
|
const dc = url.searchParams.get(API_DATACENTER_KEY) || '';
|
||||||
return response.map((item, i, arr) => {
|
return response.map((item, i, arr) => {
|
||||||
|
|
@ -41,7 +73,21 @@ export default Adapter.extend({
|
||||||
const method = requestData.method;
|
const method = requestData.method;
|
||||||
if (status === HTTP_OK) {
|
if (status === HTTP_OK) {
|
||||||
const url = this.parseURL(requestData.url);
|
const url = this.parseURL(requestData.url);
|
||||||
|
let temp, port, address;
|
||||||
switch (true) {
|
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):
|
case this.isQueryRecord(url, method):
|
||||||
response = this.handleSingleResponse(url, fillSlug(response), PRIMARY_KEY, SLUG_KEY);
|
response = this.handleSingleResponse(url, fillSlug(response), PRIMARY_KEY, SLUG_KEY);
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ export default Component.extend(SlotsMixin, {
|
||||||
classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
|
classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
|
||||||
dom: service('dom'),
|
dom: service('dom'),
|
||||||
didReceiveAttrs: function() {
|
didReceiveAttrs: function() {
|
||||||
|
this._super(...arguments);
|
||||||
// right now only manually added classes are hoisted to <html>
|
// right now only manually added classes are hoisted to <html>
|
||||||
const $root = get(this, 'dom').root();
|
const $root = get(this, 'dom').root();
|
||||||
let cls = get(this, 'class') || '';
|
let cls = get(this, 'class') || '';
|
||||||
|
|
@ -22,18 +23,22 @@ export default Component.extend(SlotsMixin, {
|
||||||
if (cls) {
|
if (cls) {
|
||||||
// its possible for 'layout' templates to change after insert
|
// its possible for 'layout' templates to change after insert
|
||||||
// check for these specific layouts and clear them out
|
// 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) {
|
if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) {
|
||||||
$root.classList.remove(item);
|
$root.classList.remove(item);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$root.classList.add(...templatize(cls.split(' ')));
|
$root.classList.add(...receivedClasses);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
didInsertElement: function() {
|
didInsertElement: function() {
|
||||||
|
this._super(...arguments);
|
||||||
this.didReceiveAttrs();
|
this.didReceiveAttrs();
|
||||||
},
|
},
|
||||||
didDestroyElement: function() {
|
didDestroyElement: function() {
|
||||||
|
this._super(...arguments);
|
||||||
const cls = get(this, 'class') + ' loading';
|
const cls = get(this, 'class') + ' loading';
|
||||||
if (cls) {
|
if (cls) {
|
||||||
const $root = get(this, 'dom').root();
|
const $root = get(this, 'dom').root();
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import Component from '@ember/component';
|
import Component from '@ember/component';
|
||||||
|
import Slotted from 'block-slots';
|
||||||
|
|
||||||
export default Component.extend({
|
export default Component.extend(Slotted, {
|
||||||
classNames: ['healthcheck-output'],
|
classNames: ['healthcheck-output'],
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,67 @@
|
||||||
import Component from '@ember/component';
|
import Component from '@ember/component';
|
||||||
import { get, set } from '@ember/object';
|
import { get, set } from '@ember/object';
|
||||||
|
import { inject as service } from '@ember/service';
|
||||||
|
|
||||||
export default Component.extend({
|
export default Component.extend({
|
||||||
|
dom: service('dom'),
|
||||||
classNames: ['phrase-editor'],
|
classNames: ['phrase-editor'],
|
||||||
item: '',
|
item: '',
|
||||||
remove: function(index, e) {
|
didInsertElement: function() {
|
||||||
this.items.removeAt(index, 1);
|
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);
|
this.onchange(e);
|
||||||
},
|
},
|
||||||
add: function(e) {
|
oninput: function(e) {},
|
||||||
const value = get(this, 'item').trim();
|
onkeydown: function(e) {},
|
||||||
if (value !== '') {
|
actions: {
|
||||||
set(this, 'item', '');
|
keydown: function(e) {
|
||||||
const currentItems = get(this, 'items') || [];
|
switch (e.keyCode) {
|
||||||
const items = new Set(currentItems).add(value);
|
case 8: // backspace
|
||||||
if (items.size > currentItems.length) {
|
if (e.target.value == '' && get(this, 'value').length > 0) {
|
||||||
set(this, 'items', [...items]);
|
this.actions.remove.bind(this)(get(this, 'value').length - 1);
|
||||||
this.onchange(e);
|
}
|
||||||
|
break;
|
||||||
|
case 27: // escape
|
||||||
|
set(this, 'value', []);
|
||||||
|
this.search({ target: this });
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
this.onkeydown({ target: this });
|
||||||
},
|
},
|
||||||
onkeydown: function(e) {
|
input: function(e) {
|
||||||
switch (e.keyCode) {
|
set(this, 'item', e.target.value);
|
||||||
case 8:
|
this.oninput({ target: this });
|
||||||
if (e.target.value == '' && this.items.length > 0) {
|
},
|
||||||
this.remove(this.items.length - 1);
|
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'));
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
15
ui-v2/app/components/sort-control.js
Normal file
15
ui-v2/app/components/sort-control.js
Normal file
|
|
@ -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')}` } });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
4
ui-v2/app/components/stats-card.js
Normal file
4
ui-v2/app/components/stats-card.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import Component from '@ember/component';
|
||||||
|
import Slotted from 'block-slots';
|
||||||
|
|
||||||
|
export default Component.extend(Slotted, {});
|
||||||
|
|
@ -34,9 +34,6 @@ export default Controller.extend({
|
||||||
const blocking = get(this, 'item.client.blocking');
|
const blocking = get(this, 'item.client.blocking');
|
||||||
switch (target.name) {
|
switch (target.name) {
|
||||||
case 'client[blocking]':
|
case 'client[blocking]':
|
||||||
if (typeof blocking === 'undefined') {
|
|
||||||
set(this, 'item.client', {});
|
|
||||||
}
|
|
||||||
set(this, 'item.client.blocking', !blocking);
|
set(this, 'item.client.blocking', !blocking);
|
||||||
this.send('update', get(this, 'item'));
|
this.send('update', get(this, 'item'));
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
7
ui-v2/app/helpers/starts-with.js
Normal file
7
ui-v2/app/helpers/starts-with.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { helper } from '@ember/component/helper';
|
||||||
|
|
||||||
|
export function startsWith([needle, haystack = ''] /*, hash*/) {
|
||||||
|
return haystack.startsWith(needle);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default helper(startsWith);
|
||||||
63
ui-v2/app/instance-initializers/selection.js
Normal file
63
ui-v2/app/instance-initializers/selection.js
Normal file
|
|
@ -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);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -29,7 +29,7 @@ export default Mixin.create(WithBlockingActions, {
|
||||||
delete item.Session;
|
delete item.Session;
|
||||||
set(controller, 'session', null);
|
set(controller, 'session', null);
|
||||||
});
|
});
|
||||||
}, 'delete');
|
}, 'deletesession');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,5 @@ export default Model.extend({
|
||||||
Coord: attr(),
|
Coord: attr(),
|
||||||
Segment: attr('string'),
|
Segment: attr('string'),
|
||||||
Datacenter: attr('string'),
|
Datacenter: attr('string'),
|
||||||
|
SyncTime: attr('number'),
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@ export default Model.extend({
|
||||||
Datacenter: attr('string'),
|
Datacenter: attr('string'),
|
||||||
Segment: attr(),
|
Segment: attr(),
|
||||||
Coord: attr(),
|
Coord: attr(),
|
||||||
|
SyncTime: attr('number'),
|
||||||
meta: attr(),
|
meta: attr(),
|
||||||
hasStatus: function(status) {
|
hasStatus: function(status) {
|
||||||
return hasStatus(get(this, 'Checks'), status);
|
return hasStatus(get(this, 'Checks'), status);
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,5 @@ export default Model.extend({
|
||||||
ServiceID: attr('string'),
|
ServiceID: attr('string'),
|
||||||
Node: attr('string'),
|
Node: attr('string'),
|
||||||
ServiceProxy: attr(),
|
ServiceProxy: attr(),
|
||||||
|
SyncTime: attr('number'),
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ export default Model.extend({
|
||||||
Node: attr(),
|
Node: attr(),
|
||||||
Service: attr(),
|
Service: attr(),
|
||||||
Checks: attr(),
|
Checks: attr(),
|
||||||
|
SyncTime: attr('number'),
|
||||||
meta: attr(),
|
meta: attr(),
|
||||||
passing: computed('ChecksPassing', 'Checks', function() {
|
passing: computed('ChecksPassing', 'Checks', function() {
|
||||||
let num = 0;
|
let num = 0;
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,5 @@ export default Model.extend({
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
Datacenter: attr('string'),
|
Datacenter: attr('string'),
|
||||||
|
SyncTime: attr('number'),
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ export default Route.extend(WithKvActions, {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
parent: repo.findBySlug(ascend(key, 1) || '/', dc),
|
parent: repo.findBySlug(ascend(key, 1) || '/', dc),
|
||||||
item: repo.findBySlug(key, dc),
|
item: repo.findBySlug(key, dc),
|
||||||
|
session: null,
|
||||||
}).then(model => {
|
}).then(model => {
|
||||||
// TODO: Consider loading this after initial page load
|
// TODO: Consider loading this after initial page load
|
||||||
const session = get(model.item, 'Session');
|
const session = get(model.item, 'Session');
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,10 @@ export default Route.extend({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
model: function(params) {
|
model: function(params) {
|
||||||
|
const dc = this.modelFor('dc').dc.Name;
|
||||||
return hash({
|
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) {
|
setupController: function(controller, model) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Route from '@ember/routing/route';
|
import Route from '@ember/routing/route';
|
||||||
import { inject as service } from '@ember/service';
|
import { inject as service } from '@ember/service';
|
||||||
import { hash } from 'rsvp';
|
import { hash } from 'rsvp';
|
||||||
import { get } from '@ember/object';
|
import { get, set } from '@ember/object';
|
||||||
|
|
||||||
export default Route.extend({
|
export default Route.extend({
|
||||||
client: service('client/http'),
|
client: service('client/http'),
|
||||||
|
|
@ -12,6 +12,9 @@ export default Route.extend({
|
||||||
item: get(this, 'repo').findAll(),
|
item: get(this, 'repo').findAll(),
|
||||||
dcs: get(this, 'dcRepo').findAll(),
|
dcs: get(this, 'dcRepo').findAll(),
|
||||||
}).then(model => {
|
}).then(model => {
|
||||||
|
if (typeof get(model.item, 'client.blocking') === 'undefined') {
|
||||||
|
set(model, 'item.client', { blocking: true });
|
||||||
|
}
|
||||||
return hash({
|
return hash({
|
||||||
...model,
|
...model,
|
||||||
...{
|
...{
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@ export default function(filterable) {
|
||||||
.indexOf(term) !== -1 ||
|
.indexOf(term) !== -1 ||
|
||||||
get(item, 'Service.ID')
|
get(item, 'Service.ID')
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.indexOf(term) !== -1
|
.indexOf(term) !== -1 ||
|
||||||
|
`${get(item, 'Service.Address')}:${get(item, 'Service.Port')}`.indexOf(term) !== -1
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import Serializer from 'ember-data/serializers/rest';
|
import Serializer from 'ember-data/serializers/rest';
|
||||||
|
|
||||||
import { get } from '@ember/object';
|
import { set } from '@ember/object';
|
||||||
import {
|
import {
|
||||||
HEADERS_SYMBOL as HTTP_HEADERS_SYMBOL,
|
HEADERS_SYMBOL as HTTP_HEADERS_SYMBOL,
|
||||||
HEADERS_INDEX as HTTP_HEADERS_INDEX,
|
HEADERS_INDEX as HTTP_HEADERS_INDEX,
|
||||||
|
|
@ -44,14 +44,17 @@ export default Serializer.extend({
|
||||||
requestType
|
requestType
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
timestamp: function() {
|
||||||
|
return new Date().getTime();
|
||||||
|
},
|
||||||
normalizeMeta: function(store, primaryModelClass, headers, payload, id, requestType) {
|
normalizeMeta: function(store, primaryModelClass, headers, payload, id, requestType) {
|
||||||
const meta = {
|
const meta = {
|
||||||
cursor: headers[HTTP_HEADERS_INDEX],
|
cursor: headers[HTTP_HEADERS_INDEX],
|
||||||
date: headers['date'],
|
|
||||||
};
|
};
|
||||||
if (requestType === 'query') {
|
if (requestType === 'query') {
|
||||||
meta.ids = payload.map(item => {
|
meta.date = this.timestamp();
|
||||||
return get(item, this.primaryKey);
|
payload.forEach(function(item) {
|
||||||
|
set(item, 'SyncTime', meta.date);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return meta;
|
return meta;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Service from '@ember/service';
|
import Service from '@ember/service';
|
||||||
import { get } from '@ember/object';
|
import { get } from '@ember/object';
|
||||||
|
|
||||||
import Clipboard from 'npm:clipboard';
|
import Clipboard from 'clipboard';
|
||||||
|
|
||||||
class ClipboardCallback extends Clipboard {
|
class ClipboardCallback extends Clipboard {
|
||||||
constructor(trigger, cb) {
|
constructor(trigger, cb) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import Service from '@ember/service';
|
import Service from '@ember/service';
|
||||||
|
|
||||||
import Clipboard from 'npm:clipboard';
|
import Clipboard from 'clipboard';
|
||||||
|
|
||||||
export default Service.extend({
|
export default Service.extend({
|
||||||
execute: function(trigger) {
|
execute: function(trigger) {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,17 @@
|
||||||
import RepositoryService from 'consul-ui/services/repository';
|
import RepositoryService from 'consul-ui/services/repository';
|
||||||
import { inject as service } from '@ember/service';
|
import { inject as service } from '@ember/service';
|
||||||
|
import { get } from '@ember/object';
|
||||||
|
|
||||||
const modelName = 'node';
|
const modelName = 'node';
|
||||||
export default RepositoryService.extend({
|
export default RepositoryService.extend({
|
||||||
coordinates: service('repository/coordinate'),
|
coordinates: service('repository/coordinate'),
|
||||||
getModelName: function() {
|
getModelName: function() {
|
||||||
return modelName;
|
return modelName;
|
||||||
},
|
},
|
||||||
|
findByLeader: function(dc) {
|
||||||
|
const query = {
|
||||||
|
dc: dc,
|
||||||
|
};
|
||||||
|
return get(this, 'store').queryLeader(this.getModelName(), query);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,27 @@ import LazyProxyService from 'consul-ui/services/lazy-proxy';
|
||||||
import { cache as createCache, BlockingEventSource } from 'consul-ui/utils/dom/event-source';
|
import { cache as createCache, BlockingEventSource } from 'consul-ui/utils/dom/event-source';
|
||||||
|
|
||||||
const createProxy = function(repo, find, settings, cache, serialize = JSON.stringify) {
|
const createProxy = function(repo, find, settings, cache, serialize = JSON.stringify) {
|
||||||
// proxied find*..(id, dc)
|
|
||||||
const client = get(this, 'client');
|
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() {
|
return function() {
|
||||||
const key = `${repo.getModelName()}.${find}.${serialize([...arguments])}`;
|
const key = `${repo.getModelName()}.${find}.${serialize([...arguments])}`;
|
||||||
const _args = arguments;
|
const _args = arguments;
|
||||||
|
|
@ -46,8 +65,9 @@ const createProxy = function(repo, find, settings, cache, serialize = JSON.strin
|
||||||
key: key,
|
key: key,
|
||||||
type: BlockingEventSource,
|
type: BlockingEventSource,
|
||||||
settings: {
|
settings: {
|
||||||
enabled: settings.blocking,
|
enabled: typeof settings.blocking === 'undefined' || settings.blocking,
|
||||||
},
|
},
|
||||||
|
createEvent: createEvent,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -23,4 +23,9 @@ export default Store.extend({
|
||||||
const adapter = this.adapterFor(modelName);
|
const adapter = this.adapterFor(modelName);
|
||||||
return adapter.self(this, { modelName: modelName }, token);
|
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);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -83,12 +83,24 @@
|
||||||
background-color: $yellow-050;
|
background-color: $yellow-050;
|
||||||
border-color: $color-warning;
|
border-color: $color-warning;
|
||||||
}
|
}
|
||||||
|
%frame-yellow-800 {
|
||||||
|
@extend %frame-border-000;
|
||||||
|
background-color: $yellow-500;
|
||||||
|
border-color: $yellow-800;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
%frame-green-500 {
|
%frame-green-500 {
|
||||||
@extend %frame-border-000;
|
@extend %frame-border-000;
|
||||||
background-color: $green-050;
|
background-color: $green-050;
|
||||||
border-color: $green-500;
|
border-color: $green-500;
|
||||||
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 {
|
%frame-blue-500 {
|
||||||
@extend %frame-border-000;
|
@extend %frame-border-000;
|
||||||
background-color: $blue-050;
|
background-color: $blue-050;
|
||||||
|
|
@ -143,6 +155,12 @@
|
||||||
border-color: $red-800;
|
border-color: $red-800;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
%frame-red-800 {
|
||||||
|
@extend %frame-border-000;
|
||||||
|
background-color: $red-500;
|
||||||
|
border-color: $red-800;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
%frame-red-900 {
|
%frame-red-900 {
|
||||||
@extend %frame-border-000;
|
@extend %frame-border-000;
|
||||||
background-color: $red-700;
|
background-color: $red-700;
|
||||||
|
|
@ -155,3 +173,69 @@
|
||||||
border-color: $magenta-600;
|
border-color: $magenta-600;
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
7
ui-v2/app/styles/base/components/action-group/index.scss
Normal file
7
ui-v2/app/styles/base/components/action-group/index.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import '../toggle-button/index';
|
||||||
|
@import './skin';
|
||||||
|
@import './layout';
|
||||||
|
|
||||||
|
%action-group label:first-of-type {
|
||||||
|
@extend %toggle-button;
|
||||||
|
}
|
||||||
|
|
@ -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 {
|
%action-group {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
position: absolute;
|
}
|
||||||
top: 8px;
|
%action-group label span {
|
||||||
right: 15px;
|
display: none;
|
||||||
}
|
}
|
||||||
%action-group label {
|
%action-group label {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -26,29 +17,47 @@
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
%action-group-action {
|
||||||
|
width: 170px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
/* this is actually the group */
|
/* this is actually the group */
|
||||||
%action-group ul {
|
%action-group ul {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
%action-group li > * {
|
||||||
|
@extend %action-group-action;
|
||||||
|
}
|
||||||
%action-group ul::before {
|
%action-group ul::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 9px;
|
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 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) {
|
%action-group ul:not(.above) {
|
||||||
top: 35px;
|
top: 23px;
|
||||||
}
|
}
|
||||||
%action-group ul:not(.above)::before {
|
%action-group ul:not(.above)::before {
|
||||||
top: -6px;
|
top: -6px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
%action-group ul.above {
|
%action-group ul.above {
|
||||||
bottom: 35px;
|
bottom: 23px;
|
||||||
}
|
}
|
||||||
%action-group ul.above::before {
|
%action-group ul.above::before {
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
|
|
@ -67,6 +76,7 @@
|
||||||
%action-group input[type='radio']:checked ~ .with-confirmation > ul {
|
%action-group input[type='radio']:checked ~ .with-confirmation > ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
/*TODO: If anything this is %toggle-button*/
|
||||||
%action-group input[type='radio']:checked ~ label[for='actions_close'] {
|
%action-group input[type='radio']:checked ~ label[for='actions_close'] {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
%action-group label:first-of-type {
|
|
||||||
@extend %toggle-button;
|
|
||||||
}
|
|
||||||
%action-group input[type='radio']:checked + label:first-of-type {
|
%action-group input[type='radio']:checked + label:first-of-type {
|
||||||
/* frame-gray */
|
/* frame-gray */
|
||||||
background-color: $gray-050;
|
background-color: $gray-050;
|
||||||
|
|
@ -10,12 +7,13 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
%action-group label:first-of-type::after {
|
%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;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
%action-group ul {
|
%action-group ul {
|
||||||
border: $decor-border-100;
|
border: $decor-border-100;
|
||||||
border-radius: $radius-small;
|
border-radius: $decor-radius-100;
|
||||||
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
|
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
|
||||||
}
|
}
|
||||||
%action-group ul::before {
|
%action-group ul::before {
|
||||||
|
|
@ -36,3 +34,6 @@
|
||||||
%action-group ul::before {
|
%action-group ul::before {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
}
|
}
|
||||||
|
%action-group li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
29
ui-v2/app/styles/base/components/anchors/index.scss
Normal file
29
ui-v2/app/styles/base/components/anchors/index.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
8
ui-v2/app/styles/base/components/breadcrumbs/index.scss
Normal file
8
ui-v2/app/styles/base/components/breadcrumbs/index.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import './skin';
|
||||||
|
@import './layout';
|
||||||
|
%breadcrumbs li > * {
|
||||||
|
@extend %breadcrumb;
|
||||||
|
}
|
||||||
|
%breadcrumbs strong {
|
||||||
|
@extend %breadcrumb-selected;
|
||||||
|
}
|
||||||
11
ui-v2/app/styles/base/components/breadcrumbs/layout.scss
Normal file
11
ui-v2/app/styles/base/components/breadcrumbs/layout.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
21
ui-v2/app/styles/base/components/breadcrumbs/skin.scss
Normal file
21
ui-v2/app/styles/base/components/breadcrumbs/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
%button-compact {
|
%button-compact {
|
||||||
// @extend %button;
|
/* @extend %button;*/
|
||||||
padding-left: calc(1.6em - 1px) !important;
|
padding-left: calc(1.6em - 1px) !important;
|
||||||
padding-right: calc(1.6em - 1px) !important;
|
padding-right: calc(1.6em - 1px) !important;
|
||||||
padding-top: calc(0.35em - 1px) !important;
|
padding-top: calc(0.35em - 1px) !important;
|
||||||
|
|
@ -9,9 +9,17 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
%copy-button {
|
%copy-button {
|
||||||
@extend %button, %with-clipboard;
|
@extend %button;
|
||||||
min-height: 17px;
|
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) {
|
%copy-button:not(:empty) {
|
||||||
padding-left: 38px !important;
|
padding-left: 38px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -20,7 +28,7 @@
|
||||||
%dangerous-button {
|
%dangerous-button {
|
||||||
@extend %button;
|
@extend %button;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: $radius-small;
|
border-radius: $decor-radius-100;
|
||||||
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
|
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
|
||||||
}
|
}
|
||||||
/* color */
|
/* color */
|
||||||
13
ui-v2/app/styles/base/components/notice/layout.scss
Normal file
13
ui-v2/app/styles/base/components/notice/layout.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
29
ui-v2/app/styles/base/components/notice/skin.scss
Normal file
29
ui-v2/app/styles/base/components/notice/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
12
ui-v2/app/styles/base/components/pill/layout.scss
Normal file
12
ui-v2/app/styles/base/components/pill/layout.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
14
ui-v2/app/styles/base/components/pill/skin.scss
Normal file
14
ui-v2/app/styles/base/components/pill/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
1
ui-v2/app/styles/base/components/sort-control/index.scss
Normal file
1
ui-v2/app/styles/base/components/sort-control/index.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@import './skin';
|
||||||
17
ui-v2/app/styles/base/components/sort-control/skin.scss
Normal file
17
ui-v2/app/styles/base/components/sort-control/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
54
ui-v2/app/styles/base/components/stats-card/layout.scss
Normal file
54
ui-v2/app/styles/base/components/stats-card/layout.scss
Normal file
|
|
@ -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%;
|
||||||
|
}
|
||||||
31
ui-v2/app/styles/base/components/stats-card/skin.scss
Normal file
31
ui-v2/app/styles/base/components/stats-card/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
52
ui-v2/app/styles/base/components/table/layout.scss
Normal file
52
ui-v2/app/styles/base/components/table/layout.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
24
ui-v2/app/styles/base/components/table/skin.scss
Normal file
24
ui-v2/app/styles/base/components/table/skin.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
26
ui-v2/app/styles/base/components/tabs/index.scss
Normal file
26
ui-v2/app/styles/base/components/tabs/index.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
18
ui-v2/app/styles/base/components/tabs/layout.scss
Normal file
18
ui-v2/app/styles/base/components/tabs/layout.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -7,26 +7,26 @@
|
||||||
/* %frame-gray-something */
|
/* %frame-gray-something */
|
||||||
border-color: $gray-200;
|
border-color: $gray-200;
|
||||||
}
|
}
|
||||||
|
%tab-nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
%tab-nav label {
|
%tab-nav label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
%tab-nav a {
|
%tab-button {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
%tab-nav a {
|
%tab-button {
|
||||||
border-bottom: $decor-border-200;
|
border-bottom: $decor-border-200;
|
||||||
}
|
}
|
||||||
%tab-nav a {
|
%tab-button {
|
||||||
border-color: $color-transparent;
|
border-color: $color-transparent;
|
||||||
color: $gray-500;
|
color: $gray-500;
|
||||||
}
|
}
|
||||||
%tab-nav li:not(.selected) a:hover,
|
%tab-button-intent,
|
||||||
%tab-nav li:not(.selected) a:focus,
|
%tab-button-active {
|
||||||
%tab-nav li:not(.selected) a:active {
|
|
||||||
/* %frame-gray-something */
|
/* %frame-gray-something */
|
||||||
border-color: $color-transparent;
|
border-color: $color-transparent;
|
||||||
background-color: $gray-100;
|
background-color: $gray-100;
|
||||||
}
|
}
|
||||||
%tab-nav .selected a {
|
|
||||||
@extend %frame-magenta-300;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
%toggle-button {
|
%toggle-button {
|
||||||
border-radius: $radius-small;
|
border-radius: $decor-radius-100;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
%toggle-button-intent {
|
||||||
|
background-color: $gray-050;
|
||||||
|
}
|
||||||
|
%toggle-button-active {
|
||||||
|
background-color: $gray-100;
|
||||||
|
}
|
||||||
%toggle-button:hover,
|
%toggle-button:hover,
|
||||||
%toggle-button:focus {
|
%toggle-button:focus {
|
||||||
background-color: $gray-050;
|
@extend %toggle-button-intent;
|
||||||
}
|
}
|
||||||
%toggle-button:active {
|
%toggle-button:active {
|
||||||
background-color: $gray-100;
|
@extend %toggle-button-active;
|
||||||
}
|
}
|
||||||
32
ui-v2/app/styles/base/components/tooltip/index.scss
Normal file
32
ui-v2/app/styles/base/components/tooltip/index.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
48
ui-v2/app/styles/base/components/tooltip/layout.scss
Normal file
48
ui-v2/app/styles/base/components/tooltip/layout.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
19
ui-v2/app/styles/base/components/tooltip/skin.scss
Normal file
19
ui-v2/app/styles/base/components/tooltip/skin.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -10,4 +10,4 @@
|
||||||
width: 1.2em;
|
width: 1.2em;
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
vertical-align: text-top;
|
vertical-align: text-top;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,110 @@
|
||||||
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
|
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
|
||||||
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
|
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
|
||||||
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
|
$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23fa8f37"/></svg>');
|
||||||
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
|
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
|
||||||
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
|
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
|
||||||
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
|
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
|
||||||
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
|
$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%232eb039"/></svg>');
|
||||||
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
|
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
|
||||||
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
|
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
|
||||||
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
|
||||||
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23373a42"/></svg>');
|
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
|
||||||
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
|
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
||||||
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
|
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23000"/></svg>');
|
||||||
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
|
$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23c73445"/></svg>');
|
||||||
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
|
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
|
||||||
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
|
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
|
||||||
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
|
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
|
||||||
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
|
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
|
||||||
|
$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%232eb039"/></svg>');
|
||||||
|
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
|
||||||
|
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
|
||||||
|
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
|
||||||
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
|
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
|
||||||
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
|
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
|
||||||
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 16.9l-4.6-4.6 4.6-4.6-1.4-1.4-6 6 6 6 1.4-1.4z" fill="%23000"/></svg>');
|
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 16.9l-4.6-4.6 4.6-4.6-1.4-1.4-6 6 6 6 1.4-1.4z" fill="%23000"/></svg>');
|
||||||
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.3 7.7l4.6 4.6-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z" fill="%23000"/></svg>');
|
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.3 7.7l4.6 4.6-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z" fill="%23000"/></svg>');
|
||||||
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 16l4.6-4.6 4.6 4.6 1.4-1.4-6-6-6 6L7.4 16z" fill="%23000"/></svg>');
|
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 16l4.6-4.6 4.6 4.6 1.4-1.4-6-6-6 6L7.4 16z" fill="%23000"/></svg>');
|
||||||
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
|
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
|
||||||
$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" fill="%23000"/></svg>');
|
$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" fill="%23000"/></svg>');
|
||||||
$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
|
$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
|
||||||
$code-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
|
$code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
|
||||||
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
|
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
|
||||||
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
|
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
|
||||||
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
|
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
|
||||||
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
|
$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
||||||
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
|
$deny-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23000" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23000" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23000" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
||||||
$edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.796v3.058h3.058l8.153-8.154-3.057-3.057L5 15.796zm1.02 0h1.018v1.02h1.02v1.018H6.02v-2.038zm12.536-7.44L17.23 9.68l-3.058-3.057 1.325-1.326a1.015 1.015 0 0 1 1.436-.001h.002l1.62 1.622c.397.397.397 1.04 0 1.437z" fill="%23000"/></svg>');
|
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
|
||||||
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
|
$docs-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 11H20v9.5c0 .786-.714 1.5-1.5 1.5h-14c-.786 0-1.5-.714-1.5-1.5v-17C3 2.714 3.714 2 4.5 2H13v1.5H4.5v17h14V11zM7 17.714h9v-1.428H7v1.428zm0-2.857h9V13.43H7v1.428zM7 12h9v-1.429H7V12zm0-4.286V6.286h5v1.428H7zM17 2.5V1h6v6h-1.5V3.429L18 7l-1-1 3.5-3.5H17z" fill="%23000"/></svg>');
|
||||||
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
|
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
|
||||||
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
|
$edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.796v3.058h3.058l8.153-8.154-3.057-3.057L5 15.796zm1.02 0h1.018v1.02h1.02v1.018H6.02v-2.038zm12.536-7.44L17.23 9.68l-3.058-3.057 1.325-1.326a1.015 1.015 0 0 1 1.436-.001h.002l1.62 1.622c.397.397.397 1.04 0 1.437z" fill="%23000"/></svg>');
|
||||||
|
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
|
||||||
|
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
|
||||||
|
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
|
||||||
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
|
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
|
||||||
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
|
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
|
||||||
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
|
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
|
||||||
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
|
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
|
||||||
$flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
|
$flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
|
||||||
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
|
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
|
||||||
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
|
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
|
||||||
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
|
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
|
||||||
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
|
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
|
||||||
$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.398 8.04c-.792 0-1.44-.66-1.44-1.44 0-.78.66-1.44 1.44-1.44.78 0 1.44.66 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.44 10.56c0 .792-.66 1.44-1.44 1.44-.78 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44m.96-12c0-1.332-1.068-2.4-2.4-2.4a2.391 2.391 0 0 0-1.2 4.464v7.872A2.39 2.39 0 0 0 7.398 21a2.39 2.39 0 0 0 1.2-4.464V8.664a2.386 2.386 0 0 0 1.2-2.064m7.2 13.44c-.792 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.2-3.504V9c-.036-.936-.408-1.764-1.128-2.472S15.534 5.436 14.598 5.4h-1.2V3l-3.6 3.6 3.6 3.6V7.8h1.2c.324.024.576.132.828.372s.36.504.372.828v7.536a2.392 2.392 0 0 0 1.2 4.464 2.39 2.39 0 0 0 1.2-4.464" fill="%23000"/></svg>');
|
$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.398 8.04c-.792 0-1.44-.66-1.44-1.44 0-.78.66-1.44 1.44-1.44.78 0 1.44.66 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.44 10.56c0 .792-.66 1.44-1.44 1.44-.78 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44m.96-12c0-1.332-1.068-2.4-2.4-2.4a2.391 2.391 0 0 0-1.2 4.464v7.872A2.39 2.39 0 0 0 7.398 21a2.39 2.39 0 0 0 1.2-4.464V8.664a2.386 2.386 0 0 0 1.2-2.064m7.2 13.44c-.792 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.2-3.504V9c-.036-.936-.408-1.764-1.128-2.472S15.534 5.436 14.598 5.4h-1.2V3l-3.6 3.6 3.6 3.6V7.8h1.2c.324.024.576.132.828.372s.36.504.372.828v7.536a2.392 2.392 0 0 0 1.2 4.464 2.39 2.39 0 0 0 1.2-4.464" fill="%23000"/></svg>');
|
||||||
$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
|
$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
|
||||||
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
|
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
|
||||||
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
|
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
|
||||||
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
|
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
|
||||||
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
|
$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%231563ff" fill-rule="evenodd"/></svg>');
|
||||||
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
|
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
|
||||||
|
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
|
||||||
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
|
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
|
||||||
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.074 10.015l-2.295 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.626-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.626.611.938 1.357.938 2.24 0 .882-.309 1.632-.926 2.25m-9.437 4.83l-.204.21a6.818 6.818 0 0 1-.237.238 2.62 2.62 0 0 1-.209.166.884.884 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586 2.482 2.482 0 0 1 .401-.448l.21-.204A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807m8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.62 2.62 0 0 1 .209-.166.884.884 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586 2.482 2.482 0 0 1-.401.448l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74" fill="%23000"/></svg>');
|
$learn-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.409 5.273l8.915 3.958c.46.204.676.681.676 1.108 0 .427-.216.904-.676 1.108l-3.111 1.381v3.767c0 .145-.05.279-.134.385-.157.35-.434.633-.743.858-.377.274-.855.502-1.39.684-1.073.365-2.462.578-3.963.578-1.5 0-2.89-.213-3.962-.578-.536-.182-1.014-.41-1.39-.684-.31-.225-.586-.509-.744-.858a.618.618 0 0 1-.133-.385v-2.824l.029-.945L5.5 12.5c-.38.525-.897 1.436-1.023 2.536a1.122 1.122 0 0 1 .007 1.912c.015.187.01.38-.007.566a3.863 3.863 0 0 1-.032.247h.028c0 .004.003.028.016.074.015.052.04.119.077.196.074.156.186.333.327.497.3.35.628.533.9.533L5.014 20c-.346 0-.726-.252-1.14-.756-.583.504-1.04.756-1.374.756l-.404-.987c.37 0 .703-.266.938-.812.112-.26.181-.546.207-.806a1.625 1.625 0 0 0-.017-.496 1.122 1.122 0 0 1 .329-1.976c.134-1.173.522-2.041.942-2.668l-1.819-.808C2.216 11.243 2 10.766 2 10.34c0-.427.216-.904.676-1.108l8.915-3.958c.262-.116.556-.116.818 0zm-.432 3.745l-5.52 2.749L12 14.227l8.758-3.888L12 6.45l-8.758 3.89 2.11.937L11 8.5l.977.518zm4.994 4.362l-4.562 2.025a1.002 1.002 0 0 1-.818 0L7.01 13.371l-.013.429v2.6a.553.553 0 0 1 .008.027c.022.079.107.224.358.407.244.178.6.356 1.059.512.917.313 2.167.512 3.562.512s2.645-.2 3.563-.512c.46-.156.814-.334 1.058-.512.251-.183.336-.328.358-.407a.553.553 0 0 1 .009-.027v-3.02zM17 2.5V1h6v6h-1.5V3.429L18.25 6.75 17 6l3.5-3.5H17z" fill="%23000"/></svg>');
|
||||||
|
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.074 10.015l-2.295 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.626-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.626.611.938 1.357.938 2.24 0 .882-.309 1.632-.926 2.25m-9.437 4.83l-.204.21a6.818 6.818 0 0 1-.237.238 2.62 2.62 0 0 1-.209.166.884.884 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586 2.482 2.482 0 0 1 .401-.448l.21-.204A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807m8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.62 2.62 0 0 1 .209-.166.884.884 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586 2.482 2.482 0 0 1-.401.448l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74" fill="%23000"/></svg>');
|
||||||
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
|
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
|
||||||
$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-3.876 5.767H9.473l2.319 3.938 2.332-3.938zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" fill="%23000"/></svg>');
|
$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-3.876 5.767H9.473l2.319 3.938 2.332-3.938zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" fill="%23000"/></svg>');
|
||||||
$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 21.78L4.22 5 3 6.22l2.04 2.04C4.42 8.6 4 9.25 4 10v10c0 1.1.9 2 2 2h12c.23 0 .45-.05.66-.12L19.78 23 21 21.78zM8.9 6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H9.66L20 18.34V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5-2.56 0-4.64 1.93-4.94 4.4L8.9 7.24V6z" fill="%23000"/></svg>');
|
$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 21.78L4.22 5 3 6.22l2.04 2.04C4.42 8.6 4 9.25 4 10v10c0 1.1.9 2 2 2h12c.23 0 .45-.05.66-.12L19.78 23 21 21.78zM8.9 6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H9.66L20 18.34V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5-2.56 0-4.64 1.93-4.94 4.4L8.9 7.24V6z" fill="%23000"/></svg>');
|
||||||
$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-3.876-6.233H9.473l2.319 3.938 2.332-3.938z" fill="%23000"/></svg>');
|
$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-3.876-6.233H9.473l2.319 3.938 2.332-3.938z" fill="%23000"/></svg>');
|
||||||
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
|
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
|
||||||
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
|
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
|
||||||
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
||||||
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
|
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
|
||||||
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
|
$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%238e96a3"/></svg>');
|
||||||
|
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
|
||||||
$minus-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" d="M0 0h9v1.5H0z"/></svg>');
|
$minus-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" d="M0 0h9v1.5H0z"/></svg>');
|
||||||
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
|
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
|
||||||
$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
|
$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
|
||||||
$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
|
$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
|
||||||
$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
|
$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
|
||||||
$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
||||||
$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill="%23000"/></svg>');
|
$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill="%23000"/></svg>');
|
||||||
$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
|
$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
|
||||||
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
|
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
|
||||||
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
|
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
|
||||||
$run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
|
$run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
|
||||||
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
|
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
|
||||||
|
$search-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
|
||||||
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M6.5 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm11-3a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-4 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" id="a"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
|
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M6.5 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm11-3a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-4 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" id="a"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
|
||||||
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
|
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
|
||||||
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
|
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
|
||||||
$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="%23000"/></svg>');
|
$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="%23000"/></svg>');
|
||||||
$star-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M5 7.196L7.575 8.75l-.683-2.93 2.275-1.97-2.996-.254L5 .833 3.83 3.596.832 3.85l2.275 1.97-.683 2.93z"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
|
$star-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M5 7.196L7.575 8.75l-.683-2.93 2.275-1.97-2.996-.254L5 .833 3.83 3.596.832 3.85l2.275 1.97-.683 2.93z"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
|
||||||
$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6z" fill="%23000"/></svg>');
|
$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6z" fill="%23000"/></svg>');
|
||||||
$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9z" fill="%23000"/></svg>');
|
$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9z" fill="%23000"/></svg>');
|
||||||
$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
|
$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
|
||||||
$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
|
$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
|
||||||
$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
|
$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
|
||||||
$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M19 11.75V8l-7-4-7 4v8l7 4 7-4v-4.25zm-1 .571l-2 1.143V9.5L12 7 8 9.5v3.964l-2-1.143V8.5l6-3.25 6 3.25v3.821zM12 2l9 5v10l-9 5-9-5V7l9-5zm0 6.25L15 10v4l-3 1.75L9 14v-4l3-1.75zM12 17l6-3.75v2.25l-6 3.25-6-3.25v-2.25L12 17z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
|
$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M19 11.75V8l-7-4-7 4v8l7 4 7-4v-4.25zm-1 .571l-2 1.143V9.5L12 7 8 9.5v3.964l-2-1.143V8.5l6-3.25 6 3.25v3.821zM12 2l9 5v10l-9 5-9-5V7l9-5zm0 6.25L15 10v4l-3 1.75L9 14v-4l3-1.75zM12 17l6-3.75v2.25l-6 3.25-6-3.25v-2.25L12 17z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
|
||||||
$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2L5 8v8l7 4 7-4V8l-7-4zm.001 1L18 8.5v7L12.001 19 6 15.5v-7L12.001 5z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
|
$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2L5 8v8l7 4 7-4V8l-7-4zm.001 1L18 8.5v7L12.001 19 6 15.5v-7L12.001 5z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
|
||||||
$trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7h2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h2v12h8V7zm3-1H5V4h3.5l1-1h5l1 1H19v2zm-9 11.188V7h1v10.188h-1zm3 0V7h1v10.188h-1z" fill="%23000"/></svg>');
|
$trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7h2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h2v12h8V7zm3-1H5V4h3.5l1-1h5l1 1H19v2zm-9 11.188V7h1v10.188h-1zm3 0V7h1v10.188h-1z" fill="%23000"/></svg>');
|
||||||
$tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
|
$tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
|
||||||
$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" fill="%23000"/></svg>');
|
$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" fill="%23000"/></svg>');
|
||||||
$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="%23000"/></svg>');
|
$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="%23000"/></svg>');
|
||||||
$upload-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
|
$upload-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
|
||||||
$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="%23000"/></svg>');
|
$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="%23000"/></svg>');
|
||||||
$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23000"/></svg>');
|
$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23000"/></svg>');
|
||||||
$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
|
$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
|
||||||
$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
|
$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
|
||||||
$user-team-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7a2.5 2.5 0 0 0 0 5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" fill="%23000"/></svg>');
|
$user-team-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7a2.5 2.5 0 0 0 0 5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" fill="%23000"/></svg>');
|
||||||
$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="%23000"/></svg>');
|
$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="%23000"/></svg>');
|
||||||
$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="%23000"/></svg>');
|
$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="%23000"/></svg>');
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@
|
||||||
background-image: $alert-circle-outline-svg;
|
background-image: $alert-circle-outline-svg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%with-alert-triangle-color-icon {
|
||||||
|
@extend %with-icon;
|
||||||
|
background-image: $alert-triangle-color-svg;
|
||||||
|
}
|
||||||
|
|
||||||
%with-alert-triangle-icon {
|
%with-alert-triangle-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $alert-triangle-svg;
|
background-image: $alert-triangle-svg;
|
||||||
|
|
@ -23,6 +28,11 @@
|
||||||
background-image: $arrow-left-svg;
|
background-image: $arrow-left-svg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%with-arrow-right-color-icon {
|
||||||
|
@extend %with-icon;
|
||||||
|
background-image: $arrow-right-color-svg;
|
||||||
|
}
|
||||||
|
|
||||||
%with-arrow-right-icon {
|
%with-arrow-right-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $arrow-right-svg;
|
background-image: $arrow-right-svg;
|
||||||
|
|
@ -53,6 +63,11 @@
|
||||||
background-image: $cancel-plain-svg;
|
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 {
|
%with-cancel-square-fill-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $cancel-square-fill-svg;
|
background-image: $cancel-square-fill-svg;
|
||||||
|
|
@ -73,6 +88,11 @@
|
||||||
background-image: $caret-up-svg;
|
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 {
|
%with-check-circle-fill-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $check-circle-fill-svg;
|
background-image: $check-circle-fill-svg;
|
||||||
|
|
@ -148,11 +168,26 @@
|
||||||
background-image: $copy-success-svg;
|
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 {
|
%with-disabled-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $disabled-svg;
|
background-image: $disabled-svg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%with-docs-icon {
|
||||||
|
@extend %with-icon;
|
||||||
|
background-image: $docs-svg;
|
||||||
|
}
|
||||||
|
|
||||||
%with-download-icon {
|
%with-download-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $download-svg;
|
background-image: $download-svg;
|
||||||
|
|
@ -248,6 +283,11 @@
|
||||||
background-image: $history-svg;
|
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 {
|
%with-info-circle-fill-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $info-circle-fill-svg;
|
background-image: $info-circle-fill-svg;
|
||||||
|
|
@ -263,6 +303,11 @@
|
||||||
background-image: $kubernetes-logo-color-svg;
|
background-image: $kubernetes-logo-color-svg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%with-learn-icon {
|
||||||
|
@extend %with-icon;
|
||||||
|
background-image: $learn-svg;
|
||||||
|
}
|
||||||
|
|
||||||
%with-link-icon {
|
%with-link-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $link-svg;
|
background-image: $link-svg;
|
||||||
|
|
@ -308,6 +353,11 @@
|
||||||
background-image: $minus-plain-svg;
|
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 {
|
%with-minus-square-fill-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $minus-square-fill-svg;
|
background-image: $minus-square-fill-svg;
|
||||||
|
|
@ -372,6 +422,10 @@
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
background-image: $search-svg;
|
background-image: $search-svg;
|
||||||
}
|
}
|
||||||
|
%with-search-color-icon {
|
||||||
|
@extend %with-icon;
|
||||||
|
background-image: $search-color-svg;
|
||||||
|
}
|
||||||
|
|
||||||
%with-service-identity-icon {
|
%with-service-identity-icon {
|
||||||
@extend %with-icon;
|
@extend %with-icon;
|
||||||
|
|
|
||||||
51
ui-v2/app/styles/base/typography/base-placeholders.scss
Normal file
51
ui-v2/app/styles/base/typography/base-placeholders.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -16,7 +16,7 @@ $typo-weight-medium: 500;
|
||||||
$typo-weight-semibold: 600;
|
$typo-weight-semibold: 600;
|
||||||
$typo-weight-bold: 700;
|
$typo-weight-bold: 700;
|
||||||
$typo-lead-000: 0;
|
$typo-lead-000: 0;
|
||||||
$type-lead-050: 1;
|
$typo-lead-050: 1;
|
||||||
$typo-lead-100: 1.2;
|
$typo-lead-100: 1.2;
|
||||||
$typo-lead-200: 1.25;
|
$typo-lead-200: 1.25;
|
||||||
$typo-lead-300: 1.28;
|
$typo-lead-300: 1.28;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
@import './base-variables';
|
@import './base-variables';
|
||||||
@import './semantic-variables';
|
@import './semantic-variables';
|
||||||
|
@import './base-placeholders';
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,16 @@
|
||||||
@import './action-group/index';
|
@import '../base/components/action-group/index';
|
||||||
.action-group {
|
.action-group {
|
||||||
@extend %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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
%main-content a {
|
||||||
color: $gray-900;
|
color: $gray-900;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
%anchor:hover,
|
|
||||||
%anchor:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
%anchor,
|
|
||||||
%anchor:hover,
|
|
||||||
%anchor:focus,
|
|
||||||
%anchor:active {
|
|
||||||
color: $color-action;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@import './app-view/index';
|
@import './app-view/index';
|
||||||
@import './filter-bar/index';
|
@import './filter-bar/index';
|
||||||
@import './buttons/index';
|
@import '../base/components/buttons/index';
|
||||||
main {
|
main {
|
||||||
@extend %app-view;
|
@extend %app-view;
|
||||||
}
|
}
|
||||||
|
|
@ -18,9 +18,7 @@ main {
|
||||||
// TODO: This should be its own component
|
// TODO: This should be its own component
|
||||||
%app-view h1 span[data-tooltip] {
|
%app-view h1 span[data-tooltip] {
|
||||||
@extend %with-external-source-icon;
|
@extend %with-external-source-icon;
|
||||||
// TODO: Look to remove this, right now its needed but this
|
margin-top: 13px;
|
||||||
// should automaticaly vertically center
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
%app-view h1 span.kind-proxy {
|
%app-view h1 span.kind-proxy {
|
||||||
@extend %frame-gray-900;
|
@extend %frame-gray-900;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
@import './breadcrumbs/index';
|
@import '../base/components/breadcrumbs/index';
|
||||||
main header nav:first-child {
|
main header nav:first-child {
|
||||||
|
position: absolute;
|
||||||
|
top: -38px;
|
||||||
|
}
|
||||||
|
main header nav:first-child ol {
|
||||||
@extend %breadcrumbs;
|
@extend %breadcrumbs;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
%breadcrumbs {
|
|
||||||
position: absolute;
|
|
||||||
top: -38px; // %app-view:margin-top - 15px;
|
|
||||||
}
|
|
||||||
%breadcrumbs ol {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
%breadcrumbs li {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
@import './buttons/index';
|
@import '../base/components/buttons/index';
|
||||||
|
%copy-button {
|
||||||
|
@extend %with-clipboard;
|
||||||
|
}
|
||||||
button[type='submit'],
|
button[type='submit'],
|
||||||
a.type-create {
|
a.type-create {
|
||||||
@extend %primary-button;
|
@extend %primary-button;
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,29 @@
|
||||||
@import './filter-bar/index';
|
@import './filter-bar/index';
|
||||||
@import './expanded-single-select/index';
|
@import './expanded-single-select/index';
|
||||||
@import './icons/index';
|
|
||||||
.filter-bar {
|
.filter-bar {
|
||||||
@extend %filter-bar;
|
@extend %filter-bar;
|
||||||
}
|
}
|
||||||
%filter-bar [role='radiogroup'] {
|
%filter-bar [role='radiogroup'] {
|
||||||
@extend %expanded-single-select;
|
@extend %expanded-single-select;
|
||||||
}
|
}
|
||||||
%filter-bar .value-passing span {
|
%filter-bar span::before {
|
||||||
@extend %with-passing;
|
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 {
|
%filter-bar .value-warning span::before {
|
||||||
@extend %with-warning-icon-grey;
|
@extend %with-alert-triangle-icon, %as-pseudo;
|
||||||
}
|
}
|
||||||
%filter-bar .value-allow span {
|
%filter-bar .value-critical span::before {
|
||||||
@extend %with-allow;
|
@extend %with-cancel-square-fill-icon, %as-pseudo;
|
||||||
}
|
|
||||||
%filter-bar .value-deny span {
|
|
||||||
@extend %with-deny;
|
|
||||||
}
|
|
||||||
%filter-bar .value-deny span::before {
|
|
||||||
@extend %with-deny-icon-grey;
|
|
||||||
}
|
}
|
||||||
%filter-bar .value-allow span::before {
|
%filter-bar .value-allow span::before {
|
||||||
@extend %with-right-arrow-grey;
|
@extend %with-arrow-right-icon, %as-pseudo;
|
||||||
}
|
}
|
||||||
%filter-bar .value-critical span {
|
%filter-bar .value-deny span::before {
|
||||||
@extend %with-critical;
|
@extend %with-deny-icon, %as-pseudo;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,22 +22,3 @@
|
||||||
margin-bottom: 12px;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,3 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 9px 15px;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,17 @@
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: $decor-radius-100;
|
border-radius: $decor-radius-100;
|
||||||
}
|
}
|
||||||
%flash-message p.success strong {
|
%flash-message p strong::before {
|
||||||
@extend %with-passing;
|
@extend %as-pseudo;
|
||||||
}
|
}
|
||||||
%flash-message p.warning strong {
|
%flash-message p.success strong::before {
|
||||||
@extend %with-warning;
|
@extend %with-check-circle-fill-color-icon;
|
||||||
}
|
}
|
||||||
%flash-message p.error strong {
|
%flash-message p.warning strong::before {
|
||||||
@extend %with-critical;
|
@extend %with-alert-triangle-color-icon;
|
||||||
|
}
|
||||||
|
%flash-message p.error strong::before {
|
||||||
|
@extend %with-cancel-square-fill-color-icon;
|
||||||
}
|
}
|
||||||
%flash-message p.success {
|
%flash-message p.success {
|
||||||
@extend %frame-green-500;
|
@extend %frame-green-500;
|
||||||
|
|
|
||||||
|
|
@ -4,5 +4,15 @@
|
||||||
@extend %freetext-filter;
|
@extend %freetext-filter;
|
||||||
}
|
}
|
||||||
%freetext-filter span {
|
%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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
tr .healthcheck-info {
|
tr .healthcheck-info {
|
||||||
@extend %healthcheck-info;
|
@extend %healthcheck-info;
|
||||||
}
|
}
|
||||||
|
// TODO: Look at why we can't have the zeros in the healthcheck-info
|
||||||
td span.zero {
|
td span.zero {
|
||||||
@extend %with-no-healthchecks;
|
@extend %with-minus-square-fill-color-icon;
|
||||||
// TODO: Why isn't this in layout?
|
background-position: left center;
|
||||||
display: block;
|
display: block;
|
||||||
text-indent: 20px;
|
text-indent: 20px;
|
||||||
color: $gray-400;
|
color: $gray-400;
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,12 @@
|
||||||
%healthcheck-info > * {
|
%healthcheck-info > * {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
%healthcheck-info dt {
|
|
||||||
text-indent: -9000px;
|
|
||||||
}
|
|
||||||
%healthcheck-info dt.zero {
|
%healthcheck-info dt.zero {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
%healthcheck-info dd.zero {
|
%healthcheck-info dd.zero {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
%healthcheck-info dt.warning::before {
|
|
||||||
top: 7px;
|
|
||||||
}
|
|
||||||
%healthcheck-info dt.warning::after {
|
|
||||||
left: -2px;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
%healthcheck-info dd {
|
%healthcheck-info dd {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
margin-left: 22px;
|
margin-left: 22px;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,20 @@
|
||||||
%healthcheck-info dt.passing {
|
%healthcheck-info dt {
|
||||||
@extend %with-passing;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
%healthcheck-info dt.warning {
|
%healthcheck-info dt::before {
|
||||||
@extend %with-warning;
|
@extend %as-pseudo;
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
}
|
}
|
||||||
%healthcheck-info dt.critical {
|
%healthcheck-info dt.passing::before {
|
||||||
@extend %with-critical;
|
@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,
|
||||||
%healthcheck-info dt.passing + dd {
|
%healthcheck-info dt.passing + dd {
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,4 @@
|
||||||
@import './healthcheck-output/index';
|
@import './healthcheck-output/index';
|
||||||
@import './icons/index';
|
|
||||||
.healthcheck-output {
|
.healthcheck-output {
|
||||||
@extend %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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
%healthcheck-output {
|
||||||
padding: 20px 24px;
|
display: flex;
|
||||||
padding-bottom: 26px;
|
|
||||||
padding-left: 57px;
|
padding: 20px 16px;
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
margin-bottom: 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;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
%healthcheck-output dl > * {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
position: static;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
%healthcheck-output pre {
|
%healthcheck-output pre {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
padding-right: 40px;
|
||||||
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
%healthcheck-output .with-feedback {
|
%healthcheck-output .with-feedback {
|
||||||
float: right;
|
position: absolute;
|
||||||
|
right: 0.5em;
|
||||||
|
top: 1em;
|
||||||
}
|
}
|
||||||
%healthcheck-output dt {
|
@media #{$--lt-spacious-healthcheck-output} {
|
||||||
margin-bottom: 0.2em;
|
%healthcheck-output {
|
||||||
}
|
padding-top: 15px;
|
||||||
%healthcheck-output dd:first-of-type {
|
padding-bottom: 15px;
|
||||||
margin-bottom: 0.6em;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,28 @@
|
||||||
%healthcheck-output {
|
%healthcheck-output {
|
||||||
border-width: 1px;
|
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,
|
||||||
%healthcheck-output pre {
|
%healthcheck-output pre {
|
||||||
border-radius: $decor-radius-100;
|
border-radius: $decor-radius-100;
|
||||||
|
|
@ -9,27 +31,23 @@
|
||||||
color: $gray-400;
|
color: $gray-400;
|
||||||
}
|
}
|
||||||
%healthcheck-output pre {
|
%healthcheck-output pre {
|
||||||
background-color: $black;
|
background-color: $gray-050;
|
||||||
color: $white;
|
color: $gray-600;
|
||||||
}
|
}
|
||||||
%healthcheck-output.passing {
|
%healthcheck-output {
|
||||||
/* TODO: this should be a frame-gray */
|
/* TODO: this should be a frame-gray */
|
||||||
// @extend %frame-green-500;
|
|
||||||
color: $gray-900;
|
color: $gray-900;
|
||||||
border-color: $gray-200;
|
border-color: $gray-200;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
|
border-left-width: 4px;
|
||||||
|
}
|
||||||
|
%healthcheck-output.passing {
|
||||||
|
border-left-color: $green-500;
|
||||||
}
|
}
|
||||||
%healthcheck-output.warning {
|
%healthcheck-output.warning {
|
||||||
@extend %frame-yellow-500;
|
border-left-color: $yellow-500;
|
||||||
color: $gray-900;
|
|
||||||
}
|
}
|
||||||
%healthcheck-output.critical {
|
%healthcheck-output.critical {
|
||||||
@extend %frame-red-500;
|
border-left-color: $red-500;
|
||||||
color: $gray-900;
|
|
||||||
}
|
|
||||||
%healthcheck-output.passing::before {
|
|
||||||
background-color: $color-success !important;
|
|
||||||
}
|
|
||||||
%healthcheck-output.critical::before {
|
|
||||||
background-color: $color-danger !important;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,67 @@
|
||||||
@import './healthchecked-resource/index';
|
@import '../base/components/stats-card/index';
|
||||||
@import './icons/index';
|
.healthchecked-resource > div {
|
||||||
.healthchecked-resource {
|
@extend %stats-card;
|
||||||
@extend %healthchecked-resource;
|
|
||||||
}
|
}
|
||||||
%healthchecked-resource li.passing {
|
%tooltip-below::after {
|
||||||
@extend %with-passing;
|
top: calc(100% - 8px);
|
||||||
|
bottom: auto;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 18px solid $gray-500;
|
||||||
}
|
}
|
||||||
%healthchecked-resource li.warning {
|
%tooltip-below::before {
|
||||||
@extend %with-warning;
|
top: calc(100% + 4px);
|
||||||
|
bottom: auto;
|
||||||
|
/*TODO: This should probably go into base*/
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
%healthchecked-resource li.critical {
|
%tooltip-left::before {
|
||||||
@extend %with-critical;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -119,36 +119,6 @@
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
|
||||||
background-color: $color-transparent;
|
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 {
|
%with-exit::after {
|
||||||
@extend %pseudo-icon-bg-img;
|
@extend %pseudo-icon-bg-img;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
|
|
@ -207,14 +177,6 @@
|
||||||
@extend %pseudo-icon;
|
@extend %pseudo-icon;
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
|
||||||
}
|
}
|
||||||
%with-warning-icon-orange {
|
|
||||||
@extend %pseudo-icon;
|
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23fa8f37"/></svg>');
|
|
||||||
}
|
|
||||||
%with-warning-icon-grey {
|
|
||||||
@extend %pseudo-icon;
|
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23949daa"/></svg>');
|
|
||||||
}
|
|
||||||
%with-right-arrow-green {
|
%with-right-arrow-green {
|
||||||
@extend %pseudo-icon;
|
@extend %pseudo-icon;
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
|
||||||
|
|
@ -226,39 +188,7 @@
|
||||||
@extend %pseudo-icon;
|
@extend %pseudo-icon;
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
|
||||||
}
|
}
|
||||||
%with-deny-icon {
|
// swap this out for new icons
|
||||||
@extend %pseudo-icon;
|
|
||||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
|
||||||
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,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23919FA8" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23919FA8" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23919FA8" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
|
||||||
}
|
|
||||||
%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%;
|
|
||||||
}
|
|
||||||
%with-error {
|
%with-error {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
@import './anchors';
|
@import './anchors';
|
||||||
@import './progress';
|
@import './progress';
|
||||||
@import './buttons';
|
@import './buttons';
|
||||||
@import './toggle-button';
|
|
||||||
@import './secret-button';
|
@import './secret-button';
|
||||||
@import './tabs';
|
@import './tabs';
|
||||||
@import './pill';
|
@import './pill';
|
||||||
|
|
@ -31,4 +30,5 @@
|
||||||
@import './feedback-dialog';
|
@import './feedback-dialog';
|
||||||
@import './modal-dialog';
|
@import './modal-dialog';
|
||||||
@import './notice';
|
@import './notice';
|
||||||
@import './with-tooltip';
|
@import './tooltip';
|
||||||
|
@import './sort-control';
|
||||||
|
|
|
||||||
|
|
@ -20,10 +20,6 @@
|
||||||
%modal-window > header {
|
%modal-window > header {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
%modal-window.warning > header {
|
|
||||||
@extend %with-warning;
|
|
||||||
text-indent: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
%modal-window > header [for='modal_close'] {
|
%modal-window > header [for='modal_close'] {
|
||||||
@extend %bg-icon;
|
@extend %bg-icon;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
.notice.warning {
|
||||||
@extend %notice-warning;
|
@extend %notice-warning;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import './pill/index';
|
@import '../base/components/pill/index';
|
||||||
td strong,
|
td strong,
|
||||||
%tag-list span {
|
%tag-list span {
|
||||||
@extend %pill;
|
@extend %pill;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
%pill {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 5px;
|
|
||||||
}
|
|
||||||
%pill button {
|
|
||||||
padding: 0;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -40,12 +40,13 @@ html.template-loading main > div {
|
||||||
}
|
}
|
||||||
/* toggleable toolbar for short screens */
|
/* toggleable toolbar for short screens */
|
||||||
[for='toolbar-toggle'] {
|
[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;
|
color: $blue-500;
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: 15px;
|
|
||||||
top: -3px;
|
|
||||||
}
|
}
|
||||||
#toolbar-toggle {
|
#toolbar-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -55,10 +56,18 @@ html.template-loading main > div {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// reduced search magnifying icon layout
|
||||||
@media #{$--lt-horizontal-selects} {
|
@media #{$--lt-horizontal-selects} {
|
||||||
%app-view header h1 {
|
%app-view header h1 {
|
||||||
display: inline-block;
|
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 + * {
|
#toolbar-toggle + * {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
4
ui-v2/app/styles/components/sort-control.scss
Normal file
4
ui-v2/app/styles/components/sort-control.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@import '../base/components/sort-control/index';
|
||||||
|
.sort-control {
|
||||||
|
@extend %sort-control;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue