Skip to content

GitLab

Commit 261196a8 authored by Max Reeves's avatar Max Reeves
Browse files

reskin

parent e65f5d57
Expand all Hide whitespace changes
Inline Side-by-side
frontend/assets/bootstrap.min.css 0 → 100644
View file @ 261196a8
This diff is collapsed.
frontend/index.html
View file @ 261196a8
......@@ -7,6 +7,7 @@
<!-- <link rel="icon" type="image/png" href="/favicon.png" /> -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/assets/bootstrap.min.css">
<link rel="stylesheet" href="/react-widgets.css">
<script src="/dist/bundle.js" defer></script>
......
frontend/package-lock.json
View file @ 261196a8
......@@ -2155,6 +2155,12 @@
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
},
"klona": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.3.tgz",
"integrity": "sha512-CgPOT3ZadDpXxKcfV56lEQ9OQSZ42Mk26gnozI+uN/k39vzD8toUhRQoqsX0m9Q3eMPEfsLWmtyUpK/yqST4yg==",
"dev": true
},
"loader-runner": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
......@@ -3033,6 +3039,76 @@
"ret": "~0.1.10"
}
},
"sass-loader": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.2.tgz",
"integrity": "sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==",
"dev": true,
"requires": {
"klona": "^2.0.3",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^2.7.1",
"semver": "^7.3.2"
},
"dependencies": {
"ajv": {
"version": "6.12.5",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
"integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
},
"json5": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
"dev": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
"integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.5",
"ajv": "^6.12.4",
"ajv-keywords": "^3.5.2"
}
},
"semver": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
"dev": true
}
}
},
"schema-utils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
......
frontend/package.json
View file @ 261196a8
......@@ -22,5 +22,7 @@
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"devDependencies": {}
"devDependencies": {
"sass-loader": "^10.0.2"
}
}
frontend/src/editor.jsx
View file @ 261196a8
......@@ -127,8 +127,8 @@ export function Editor({slug, selectedElementId}) {
</div>
</div>
<div class="side-bar-footer lefty-righty">
<button class="hollow" onClick={e => route('/')}>Home</button>
<button onClick={saveDashboard} class={ savingDashboard ? 'loading' : ''}>Save Dashboard</button>
<button class="btn btn-outline-primary " onClick={e => route('/')}>Home</button>
<button onClick={saveDashboard} class={ savingDashboard ? 'loading' : ''} class="rounded btn-primary btn-large">Save Dashboard</button>
</div>
</Fragment>
}
......@@ -353,13 +353,13 @@ function SidePanelSettings({dashboardDispatch, dashboard}) {
return <Fragment>
<label for="title">Title</label>
<input type="text" id="title" placeholder="Network Overview" value={dashboard.title}
<input class="form-control" type="text" id="title" placeholder="Network Overview" value={dashboard.title}
onInput={e => dashboardDispatch({type: 'setTitle', title: e.currentTarget.value})} />
<TagEditor tags={dashboard.tags} updateTags={tags => updateTags(tags)} />
<label for="background-image">Background Image {imgControls(dashboard.background)}</label>
<input id="background-image" type="file" placeholder="Upload a background image"
<input class="form-control" id="background-image" type="file" placeholder="Upload a background image"
accept="image/*" onChange={handleBackgroundImg}/>
</Fragment>
}
......@@ -409,9 +409,12 @@ function SidePanelElements({dashboard, dashboardDispatch, setHighlightedElementI
<div class="element-item" draggable={true} id={index} onDragStart={handleDragStart}>
<div onClick={ e => routeParam('selectedElementId', index.toString()) }>
<div class="element-title">{element.title}</div>
<span>
<button class="rounded btn-dark btn-sml m-1 medium" onClick={e => duplicateElement(e,index)}>Duplicate</button>
<button class="rounded btn-danger btn-sml m-1 medium" onClick={e => deleteElement(e,index)}>Delete</button>
</span>
</div>
<button onClick={e => deleteElement(e,index)}>Delete</button>
<button onClick={e => duplicateElement(e,index)}>Duplicate</button>
<div class="drop-zone" onDrop={handleDrop} id={index}
onDragEnter={e => {e.preventDefault(); e.currentTarget.classList.add('active')}}
onDragOver={e => e.preventDefault()}
......@@ -425,7 +428,7 @@ function SidePanelElements({dashboard, dashboardDispatch, setHighlightedElementI
return <Fragment>
<div class="lefty-righty spacer">
<h3>Elements</h3>
<button class="small hollow" onClick={addElement}>New</button>
<button class="small btn btn-outline-primary" onClick={addElement}>New</button>
</div>
<div class="element-list">
{elementList}
......@@ -472,7 +475,8 @@ export function ElementSettings({selectedElement, updateElement}) {
if(selectedElement.type === 'iframe-video') { ElementOptions = <IframeVideoOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
if(selectedElement.type === 'audio-stream') { ElementOptions = <AudioOptions updateOptions={updateElementOptions} options={selectedElement.options}/>}
return <div class="editor settings-overlay">
return <div class="form-group">
<div class="editor settings-overlay">
<div class="options">
<div class="lefty-righty spacer">
<h3 class="no-margin">{selectedElement.title}</h3>
......@@ -482,11 +486,11 @@ export function ElementSettings({selectedElement, updateElement}) {
</div>
<div class="settings">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Cool Element" value={selectedElement.title}
<input class="form-control" id="name" type="text" placeholder="Cool Element" value={selectedElement.title}
onInput={e => updateElement({...selectedElement, title: e.currentTarget.value})} />
<label>Visual Type</label>
<select name="item-type" value={selectedElement.type} onInput={updateType}>
<select class="form-control" name="item-type" value={selectedElement.type} onInput={updateType}>
<option value="check-card">Icinga Card</option>
<option value="check-svg">Icinga SVG</option>
<option value="check-image">Icinga Image</option>
......@@ -503,4 +507,5 @@ export function ElementSettings({selectedElement, updateElement}) {
</div>
</div>
</div>
</div>
}
\ No newline at end of file
frontend/src/elements/audio.jsx
View file @ 261196a8
......@@ -6,11 +6,11 @@ import * as meerkat from '../meerkat';
export function AudioOptions({options, updateOptions}) {
return <Fragment>
<label for="src">Source</label>
<input id="src" name="src" value={options.source}
<input class="form-control" id="src" name="src" value={options.source}
onInput={e => updateOptions({source: e.currentTarget.value})}>
</input>
<div>
<button>Render</button>
<button class="rounded btn-primary btn-large">Render</button>
</div>
</Fragment>
}
......
frontend/src/elements/card.jsx
View file @ 261196a8
......@@ -40,7 +40,7 @@ export function CheckCardOptions({options, updateOptions}) {
updateCheckId={checkId => updateOptions({checkId: checkId})} />
<label for="status-font-size">Status Font Size</label>
<input id="status-font-size" name="status-font-size" type="number" min="0"
<input class="form-control" id="status-font-size" name="status-font-size" type="number" min="0"
value={options.statusFontSize}
onInput={e => updateOptions({statusFontSize: e.currentTarget.value})}/>
</div>
......
frontend/src/elements/image.jsx
View file @ 261196a8
......@@ -35,19 +35,19 @@ export function CheckImageOptions({options, updateOptions}) {
updateCheckId={checkId => updateOptions({checkId: checkId})} />
<label for="ok-image">OK State Image {imgControls('okImage')}</label>
<input id="ok-image" name="ok-image" type="file"
<input class="form-control" id="ok-image" name="ok-image" type="file"
accept="image/*" onInput={e => handleImageUpload('okImage', e.target.files)}/>
<label for="warning-image">Warning State Image {imgControls('warningImage')}</label>
<input id="warning-image" name="warning-image" type="file"
<input class="form-control" id="warning-image" name="warning-image" type="file"
accept="image/*" onInput={e => handleImageUpload('warningImage', e.target.files)}/>
<label for="unknown-image">Unknown State Image {imgControls('unknownImage')}</label>
<input id="unknown-image" name="unknown-image" type="file"
<input class="form-control" id="unknown-image" name="unknown-image" type="file"
accept="image/*" onInput={e => handleImageUpload('unknownImage', e.target.files)}/>
<label for="critical-image">Critical State Image {imgControls('criticalImage')}</label>
<input id="critical-image" name="critical-image" type="file"
<input class="form-control" id="critical-image" name="critical-image" type="file"
accept="image/*" onInput={e => handleImageUpload('criticalImage', e.target.files)}/>
</Fragment>
}
......
frontend/src/elements/line.jsx
View file @ 261196a8
......@@ -11,18 +11,18 @@ export function CheckLineOptions({options, updateOptions}) {
updateCheckId={checkId => updateOptions({checkId: checkId})} />
<label for="stroke-width">Stroke width</label>
<input id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
<input class="form-control" id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
onInput={e => updateOptions({strokeWidth: Number(e.currentTarget.value)})}/>
<label>Render Arrows</label>
<div class="left spacer">
<input id="left-arrow" type="checkbox" checked={options.leftArrow}
<input class="form-control" id="left-arrow" type="checkbox" checked={options.leftArrow}
onClick={e => updateOptions({leftArrow: e.currentTarget.checked})}/>
<label for="left-arrow" class="no-margin" style="font-weight: normal">Left</label>
</div>
<div class="left spacer">
<input id="right-arrow" type="checkbox" checked={options.rightArrow}
<input class="form-control" id="right-arrow" type="checkbox" checked={options.rightArrow}
onClick={e => updateOptions({rightArrow: e.currentTarget.checked})}/>
<label for="right-arrow" class="no-margin" style="font-weight: normal">Right</label>
</div>
......
frontend/src/elements/svg.jsx
View file @ 261196a8
......@@ -22,54 +22,54 @@ export function CheckSVGOptions({options, updateOptions}) {
updateCheckId={checkId => updateOptions({checkId: checkId})} />
<label for="okSvg">OK SVG</label>
<select id="okSvg" name="okSvg" value={options.okSvg}
<select class="form-control" id="okSvg" name="okSvg" value={options.okSvg}
onInput={e => updateOptions({okSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="ok-stroke-color">OK Stroke color <a onClick={e => clearField(e, 'okStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="ok-stroke-color" id="ok-stroke-color" value={options.okStrokeColor}
<input class="form-control" type="color" name="ok-stroke-color" id="ok-stroke-color" value={options.okStrokeColor}
onInput={e => updateOptions({okStrokeColor: e.currentTarget.value})}/>
<input type="text" value={options.okStrokeColor} disabled />
<input class="form-control" type="text" value={options.okStrokeColor} disabled />
</div>
<hr />
<label for="warningSvg">Warning SVG</label>
<select id="warningSvg" name="warningSvg" value={options.warningSvg}
<select class="form-control" id="warningSvg" name="warningSvg" value={options.warningSvg}
onInput={e => updateOptions({warningSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="warning-stroke-color">Warning Stroke color <a onClick={e => clearField(e, 'warningStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="warning-stroke-color" id="warning-stroke-color" value={options.warningStrokeColor}
<input class="form-control" type="color" name="warning-stroke-color" id="warning-stroke-color" value={options.warningStrokeColor}
onInput={e => updateOptions({warningStrokeColor: e.currentTarget.value})}/>
<input type="text" value={options.warningStrokeColor} disabled />
<input class="form-control" type="text" value={options.warningStrokeColor} disabled />
</div>
<hr />
<label for="unknownSvg">Unknown SVG</label>
<select id="unknownSvg" name="unknownSvg" value={options.unknownSvg}
<select class="form-control" id="unknownSvg" name="unknownSvg" value={options.unknownSvg}
onInput={e => updateOptions({unknownSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="unknown-stroke-color">Unknown Stroke color <a onClick={e => clearField(e, 'unknownStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="unknown-stroke-color" id="unknown-stroke-color" value={options.unknownStrokeColor}
<input class="form-control" type="color" name="unknown-stroke-color" id="unknown-stroke-color" value={options.unknownStrokeColor}
onInput={e => updateOptions({unknownStrokeColor: e.currentTarget.value})}/>
<input type="text" value={options.unknownStrokeColor} disabled />
<input class="form-control" type="text" value={options.unknownStrokeColor} disabled />
</div>
<hr />
<label for="criticalSvg">Critical SVG</label>
<select id="criticalSvg" name="criticalSvg" value={options.criticalSvg}
<select class="form-control" id="criticalSvg" name="criticalSvg" value={options.criticalSvg}
onInput={e => updateOptions({criticalSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="critical-stroke-color">Critical Stroke color <a onClick={e => clearField(e, 'criticalStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="critical-stroke-color" id="critical-stroke-color" value={options.criticalStrokeColor}
<input class="form-control" type="color" name="critical-stroke-color" id="critical-stroke-color" value={options.criticalStrokeColor}
onInput={e => updateOptions({criticalStrokeColor: e.currentTarget.value})}/>
<input type="text" value={options.criticalStrokeColor} disabled />
<input class="form-control" type="text" value={options.criticalStrokeColor} disabled />
</div>
</div>
}
......
frontend/src/elements/video.jsx
View file @ 261196a8
......@@ -7,11 +7,11 @@ import * as meerkat from '../meerkat';
export function IframeVideoOptions({options, updateOptions}) {
return <Fragment>
<label for="src">Source</label>
<input id="src" name="src" value={options.source}
<input class="form-control" id="src" name="src" value={options.source}
onInput={e => updateOptions({source: e.currentTarget.value})}>
</input>
<div>
<button>Render</button>
<button class="rounded btn-primary btn-large">Render</button>
</div>
</Fragment>
}
......
frontend/src/home.jsx
View file @ 261196a8
......@@ -15,7 +15,7 @@ function CopyTextBox({text}) {
}
return <div class="copy-box" onClick={handleClick}>
<input ref={ref} type="text" value={text} readOnly/>
<input class="form-control" ref={ref} type="text" value={text} readOnly/>
<svg class="feather">
<use xlinkHref={`/res/svgs/feather-sprite.svg#copy`}/>
</svg>
......@@ -56,19 +56,19 @@ function CreateDashboardModal({hide}) {
}
return <div class="modal-wrap" onMouseDown={hide}>
<div class="modal" onMouseDown={e => e.stopPropagation()}>
<div class="modal-fixed" onMouseDown={e => e.stopPropagation()}>
<h3>Create Dashboard</h3>
<form onSubmit={createDashboard}>
<label for="title">Title</label>
<input id="title" name="title" type="text" placeholder="New Dashboard"
<input class="form-control" id="title" name="title" type="text" placeholder="New Dashboard"
value={title} onInput={e => setTitle(e.currentTarget.value)} />
<label>Result url</label>
<CopyTextBox text={window.location.host + '/view/' + titleToSlug(title)} />
<div class="right" style="margin-top: 20px">
<button type="submit">Create</button>
<button class="rounded btn-primary btn-large" type="submit">Create</button>
</div>
</form>
</div>
......@@ -124,11 +124,11 @@ export function Home() {
<h1 class="title">Meerkat</h1>
<div class="center" style="margin: 20px 0 40px;">
<button onClick={e => setShowModal(true)}>Create New Dashboard</button>
<button class="rounded btn-primary btn-large" onClick={e => setShowModal(true)}>Create New Dashboard</button>
</div>
<div class="filter-wrap">
<input type="text" id="filter" onInput={e => setFilter(e.currentTarget.value)} placeholder="Filter dashboards" />
<input class="form-control" type="text" id="filter" onInput={e => setFilter(e.currentTarget.value)} placeholder="Filter dashboards" />
</div>
<div class="filter-results">
......
frontend/src/statics/image.jsx
View file @ 261196a8
......@@ -34,7 +34,7 @@ export function StaticImageOptions({options, updateOptions}) {
return <Fragment>
<label for="image">Image {imgControls('image')}</label>
<input id="image" name="image" type="file"
<input class="form-control" id="image" name="image" type="file"
accept="image/*" onInput={handleImageUpload}/>
</Fragment>
}
......
frontend/src/statics/svg.jsx
View file @ 261196a8
......@@ -15,20 +15,20 @@ export function StaticSVGOptions({options, updateOptions}) {
return <Fragment>
<label for="svg">SVG</label>
<select id="svg" name="svg" value={options.svg}
<select class="form-control" id="svg" name="svg" value={options.svg}
onInput={e => updateOptions({svg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="stroke-color">Stroke color <a onClick={e => clearField(e, 'strokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
<input class="form-control" type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
onInput={e => updateOptions({strokeColor: e.currentTarget.value})}/>
<input type="text" value={options.strokeColor} disabled />
<input class="form-control" type="text" value={options.strokeColor} disabled />
</div>
<label for="stroke-width">Stroke width</label>
<input id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
<input class="form-control" id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
onInput={e => updateOptions({strokeWidth: e.currentTarget.value})}/>
</Fragment>
}
......
frontend/src/statics/text.jsx
View file @ 261196a8
......@@ -11,12 +11,12 @@ export function StaticTextOptions({options, updateOptions}) {
return <Fragment>
<label for="text">Text</label>
<textarea id="text" name="text" value={options.text}
<textarea class="form-control" id="text" name="text" value={options.text}
onInput={e => updateOptions({text: e.currentTarget.value})}>
</textarea>
<label for="font-size">Font Size</label>
<input id="font-size" name="font-size" type="number" min="0" value={options.fontSize}
<input class="form-control" id="font-size" name="font-size" type="number" min="0" value={options.fontSize}
onInput={e => updateOptions({fontSize: e.currentTarget.value})}/>
<label>Text Alignment</label>
......@@ -41,16 +41,16 @@ export function StaticTextOptions({options, updateOptions}) {
<label for="font-color">Font Color <a onClick={e => clearField(e, 'fontColor')}>clear</a></label>
<div class="lefty-righty spacer">
<input id="font-color" name="font-color" type="color" value={options.fontColor}
<input class="form-control" id="font-color" name="font-color" type="color" value={options.fontColor}
onInput={e => updateOptions({fontColor: e.currentTarget.value})}/>
<input type="text" value={options.fontColor} disabled/>
<input class="form-control" type="text" value={options.fontColor} disabled/>
</div>
<label for="background-color">Background Color <a onClick={e => clearField(e, 'backgroundColor')}>clear</a></label>
<div class="lefty-righty spacer">
<input id="background-color" name="background-color" type="color" value={options.backgroundColor}
<input class="form-control" id="background-color" name="background-color" type="color" value={options.backgroundColor}
onInput={e => updateOptions({backgroundColor: e.currentTarget.value})}/>
<input type="text" value={options.backgroundColor} disabled/>
<input class="form-control" type="text" value={options.backgroundColor} disabled/>
</div>
</Fragment>
}
......@@ -86,5 +86,5 @@ export const StaticTextDefaults = {
fontColor: '#ffffff',
textAlign: 'center',
textVerticalAlign: 'center',
backgroundColor: '#ff5400'
backgroundColor: '#007bff'
}
\ No newline at end of file
frontend/src/util.jsx
View file @ 261196a8
......@@ -109,9 +109,9 @@ export function TagEditor({tags, updateTags}) {
}
const tagElements = tags.map((tag, i) => {
return <div class="pill tag">
return <div class="pill tag btn-dark">
<span>{tag}</span>
<span class="close" onClick={e => removeTag(i)}>x</span>
<span class="close-icon" onClick={e => removeTag(i)}>x</span>
</div>
})
......@@ -119,7 +119,7 @@ export function TagEditor({tags, updateTags}) {
<form onSubmit={addTag}>
<label for="add-tag">Tags <span class="subtle tiny">Enter to submit</span></label>
{tagElements}
<input type="text" id="add-tag" name="add-tag" ref={inputRef} placeholder="Enter a new tag"
<input class="form-control" type="text" id="add-tag" name="add-tag" ref={inputRef} placeholder="Enter a new tag"
pattern="[a-z\d\-_]+" title="only lower case letters, numbers, '-' and '_' are allowed"/>
</form>
</Fragment>
......
frontend/style.css
View file @ 261196a8
......@@ -18,6 +18,10 @@
--color-icinga-yellow: #fa4;
}
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@font-face {
font-family: 'Nunito';
font-style: normal;
......@@ -177,9 +181,10 @@ label {
label~input, label~select, label~textarea {
margin-bottom: 15px;
}
.element-title {
/* display: inline-block; */
padding-right: 6em;
display: inline-block;
padding-right: 2em;
}
button {
......@@ -194,10 +199,6 @@ button {
display: inline-block;
}
button:hover, button:focus {
background-color: var(--color-orange);
}
button.loading, div.loading {
display: flex;
align-items: center;
......@@ -228,15 +229,10 @@ button.small {
text-transform: uppercase;
}
button.hollow {
border: solid 1px var(--color-dark-orange);
color: var(--color-orange);
background-color: transparent;
}
button.hollow:hover, button.hollow:focus {
color: var(--color-orange);
border-color: var(--color-orange);
button.medium {
padding: 6px 10px;
font-size: 14px;
text-transform: uppercase;
}
div.small {
......@@ -307,24 +303,24 @@ label~div.selection {
div.selection > .selector {
padding: 4px 8px;
background-color: white;
border: solid 1.5px var(--color-gray);
border: solid 1.5px #ced4da;
border-left: 0;
cursor: pointer;
color: var(--color-black);
border-radius: 0;
border-radius: 1px;
}
div.selection > .selector:hover {
background-color: #eee;
}
div.selection > .selector.active {
background-color: var(--color-light-orange);
background-color: #007bff;
color: white;
}
div.selection > .selector:first-child {
border-radius: 3px 0 0 3px;
border: solid 1.5px var(--color-gray);
border: solid 1.5px #ced4da;
}
div.selection > .selector:last-child {
......@@ -370,7 +366,7 @@ div.modal-wrap {
animation-duration: 300ms;
}
div.modal-wrap .modal {