From 6476a205a46e76c9ecbcbf792e18b7bc2bf90a5b Mon Sep 17 00:00:00 2001 From: "Navy.gif" Date: Tue, 9 May 2023 21:59:57 +0300 Subject: [PATCH] Role selector WIP flags page WIP --- src/@types/ApiStructures.ts | 14 +- src/@types/Components.ts | 3 +- src/App.tsx | 3 +- .../{Selectors.tsx => InputElements.tsx} | 19 +- src/css/chota.min.css | 1200 ++++++++++++++++- src/css/components/InputElements.css | 3 + src/css/components/Selectors.css | 0 src/pages/Admin.tsx | 4 +- src/pages/admin/Flags.tsx | 69 + src/pages/admin/Roles.tsx | 2 +- src/pages/admin/Users.tsx | 10 +- src/pages/home/Profile.tsx | 2 +- 12 files changed, 1310 insertions(+), 19 deletions(-) rename src/components/{Selectors.tsx => InputElements.tsx} (87%) create mode 100644 src/css/components/InputElements.css delete mode 100644 src/css/components/Selectors.css create mode 100644 src/pages/admin/Flags.tsx diff --git a/src/@types/ApiStructures.ts b/src/@types/ApiStructures.ts index d6fd9b0..65d9ff6 100644 --- a/src/@types/ApiStructures.ts +++ b/src/@types/ApiStructures.ts @@ -52,4 +52,16 @@ export type Application = { export type Role = { position: number, rateLimits: RateLimits -} & APIEntity \ No newline at end of file +} & APIEntity + +type FlagType = string | number | boolean | number[] | null +type FlagEnv = 'test' | 'prod' +type FlagConsumer = 'client' | 'server' | 'api' + +export type Flag = { + id: string, + name: string, + env: FlagEnv, + consumer: FlagConsumer, + value: FlagType +} \ No newline at end of file diff --git a/src/@types/Components.ts b/src/@types/Components.ts index 10d24de..99cdc5f 100644 --- a/src/@types/Components.ts +++ b/src/@types/Components.ts @@ -1,5 +1,6 @@ export type DropdownBaseProps = { - children: React.ReactNode + children: React.ReactNode, + className?: string } export type DropdownItemProps = { diff --git a/src/App.tsx b/src/App.tsx index e3a8c0c..ca3341e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,7 +49,8 @@ function App() { { to: '/admin', label: 'Admin', items: [ { to: '/users', label: 'Users', relative: true }, - { to: '/roles', label: 'Roles', relative: true } + { to: '/roles', label: 'Roles', relative: true }, + { to: '/flags', label: 'Flags', relative: true } ] } ]; diff --git a/src/components/Selectors.tsx b/src/components/InputElements.tsx similarity index 87% rename from src/components/Selectors.tsx rename to src/components/InputElements.tsx index 2a06307..066337e 100644 --- a/src/components/Selectors.tsx +++ b/src/components/InputElements.tsx @@ -1,7 +1,7 @@ import React, { Children, useRef, useState } from "react"; import ClickDetector from "../util/ClickDetector"; import { DropdownBaseProps, DropdownItemProps } from "../@types/Components"; -import '../css/components/Selectors.css'; +import '../css/components/InputElements.css'; export const FileSelector = ({ cb }: { cb: (file: File) => void }) => { @@ -62,8 +62,12 @@ export const VerticalToggleSwitch = ({ value, onChange, ref, children }:

; }; -const DropdownHeader = ({ children }: DropdownBaseProps) => { - return +export const NumberInput = () => { + // +}; + +const DropdownHeader = ({ children, className = '' }: DropdownBaseProps) => { + return {children} ; }; @@ -83,7 +87,7 @@ const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps) }; const DropdownItemList = ({ children }: DropdownBaseProps) => { - return
+ return
{children}
; }; @@ -92,10 +96,11 @@ type DropdownProps = { name?: string, multi?: boolean, selection?: [], - children: React.ReactNode[] + children: React.ReactNode[], + className?: string } -const DropdownComp = ({ children }: DropdownProps) => { +const DropdownComp = ({ children, className = '' }: DropdownProps) => { if (!children) throw new Error('Missing children'); @@ -108,7 +113,7 @@ const DropdownComp = ({ children }: DropdownProps) => { return { if (detailsRef.current) detailsRef.current.open = false; }}> -
+
{children}
; diff --git a/src/css/chota.min.css b/src/css/chota.min.css index e079919..f44d2fa 100644 --- a/src/css/chota.min.css +++ b/src/css/chota.min.css @@ -1 +1,1199 @@ -/*! chota.css v0.8.0 | MIT License | github.com/jenil/chota */:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#14854f;--color-lightGrey:#d2d6dd;--color-grey:#747681;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}*{scrollbar-color:var(--color-lightGrey) var(--bg-primary);scrollbar-width:thin}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-lightGrey)}body{background-color:var(--bg-color);color:var(--font-color);font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family-sans);font-size:var(--font-size);line-height:1.6;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--color-primary);text-decoration:none}a:hover:not(.button){opacity:.75}button{font-family:inherit}p{margin-top:0}blockquote{background-color:var(--bg-secondary-color);border-left:3px solid var(--color-lightGrey);padding:1.5rem 2rem}dl dt{font-weight:700}hr{background-color:var(--color-lightGrey);height:1px;margin:1rem 0}hr,table{border:none}table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}table.striped tr:nth-of-type(2n){background-color:var(--bg-secondary-color)}td,th{padding:1.2rem .4rem;vertical-align:middle}thead{border-bottom:2px solid var(--color-lightGrey)}tfoot{border-top:2px solid var(--color-lightGrey)}code,kbd,pre,samp,tt{font-family:var(--font-family-mono)}code,kbd{border-radius:4px;color:var(--color-error);font-size:90%;padding:.2em .4em;white-space:pre-wrap}code,kbd,pre{background-color:var(--bg-secondary-color)}pre{font-size:1em;overflow-x:auto;padding:1rem}pre code{background:none;padding:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--color-lightGrey)}iframe{border:0}.container{margin:0 auto;max-width:var(--grid-maxWidth);padding:0 calc(var(--grid-gutter)/2);width:96%}.row{-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.row,.row.reverse{-webkit-box-orient:horizontal}.row.reverse{-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col{-webkit-box-flex:1;-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc(8.33333% - var(--grid-gutter));flex:0 0 calc(8.33333% - var(--grid-gutter));max-width:calc(8.33333% - var(--grid-gutter))}.col-1,.col-2{-webkit-box-flex:0}.col-2{-ms-flex:0 0 calc(16.66667% - var(--grid-gutter));flex:0 0 calc(16.66667% - var(--grid-gutter));max-width:calc(16.66667% - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc(25% - var(--grid-gutter));flex:0 0 calc(25% - var(--grid-gutter));max-width:calc(25% - var(--grid-gutter))}.col-3,.col-4{-webkit-box-flex:0}.col-4{-ms-flex:0 0 calc(33.33333% - var(--grid-gutter));flex:0 0 calc(33.33333% - var(--grid-gutter));max-width:calc(33.33333% - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc(41.66667% - var(--grid-gutter));flex:0 0 calc(41.66667% - var(--grid-gutter));max-width:calc(41.66667% - var(--grid-gutter))}.col-5,.col-6{-webkit-box-flex:0}.col-6{-ms-flex:0 0 calc(50% - var(--grid-gutter));flex:0 0 calc(50% - var(--grid-gutter));max-width:calc(50% - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc(58.33333% - var(--grid-gutter));flex:0 0 calc(58.33333% - var(--grid-gutter));max-width:calc(58.33333% - var(--grid-gutter))}.col-7,.col-8{-webkit-box-flex:0}.col-8{-ms-flex:0 0 calc(66.66667% - var(--grid-gutter));flex:0 0 calc(66.66667% - var(--grid-gutter));max-width:calc(66.66667% - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc(75% - var(--grid-gutter));flex:0 0 calc(75% - var(--grid-gutter));max-width:calc(75% - var(--grid-gutter))}.col-10,.col-9{-webkit-box-flex:0}.col-10{-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-11,.col-12{-webkit-box-flex:0}.col-12{-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}@media screen and (max-width:599px){.container{width:100%}.col,[class*=col-],[class^=col-]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}@media screen and (min-width:900px){.col-1-md{-webkit-box-flex:0;-ms-flex:0 0 calc(8.33333% - var(--grid-gutter));flex:0 0 calc(8.33333% - var(--grid-gutter));max-width:calc(8.33333% - var(--grid-gutter))}.col-2-md{-webkit-box-flex:0;-ms-flex:0 0 calc(16.66667% - var(--grid-gutter));flex:0 0 calc(16.66667% - var(--grid-gutter));max-width:calc(16.66667% - var(--grid-gutter))}.col-3-md{-webkit-box-flex:0;-ms-flex:0 0 calc(25% - var(--grid-gutter));flex:0 0 calc(25% - var(--grid-gutter));max-width:calc(25% - var(--grid-gutter))}.col-4-md{-webkit-box-flex:0;-ms-flex:0 0 calc(33.33333% - var(--grid-gutter));flex:0 0 calc(33.33333% - var(--grid-gutter));max-width:calc(33.33333% - var(--grid-gutter))}.col-5-md{-webkit-box-flex:0;-ms-flex:0 0 calc(41.66667% - var(--grid-gutter));flex:0 0 calc(41.66667% - var(--grid-gutter));max-width:calc(41.66667% - var(--grid-gutter))}.col-6-md{-webkit-box-flex:0;-ms-flex:0 0 calc(50% - var(--grid-gutter));flex:0 0 calc(50% - var(--grid-gutter));max-width:calc(50% - var(--grid-gutter))}.col-7-md{-webkit-box-flex:0;-ms-flex:0 0 calc(58.33333% - var(--grid-gutter));flex:0 0 calc(58.33333% - var(--grid-gutter));max-width:calc(58.33333% - var(--grid-gutter))}.col-8-md{-webkit-box-flex:0;-ms-flex:0 0 calc(66.66667% - var(--grid-gutter));flex:0 0 calc(66.66667% - var(--grid-gutter));max-width:calc(66.66667% - var(--grid-gutter))}.col-9-md{-webkit-box-flex:0;-ms-flex:0 0 calc(75% - var(--grid-gutter));flex:0 0 calc(75% - var(--grid-gutter));max-width:calc(75% - var(--grid-gutter))}.col-10-md{-webkit-box-flex:0;-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11-md{-webkit-box-flex:0;-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-12-md{-webkit-box-flex:0;-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}}@media screen and (min-width:1200px){.col-1-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(8.33333% - var(--grid-gutter));flex:0 0 calc(8.33333% - var(--grid-gutter));max-width:calc(8.33333% - var(--grid-gutter))}.col-2-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(16.66667% - var(--grid-gutter));flex:0 0 calc(16.66667% - var(--grid-gutter));max-width:calc(16.66667% - var(--grid-gutter))}.col-3-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(25% - var(--grid-gutter));flex:0 0 calc(25% - var(--grid-gutter));max-width:calc(25% - var(--grid-gutter))}.col-4-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(33.33333% - var(--grid-gutter));flex:0 0 calc(33.33333% - var(--grid-gutter));max-width:calc(33.33333% - var(--grid-gutter))}.col-5-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(41.66667% - var(--grid-gutter));flex:0 0 calc(41.66667% - var(--grid-gutter));max-width:calc(41.66667% - var(--grid-gutter))}.col-6-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(50% - var(--grid-gutter));flex:0 0 calc(50% - var(--grid-gutter));max-width:calc(50% - var(--grid-gutter))}.col-7-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(58.33333% - var(--grid-gutter));flex:0 0 calc(58.33333% - var(--grid-gutter));max-width:calc(58.33333% - var(--grid-gutter))}.col-8-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(66.66667% - var(--grid-gutter));flex:0 0 calc(66.66667% - var(--grid-gutter));max-width:calc(66.66667% - var(--grid-gutter))}.col-9-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(75% - var(--grid-gutter));flex:0 0 calc(75% - var(--grid-gutter));max-width:calc(75% - var(--grid-gutter))}.col-10-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-12-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}}fieldset{padding:.5rem 2rem}legend{font-size:.8em;letter-spacing:.1rem;text-transform:uppercase}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{border:1px solid var(--color-lightGrey);border-radius:4px;display:block;font-family:inherit;font-size:1em;padding:.8rem 1rem;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):not(:disabled):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:var(--color-grey)}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{border-color:var(--color-primary);-webkit-box-shadow:0 0 1px var(--color-primary);box-shadow:0 0 1px var(--color-primary);outline:none}input.error:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),textarea.error{border-color:var(--color-error)}input.success:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),textarea.success{border-color:var(--color-success)}select{-webkit-appearance:none;background:#f3f3f6 no-repeat 100%;background-image:url("data:image/svg+xml;utf8,");background-origin:content-box;background-size:1ex}[type=checkbox],[type=radio]{height:1.6rem;width:1.6rem}.button,[type=button],[type=reset],[type=submit],button{background:var(--color-lightGrey);border:1px solid transparent;border-radius:4px;color:var(--color-darkGrey);cursor:pointer;display:inline-block;font-size:var(--font-size);line-height:1;padding:1rem 2.5rem;text-align:center;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.grouped{display:-webkit-box;display:-ms-flexbox;display:flex}.grouped>:not(:last-child){margin-right:16px}.grouped.gapless>*{border-radius:0!important;margin:0 0 0 -1px!important}.grouped.gapless>:first-child{border-radius:4px 0 0 4px!important;margin:0!important}.grouped.gapless>:last-child{border-radius:0 4px 4px 0!important}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{-webkit-transform:scale(.98);transform:scale(.98)}button:disabled,button:disabled:hover,input:disabled,input:disabled:hover{cursor:not-allowed;opacity:.4}.button.dark,.button.error,.button.primary,.button.secondary,.button.success,[type=submit]{background-color:#000;background-color:var(--color-primary);color:#fff;z-index:1}.button.secondary{background-color:var(--color-grey)}.button.dark{background-color:var(--color-darkGrey)}.button.error{background-color:var(--color-error)}.button.success{background-color:var(--color-success)}.button.outline{background-color:transparent;border-color:var(--color-lightGrey)}.button.outline.primary{border-color:var(--color-primary);color:var(--color-primary)}.button.outline.secondary{border-color:var(--color-grey);color:var(--color-grey)}.button.outline.dark{border-color:var(--color-darkGrey);color:var(--color-darkGrey)}.button.clear{background-color:transparent;border-color:transparent;color:var(--color-primary)}.button.icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.button.icon>img{margin-left:2px}.button.icon-only{padding:1rem}::-webkit-input-placeholder{color:#bdbfc4}::-moz-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}::placeholder{color:#bdbfc4}.nav{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:5rem}.nav img{max-height:3rem}.nav-center,.nav-left,.nav-right,.nav>.container{display:-webkit-box;display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{-webkit-box-flex:1;-ms-flex:1;flex:1}.nav-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.nav-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.nav-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center}}.nav .brand,.nav a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-darkGrey);display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem 2rem;text-decoration:none}.nav .active:not(.button),.nav [aria-current=page]:not(.button){color:#000;color:var(--color-primary)}.nav .brand{font-size:1.75em;padding-bottom:0;padding-top:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{background:var(--bg-color);border-radius:4px;-webkit-box-shadow:0 1px 3px var(--color-grey);box-shadow:0 1px 3px var(--color-grey);padding:1rem 2rem}.card p:last-child{margin:0}.card header>*{margin-bottom:1rem;margin-top:0}.tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>.dropdown>summary,.tabs>a{-webkit-box-flex:0;border-bottom:2px solid var(--color-lightGrey);color:var(--color-darkGrey);-ms-flex:0 1 auto;flex:0 1 auto;padding:1rem 2rem;text-align:center}.tabs>a.active,.tabs>a:hover,.tabs>a[aria-current=page]{border-bottom:2px solid var(--color-darkGrey);opacity:1}.tabs>a.active,.tabs>a[aria-current=page]{border-color:var(--color-primary)}.tabs.is-full a{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.tag{border:1px solid var(--color-lightGrey);color:var(--color-grey);display:inline-block;letter-spacing:.5px;line-height:1;padding:.5rem;text-transform:uppercase}.tag.is-small{font-size:.75em;padding:.4rem}.tag.is-large{font-size:1.125em;padding:.7rem}.tag+.tag{margin-left:1rem}details.dropdown{display:inline-block;position:relative}details.dropdown>:last-child{left:0;position:absolute;white-space:nowrap}.bg-primary{background-color:var(--color-primary)!important}.bg-light{background-color:var(--color-lightGrey)!important}.bg-dark{background-color:var(--color-darkGrey)!important}.bg-grey{background-color:var(--color-grey)!important}.bg-error{background-color:var(--color-error)!important}.bg-success{background-color:var(--color-success)!important}.bd-primary{border:1px solid var(--color-primary)!important}.bd-light{border:1px solid var(--color-lightGrey)!important}.bd-dark{border:1px solid var(--color-darkGrey)!important}.bd-grey{border:1px solid var(--color-grey)!important}.bd-error{border:1px solid var(--color-error)!important}.bd-success{border:1px solid var(--color-success)!important}.text-primary{color:var(--color-primary)!important}.text-light{color:var(--color-lightGrey)!important}.text-dark{color:var(--color-darkGrey)!important}.text-grey{color:var(--color-grey)!important}.text-error{color:var(--color-error)!important}.text-success{color:var(--color-success)!important}.text-white{color:#fff!important}.pull-right{float:right!important}.pull-left{float:left!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.is-full-screen{min-height:100vh;width:100%}.is-full-width{width:100%!important}.is-vertical-align{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-center,.is-horizontal-align{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.is-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-left,.is-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.is-pointer{cursor:pointer!important}.is-rounded{border-radius:100%}.clearfix{clear:both;content:"";display:table}.is-hidden{display:none!important}@media screen and (max-width:599px){.hide-xs{display:none!important}}@media screen and (min-width:600px) and (max-width:899px){.hide-sm{display:none!important}}@media screen and (min-width:900px) and (max-width:1199px){.hide-md{display:none!important}}@media screen and (min-width:1200px){.hide-lg{display:none!important}}@media print{.hide-pr{display:none!important}} \ No newline at end of file +/*! chota.css v0.8.0 | MIT License | github.com/jenil/chota */ +:root { + --bg-color: #fff; + --bg-secondary-color: #f3f3f6; + --color-primary: #14854f; + --color-lightGrey: #d2d6dd; + --color-grey: #747681; + --color-darkGrey: #3f4144; + --color-error: #d43939; + --color-success: #28bd14; + --grid-maxWidth: 120rem; + --grid-gutter: 2rem; + --font-size: 1.6rem; + --font-color: #333; + --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + --font-family-mono: monaco, "Consolas", "Lucida Console", monospace +} + +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.15 +} + +*, +:after, +:before { + -webkit-box-sizing: inherit; + box-sizing: inherit +} + +* { + scrollbar-color: var(--color-lightGrey) var(--bg-primary); + scrollbar-width: thin +} + +::-webkit-scrollbar { + width: 8px +} + +::-webkit-scrollbar-track { + background: var(--bg-primary) +} + +::-webkit-scrollbar-thumb { + background: var(--color-lightGrey) +} + +body { + background-color: var(--bg-color); + color: var(--font-color); + font-family: Segoe UI, Helvetica Neue, sans-serif; + font-family: var(--font-family-sans); + font-size: var(--font-size); + line-height: 1.6; + margin: 0; + padding: 0 +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; + margin: .35em 0 .7em +} + +h1 { + font-size: 2em +} + +h2 { + font-size: 1.75em +} + +h3 { + font-size: 1.5em +} + +h4 { + font-size: 1.25em +} + +h5 { + font-size: 1em +} + +h6 { + font-size: .85em +} + +a { + color: var(--color-primary); + text-decoration: none +} + +a:hover:not(.button) { + opacity: .75 +} + +button { + font-family: inherit +} + +p { + margin-top: 0 +} + +blockquote { + background-color: var(--bg-secondary-color); + border-left: 3px solid var(--color-lightGrey); + padding: 1.5rem 2rem +} + +dl dt { + font-weight: 700 +} + +hr { + background-color: var(--color-lightGrey); + height: 1px; + margin: 1rem 0 +} + +hr, +table { + border: none +} + +table { + border-collapse: collapse; + border-spacing: 0; + text-align: left; + width: 100% +} + +table.striped tr:nth-of-type(2n) { + background-color: var(--bg-secondary-color) +} + +td, +th { + padding: 1.2rem .4rem; + vertical-align: middle +} + +thead { + border-bottom: 2px solid var(--color-lightGrey) +} + +tfoot { + border-top: 2px solid var(--color-lightGrey) +} + +code, +kbd, +pre, +samp, +tt { + font-family: var(--font-family-mono) +} + +code, +kbd { + border-radius: 4px; + color: var(--color-error); + font-size: 90%; + padding: .2em .4em; + white-space: pre-wrap +} + +code, +kbd, +pre { + background-color: var(--bg-secondary-color) +} + +pre { + font-size: 1em; + overflow-x: auto; + padding: 1rem +} + +pre code { + background: none; + padding: 0 +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted +} + +img { + max-width: 100% +} + +fieldset { + border: 1px solid var(--color-lightGrey) +} + +iframe { + border: 0 +} + +.container { + margin: 0 auto; + max-width: var(--grid-maxWidth); + padding: 0 calc(var(--grid-gutter)/2); + width: 96% +} + +.row { + -webkit-box-direction: normal; + -webkit-box-pack: start; + -ms-flex-pack: start; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + justify-content: flex-start; + margin-left: calc(var(--grid-gutter)/-2); + margin-right: calc(var(--grid-gutter)/-2) +} + +.row, +.row.reverse { + -webkit-box-orient: horizontal +} + +.row.reverse { + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse +} + +.col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1 +} + +.col, +[class*=" col-"], +[class^=col-] { + margin: 0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2) +} + +.col-1 { + -ms-flex: 0 0 calc(8.33333% - var(--grid-gutter)); + flex: 0 0 calc(8.33333% - var(--grid-gutter)); + max-width: calc(8.33333% - var(--grid-gutter)) +} + +.col-1, +.col-2 { + -webkit-box-flex: 0 +} + +.col-2 { + -ms-flex: 0 0 calc(16.66667% - var(--grid-gutter)); + flex: 0 0 calc(16.66667% - var(--grid-gutter)); + max-width: calc(16.66667% - var(--grid-gutter)) +} + +.col-3 { + -ms-flex: 0 0 calc(25% - var(--grid-gutter)); + flex: 0 0 calc(25% - var(--grid-gutter)); + max-width: calc(25% - var(--grid-gutter)) +} + +.col-3, +.col-4 { + -webkit-box-flex: 0 +} + +.col-4 { + -ms-flex: 0 0 calc(33.33333% - var(--grid-gutter)); + flex: 0 0 calc(33.33333% - var(--grid-gutter)); + max-width: calc(33.33333% - var(--grid-gutter)) +} + +.col-5 { + -ms-flex: 0 0 calc(41.66667% - var(--grid-gutter)); + flex: 0 0 calc(41.66667% - var(--grid-gutter)); + max-width: calc(41.66667% - var(--grid-gutter)) +} + +.col-5, +.col-6 { + -webkit-box-flex: 0 +} + +.col-6 { + -ms-flex: 0 0 calc(50% - var(--grid-gutter)); + flex: 0 0 calc(50% - var(--grid-gutter)); + max-width: calc(50% - var(--grid-gutter)) +} + +.col-7 { + -ms-flex: 0 0 calc(58.33333% - var(--grid-gutter)); + flex: 0 0 calc(58.33333% - var(--grid-gutter)); + max-width: calc(58.33333% - var(--grid-gutter)) +} + +.col-7, +.col-8 { + -webkit-box-flex: 0 +} + +.col-8 { + -ms-flex: 0 0 calc(66.66667% - var(--grid-gutter)); + flex: 0 0 calc(66.66667% - var(--grid-gutter)); + max-width: calc(66.66667% - var(--grid-gutter)) +} + +.col-9 { + -ms-flex: 0 0 calc(75% - var(--grid-gutter)); + flex: 0 0 calc(75% - var(--grid-gutter)); + max-width: calc(75% - var(--grid-gutter)) +} + +.col-10, +.col-9 { + -webkit-box-flex: 0 +} + +.col-10 { + -ms-flex: 0 0 calc(83.33333% - var(--grid-gutter)); + flex: 0 0 calc(83.33333% - var(--grid-gutter)); + max-width: calc(83.33333% - var(--grid-gutter)) +} + +.col-11 { + -ms-flex: 0 0 calc(91.66667% - var(--grid-gutter)); + flex: 0 0 calc(91.66667% - var(--grid-gutter)); + max-width: calc(91.66667% - var(--grid-gutter)) +} + +.col-11, +.col-12 { + -webkit-box-flex: 0 +} + +.col-12 { + -ms-flex: 0 0 calc(100% - var(--grid-gutter)); + flex: 0 0 calc(100% - var(--grid-gutter)); + max-width: calc(100% - var(--grid-gutter)) +} + +@media screen and (max-width:599px) { + .container { + width: 100% + } + + .col, + [class*=col-], + [class^=col-] { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100% + } +} + +@media screen and (min-width:900px) { + .col-1-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.33333% - var(--grid-gutter)); + flex: 0 0 calc(8.33333% - var(--grid-gutter)); + max-width: calc(8.33333% - var(--grid-gutter)) + } + + .col-2-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.66667% - var(--grid-gutter)); + flex: 0 0 calc(16.66667% - var(--grid-gutter)); + max-width: calc(16.66667% - var(--grid-gutter)) + } + + .col-3-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - var(--grid-gutter)); + flex: 0 0 calc(25% - var(--grid-gutter)); + max-width: calc(25% - var(--grid-gutter)) + } + + .col-4-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.33333% - var(--grid-gutter)); + flex: 0 0 calc(33.33333% - var(--grid-gutter)); + max-width: calc(33.33333% - var(--grid-gutter)) + } + + .col-5-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.66667% - var(--grid-gutter)); + flex: 0 0 calc(41.66667% - var(--grid-gutter)); + max-width: calc(41.66667% - var(--grid-gutter)) + } + + .col-6-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - var(--grid-gutter)); + flex: 0 0 calc(50% - var(--grid-gutter)); + max-width: calc(50% - var(--grid-gutter)) + } + + .col-7-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.33333% - var(--grid-gutter)); + flex: 0 0 calc(58.33333% - var(--grid-gutter)); + max-width: calc(58.33333% - var(--grid-gutter)) + } + + .col-8-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.66667% - var(--grid-gutter)); + flex: 0 0 calc(66.66667% - var(--grid-gutter)); + max-width: calc(66.66667% - var(--grid-gutter)) + } + + .col-9-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - var(--grid-gutter)); + flex: 0 0 calc(75% - var(--grid-gutter)); + max-width: calc(75% - var(--grid-gutter)) + } + + .col-10-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.33333% - var(--grid-gutter)); + flex: 0 0 calc(83.33333% - var(--grid-gutter)); + max-width: calc(83.33333% - var(--grid-gutter)) + } + + .col-11-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.66667% - var(--grid-gutter)); + flex: 0 0 calc(91.66667% - var(--grid-gutter)); + max-width: calc(91.66667% - var(--grid-gutter)) + } + + .col-12-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - var(--grid-gutter)); + flex: 0 0 calc(100% - var(--grid-gutter)); + max-width: calc(100% - var(--grid-gutter)) + } +} + +@media screen and (min-width:1200px) { + .col-1-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.33333% - var(--grid-gutter)); + flex: 0 0 calc(8.33333% - var(--grid-gutter)); + max-width: calc(8.33333% - var(--grid-gutter)) + } + + .col-2-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.66667% - var(--grid-gutter)); + flex: 0 0 calc(16.66667% - var(--grid-gutter)); + max-width: calc(16.66667% - var(--grid-gutter)) + } + + .col-3-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - var(--grid-gutter)); + flex: 0 0 calc(25% - var(--grid-gutter)); + max-width: calc(25% - var(--grid-gutter)) + } + + .col-4-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.33333% - var(--grid-gutter)); + flex: 0 0 calc(33.33333% - var(--grid-gutter)); + max-width: calc(33.33333% - var(--grid-gutter)) + } + + .col-5-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.66667% - var(--grid-gutter)); + flex: 0 0 calc(41.66667% - var(--grid-gutter)); + max-width: calc(41.66667% - var(--grid-gutter)) + } + + .col-6-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - var(--grid-gutter)); + flex: 0 0 calc(50% - var(--grid-gutter)); + max-width: calc(50% - var(--grid-gutter)) + } + + .col-7-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.33333% - var(--grid-gutter)); + flex: 0 0 calc(58.33333% - var(--grid-gutter)); + max-width: calc(58.33333% - var(--grid-gutter)) + } + + .col-8-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.66667% - var(--grid-gutter)); + flex: 0 0 calc(66.66667% - var(--grid-gutter)); + max-width: calc(66.66667% - var(--grid-gutter)) + } + + .col-9-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - var(--grid-gutter)); + flex: 0 0 calc(75% - var(--grid-gutter)); + max-width: calc(75% - var(--grid-gutter)) + } + + .col-10-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.33333% - var(--grid-gutter)); + flex: 0 0 calc(83.33333% - var(--grid-gutter)); + max-width: calc(83.33333% - var(--grid-gutter)) + } + + .col-11-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.66667% - var(--grid-gutter)); + flex: 0 0 calc(91.66667% - var(--grid-gutter)); + max-width: calc(91.66667% - var(--grid-gutter)) + } + + .col-12-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - var(--grid-gutter)); + flex: 0 0 calc(100% - var(--grid-gutter)); + max-width: calc(100% - var(--grid-gutter)) + } +} + +fieldset { + padding: .5rem 2rem +} + +legend { + font-size: .8em; + letter-spacing: .1rem; + text-transform: uppercase +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), +select, +textarea, +textarea[type=text] { + border: 1px solid var(--color-lightGrey); + border-radius: 4px; + display: block; + font-family: inherit; + font-size: 1em; + padding: .8rem 1rem; + -webkit-transition: all .2s ease; + transition: all .2s ease; + width: 100% +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):not(:disabled):hover, +select:hover, +textarea:hover, +textarea[type=text]:hover { + border-color: var(--color-grey) +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus, +select:focus, +textarea:focus, +textarea[type=text]:focus { + border-color: var(--color-primary); + -webkit-box-shadow: 0 0 1px var(--color-primary); + box-shadow: 0 0 1px var(--color-primary); + outline: none +} + +input.error:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), +textarea.error { + border-color: var(--color-error) +} + +input.success:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), +textarea.success { + border-color: var(--color-success) +} + +select { + -webkit-appearance: none; + background: #f3f3f6 no-repeat 100%; + background-image: url("data:image/svg+xml;utf8,"); + background-origin: content-box; + background-size: 1ex +} + +[type=checkbox], +[type=radio] { + height: 1.6rem; + width: 1.6rem +} + +.button, +[type=button], +[type=reset], +[type=submit], +button { + background: var(--color-lightGrey); + border: 1px solid transparent; + border-radius: 4px; + color: var(--color-darkGrey); + cursor: pointer; + display: inline-block; + font-size: var(--font-size); + line-height: 1; + padding: 1rem 2.5rem; + text-align: center; + text-decoration: none; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity .2s ease; + transition: opacity .2s ease +} + +.grouped { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.grouped>:not(:last-child) { + margin-right: 16px +} + +.grouped.gapless>* { + border-radius: 0 !important; + margin: 0 0 0 -1px !important +} + +.grouped.gapless>:first-child { + border-radius: 4px 0 0 4px !important; + margin: 0 !important +} + +.grouped.gapless>:last-child { + border-radius: 0 4px 4px 0 !important +} + +.button+.button { + margin-left: 1rem +} + +.button:hover, +[type=button]:hover, +[type=reset]:hover, +[type=submit]:hover, +button:hover { + opacity: .8 +} + +.button:active, +[type=button]:active, +[type=reset]:active, +[type=submit]:active, +button:active { + -webkit-transform: scale(.98); + transform: scale(.98) +} + +button:disabled, +button:disabled:hover, +input:disabled, +input:disabled:hover { + cursor: not-allowed; + opacity: .4 +} + +.button.dark, +.button.error, +.button.primary, +.button.secondary, +.button.success, +[type=submit] { + background-color: #000; + background-color: var(--color-primary); + color: #fff; + z-index: 1 +} + +.button.secondary { + background-color: var(--color-grey) +} + +.button.dark { + background-color: var(--color-darkGrey) +} + +.button.error { + background-color: var(--color-error) +} + +.button.success { + background-color: var(--color-success) +} + +.button.outline { + background-color: transparent; + border-color: var(--color-lightGrey) +} + +.button.outline.primary { + border-color: var(--color-primary); + color: var(--color-primary) +} + +.button.outline.secondary { + border-color: var(--color-grey); + color: var(--color-grey) +} + +.button.outline.dark { + border-color: var(--color-darkGrey); + color: var(--color-darkGrey) +} + +.button.clear { + background-color: transparent; + border-color: transparent; + color: var(--color-primary) +} + +.button.icon { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex +} + +.button.icon>img { + margin-left: 2px +} + +.button.icon-only { + padding: 1rem +} + +::-webkit-input-placeholder { + color: #bdbfc4 +} + +::-moz-placeholder { + color: #bdbfc4 +} + +:-ms-input-placeholder { + color: #bdbfc4 +} + +::-ms-input-placeholder { + color: #bdbfc4 +} + +::placeholder { + color: #bdbfc4 +} + +.nav { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 5rem +} + +.nav img { + max-height: 3rem +} + +.nav-center, +.nav-left, +.nav-right, +.nav>.container { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.nav-center, +.nav-left, +.nav-right { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1 +} + +.nav-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start +} + +.nav-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end +} + +.nav-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +@media screen and (max-width:480px) { + + .nav, + .nav>.container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column + } + + .nav-center, + .nav-left, + .nav-right { + -webkit-box-pack: center; + -ms-flex-pack: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + justify-content: center + } +} + +.nav .brand, +.nav a { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: var(--color-darkGrey); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 1rem 2rem; + text-decoration: none +} + +.nav .active:not(.button), +.nav [aria-current=page]:not(.button) { + color: #000; + color: var(--color-primary) +} + +.nav .brand { + font-size: 1.75em; + padding-bottom: 0; + padding-top: 0 +} + +.nav .brand img { + padding-right: 1rem +} + +.nav .button { + margin: auto 1rem +} + +.card { + background: var(--bg-color); + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px var(--color-grey); + box-shadow: 0 1px 3px var(--color-grey); + padding: 1rem 2rem +} + +.card p:last-child { + margin: 0 +} + +.card header>* { + margin-bottom: 1rem; + margin-top: 0 +} + +.tabs { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.tabs a { + text-decoration: none +} + +.tabs>.dropdown>summary, +.tabs>a { + -webkit-box-flex: 0; + border-bottom: 2px solid var(--color-lightGrey); + color: var(--color-darkGrey); + -ms-flex: 0 1 auto; + flex: 0 1 auto; + padding: 1rem 2rem; + text-align: center +} + +.tabs>a.active, +.tabs>a:hover, +.tabs>a[aria-current=page] { + border-bottom: 2px solid var(--color-darkGrey); + opacity: 1 +} + +.tabs>a.active, +.tabs>a[aria-current=page] { + border-color: var(--color-primary) +} + +.tabs.is-full a { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto +} + +.tag { + border: 1px solid var(--color-lightGrey); + color: var(--color-grey); + display: inline-block; + letter-spacing: .5px; + line-height: 1; + padding: .5rem; + text-transform: uppercase +} + +.tag.is-small { + font-size: .75em; + padding: .4rem +} + +.tag.is-large { + font-size: 1.125em; + padding: .7rem +} + +.tag+.tag { + margin-left: 1rem +} + +details.dropdown { + display: inline-block; + position: relative +} + +details.dropdown>:last-child { + left: 0; + position: absolute; + white-space: nowrap +} + +.bg-primary { + background-color: var(--color-primary) !important +} + +.bg-light { + background-color: var(--color-lightGrey) !important +} + +.bg-dark { + background-color: var(--color-darkGrey) !important +} + +.bg-grey { + background-color: var(--color-grey) !important +} + +.bg-error { + background-color: var(--color-error) !important +} + +.bg-success { + background-color: var(--color-success) !important +} + +.bd-primary { + border: 1px solid var(--color-primary) !important +} + +.bd-light { + border: 1px solid var(--color-lightGrey) !important +} + +.bd-dark { + border: 1px solid var(--color-darkGrey) !important +} + +.bd-grey { + border: 1px solid var(--color-grey) !important +} + +.bd-error { + border: 1px solid var(--color-error) !important +} + +.bd-success { + border: 1px solid var(--color-success) !important +} + +.text-primary { + color: var(--color-primary) !important +} + +.text-light { + color: var(--color-lightGrey) !important +} + +.text-dark { + color: var(--color-darkGrey) !important +} + +.text-grey { + color: var(--color-grey) !important +} + +.text-error { + color: var(--color-error) !important +} + +.text-success { + color: var(--color-success) !important +} + +.text-white { + color: #fff !important +} + +.pull-right { + float: right !important +} + +.pull-left { + float: left !important +} + +.text-center { + text-align: center +} + +.text-left { + text-align: left +} + +.text-right { + text-align: right +} + +.text-justify { + text-align: justify +} + +.text-uppercase { + text-transform: uppercase +} + +.text-lowercase { + text-transform: lowercase +} + +.text-capitalize { + text-transform: capitalize +} + +.is-full-screen { + min-height: 100vh; + width: 100% +} + +.is-full-width { + width: 100% !important +} + +.is-vertical-align { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.is-center, +.is-horizontal-align { + -webkit-box-pack: center; + -ms-flex-pack: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: center +} + +.is-center { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.is-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end +} + +.is-left, +.is-right { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.is-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start +} + +.is-fixed { + position: fixed; + width: 100% +} + +.is-paddingless { + padding: 0 !important +} + +.is-marginless { + margin: 0 !important +} + +.is-pointer { + cursor: pointer !important +} + +.is-rounded { + border-radius: 100% +} + +.clearfix { + clear: both; + content: ""; + display: table +} + +.is-hidden { + display: none !important +} + +@media screen and (max-width:599px) { + .hide-xs { + display: none !important + } +} + +@media screen and (min-width:600px) and (max-width:899px) { + .hide-sm { + display: none !important + } +} + +@media screen and (min-width:900px) and (max-width:1199px) { + .hide-md { + display: none !important + } +} + +@media screen and (min-width:1200px) { + .hide-lg { + display: none !important + } +} + +@media print { + .hide-pr { + display: none !important + } +} \ No newline at end of file diff --git a/src/css/components/InputElements.css b/src/css/components/InputElements.css new file mode 100644 index 0000000..30844bb --- /dev/null +++ b/src/css/components/InputElements.css @@ -0,0 +1,3 @@ +.role-selector { + background-color: white; +} \ No newline at end of file diff --git a/src/css/components/Selectors.css b/src/css/components/Selectors.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx index ac98443..6c5584f 100644 --- a/src/pages/Admin.tsx +++ b/src/pages/Admin.tsx @@ -1,10 +1,11 @@ import React, { useState } from "react"; import { Route, Routes } from "react-router"; -import { FileSelector } from "../components/Selectors"; +import { FileSelector } from "../components/InputElements"; import '../css/pages/Admin.css'; import ErrorBoundary from "../util/ErrorBoundary"; import Roles from "./admin/Roles"; import Users from "./admin/Users"; +import Flags from "./admin/Flags"; const Main = () => { @@ -42,6 +43,7 @@ const Admin = () => { } /> } /> } /> + } /> ; }; diff --git a/src/pages/admin/Flags.tsx b/src/pages/admin/Flags.tsx new file mode 100644 index 0000000..f33dc8d --- /dev/null +++ b/src/pages/admin/Flags.tsx @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from "react"; +import { Flag as APIFlag } from "../../@types/ApiStructures"; +import { get } from "../../util/Util"; +import { ToggleSwitch } from "../../components/InputElements"; + +const inputTypes = { + boolean: ToggleSwitch + +}; + +const Flag = ({ flag }: { flag: APIFlag }) => { + + return
+

Name: {flag.name}

+

ID: {flag.id}

+

Environment: {flag.env}

+

Consumer: {flag.consumer}

+ +
; + +}; + +const FlagList = ({ flags, error }: { flags: APIFlag[], error: string | null }) => { + + console.log(flags); + return
+

Flags

+ {error &&

{error}

} + + {flags.map(flag => )} + +
; + +}; + +const CreateFlag = () => { + return
+

Create Flag

+ +
+ +
+
; +}; + +const Flags = () => { + + const [flags, setFlags] = useState([]); + const [error, setError] = useState(null); + + useEffect(() => { + (async () => { + const response = await get('/api/flags'); + if (!response.success) return setError(response.message as string); + setFlags(response.data as APIFlag[]); + })(); + }, []); + + return
+ + + + + +
; + +}; + +export default Flags; \ No newline at end of file diff --git a/src/pages/admin/Roles.tsx b/src/pages/admin/Roles.tsx index b623e0e..9405e61 100644 --- a/src/pages/admin/Roles.tsx +++ b/src/pages/admin/Roles.tsx @@ -7,7 +7,7 @@ import { Table, TableListEntry } from "../../components/Table"; import ErrorBoundary from "../../util/ErrorBoundary"; import { get, patch, post } from "../../util/Util"; import { Permissions as Perms, Role as R } from "../../@types/ApiStructures"; -import { ToggleSwitch } from "../../components/Selectors"; +import { ToggleSwitch } from "../../components/InputElements"; const Role = ({ role }: {role: R}) => { diff --git a/src/pages/admin/Users.tsx b/src/pages/admin/Users.tsx index 6f51912..5abf561 100644 --- a/src/pages/admin/Users.tsx +++ b/src/pages/admin/Users.tsx @@ -7,7 +7,7 @@ import { Table, TableListEntry } from "../../components/Table"; import { BackButton, PageButtons } from "../../components/PageControls"; import { Permissions } from "../../views/PermissionsView"; import { Application as App, Permissions as Perms, User as APIUser, Role } from "../../@types/ApiStructures"; -import { Dropdown, ToggleSwitch } from "../../components/Selectors"; +import { Dropdown, ToggleSwitch } from "../../components/InputElements"; type PartialUser = { apps: App[] @@ -78,7 +78,7 @@ const Application = ({ app }: { app: App }) => { }; const RoleComp = ({ role, onClick }: { role: Role, onClick: React.ReactEventHandler }) => { - return
+ return
{role.name} X
; }; @@ -98,7 +98,7 @@ const Roles = ({ userRoles, roles }: { userRoles: Role[], roles: Role[] }) => { }; return - + {equippedRoles.map(role => { roleDeselected(role); }} />)} @@ -167,9 +167,9 @@ const User = ({ user, roles }: { user: APIUser, roles: Role[] }) => { - + */}
diff --git a/src/pages/home/Profile.tsx b/src/pages/home/Profile.tsx index 2daa92e..6740228 100644 --- a/src/pages/home/Profile.tsx +++ b/src/pages/home/Profile.tsx @@ -1,7 +1,7 @@ import React, { useRef, useState } from "react"; import { capitalise, get, post } from "../../util/Util"; import { useLoginContext } from "../../structures/UserContext"; -import { FileSelector } from "../../components/Selectors"; +import { FileSelector } from "../../components/InputElements"; import { ExternalProfile as EP, User } from "../../@types/ApiStructures"; const TwoFactorControls = ({ user }: {user: User}) => {