@provoly/dashboard 0.11.0

package/styles/base/_reboot.scss

@@ -0,0 +1,376 @@
+@use '../abstracts/variables' as *;
+
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+html {
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 5
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+
+p {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+// Links
+
+/*a {
+  // color:
+  text-decoration: $link-decoration;
+
+  &:hover {
+    // color:
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([class]) {
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+*/
+
+// Abbreviations
+//
+// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+// 2. Add explicit cursor to indicate changed behavior.
+// 3. Prevent the text-decoration to be skipped.
+
+abbr[title] {
+  text-decoration: underline dotted; // 1
+  cursor: help; // 2
+  text-decoration-skip-ink: none; // 3
+}
+
+// Address
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+// Lists
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+// Blockquote
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+// Strong
+//
+// Add the correct font weight in Chrome, Edge, and Safari
+
+b,
+strong {
+  font-weight: 700;
+}
+
+// Sub and Sup
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+
+sub,
+sup {
+  position: relative;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Forms
+//
+// 1. Allow labels to use `margin` for spacing.
+
+label {
+  display: inline-block; // 1
+}
+
+// Remove the default `border-radius` that macOS Chrome adds.
+// See https://github.com/twbs/bootstrap/issues/24093
+
+button {
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 0;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+// 1. Remove the margin in Firefox and Safari
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0; // 1
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Remove the inheritance of text transform in Firefox
+button,
+select {
+  text-transform: none;
+}
+
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role='button'] {
+  cursor: pointer;
+}
+
+select {
+  // Remove the inheritance of word-wrap in Safari.
+  // See https://github.com/twbs/bootstrap/issues/24990
+  word-wrap: normal;
+
+  // Undo the opacity change from Chrome
+  &:disabled {
+    opacity: 1;
+  }
+}
+
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+// See https://stackoverflow.com/a/54997118
+
+[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+    [type='time']
+  )::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+// 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+
+  @if $enable-button-pointers {
+    &:not(:disabled) {
+      cursor: pointer; // 3
+    }
+  }
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+textarea {
+  resize: vertical; // 1
+}
+
+// 1. Browsers set a default `min-width: min-content;` on fieldsets,
+//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+//    So we reset that to ensure fieldsets behave more like a standard block element.
+//    See https://github.com/twbs/bootstrap/issues/12359
+//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+fieldset {
+  min-width: 0; // 1
+  padding: 0; // 2
+  margin: 0; // 2
+  border: 0; // 2
+}
+
+// 1. By using `float: left`, the legend will behave like a block element.
+//    This way the border of a fieldset wraps around the legend if present.
+// 2. Fix wrapping bug.
+//    See https://github.com/twbs/bootstrap/issues/29712
+
+legend {
+  float: left; // 1
+  width: 100%;
+  padding: 0;
+  line-height: inherit;
+
+  + * {
+    clear: left; // 2
+  }
+}
+
+// Fix height of inputs with a type of datetime-local, date, month, week, or time
+// See https://github.com/twbs/bootstrap/issues/18842
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+// 1. Correct the outline style in Safari.
+// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+//    `.form-control` class can properly style them. Note that this cannot simply
+//    be added to `.form-control` as it's not specific enough. For details, see
+//    https://github.com/twbs/bootstrap/issues/11586.
+
+[type='search'] {
+  outline-offset: -2px; // 1
+  -webkit-appearance: textfield; // 2
+}
+
+// 1. A few input types should stay LTR
+// See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
+// Remove the inner padding in Chrome and Safari on macOS.
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// Remove padding around color pickers in webkit browsers
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+// 1. Inherit font family and line height for file input buttons
+// 2. Correct the inability to style clickable types in iOS and Safari.
+
+::file-selector-button {
+  font: inherit; // 1
+  -webkit-appearance: button; // 2
+}
+
+// Correct element displays
+
+output {
+  display: inline-block;
+}
+
+// Remove border from iframe
+
+iframe {
+  border: 0;
+}
+
+// Summary
+//
+// 1. Add the correct display in all browsers
+
+summary {
+  display: list-item; // 1
+  cursor: pointer;
+}
+
+// Progress
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+progress {
+  vertical-align: baseline;
+}
+
+// Hidden attribute
+//
+// Always hide an element with the `hidden` HTML attribute.
+
+[hidden] {
+  display: none !important;
+}

package/styles/base/_typography.scss

@@ -0,0 +1,25 @@
+@use '../abstracts' as *;
+
+.a-h1,
+h1 {
+  margin: 0;
+  padding-bottom: toRem(23);
+}
+
+.a-h2,
+h2 {
+  margin: 0;
+  padding-bottom: toRem(15);
+}
+
+.a-h3,
+h3 {
+  margin: 0;
+  padding-bottom: toRem(10);
+}
+
+.a-h4,
+h4 {
+  margin: 0;
+  padding-bottom: toRem(10);
+}

package/styles/base/_utils.scss

@@ -0,0 +1,67 @@
+@use '../abstracts' as *;
+
+.u-ellipsis,
+.ellipsis {
+  width: 200px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.text-error {
+  margin: 0;
+  font-size: small;
+  color: hsla(0, 87%, 55%, 1);
+}
+
+.u-hidden {
+  display: none;
+}
+
+.u-sr-only {
+  @extend %screenReaderOnly;
+}
+
+.u-visually-hidden {
+  @extend %visuallyHidden;
+}
+
+.u-floating,
+[class].u-floating {
+  position: absolute;
+  z-index: 995;
+
+  &--bottom-right {
+    right: toRem(16);
+    bottom: toRem(10);
+  }
+}
+
+.u-txt-center {
+  text-align: center;
+}
+
+.u-display-flex {
+  display: flex;
+  gap: toRem(5);
+
+  /* MODIFIERS */
+  &.-align-center {
+    align-items: center;
+  }
+
+  &.-column {
+    flex-direction: column;
+  }
+
+  &.-row {
+    flex-direction: row;
+  }
+}
+
+.u-self-center {
+  align-self: center;
+}
+
+.u-self-end {
+  align-self: flex-end;
+}

package/styles/components/_a-badge.scss

@@ -0,0 +1,8 @@
+@use '../abstracts' as *;
+
+/* Atom - badge */
+
+.a-badge {
+  padding: toRem(3) toRem(10);
+  border-radius: toRem(50);
+}

package/styles/components/_a-btn.scss

@@ -0,0 +1,207 @@
+@use '../abstracts' as *;
+
+/* Atom - button */
+%a-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: toRem(44);
+  padding: toRem(8) toRem(22);
+  border: 0 solid transparent;
+  background-color: transparent;
+  font-size: inherit;
+  text-align: center;
+  white-space: normal;
+  letter-spacing: 0;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.24s ease-in-out;
+}
+
+.a-btn {
+  $this: &;
+  @extend %a-btn;
+  @include outlineOnFocus();
+
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &.-disabled,
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &--primary,
+  &--secondary {
+    // Case have icon(s)
+    gap: toRem(10);
+  }
+
+  &--action {
+    gap: 0.5rem;
+    padding: toRem(2) toRem(10);
+    text-align: left;
+    text-decoration: none;
+  }
+
+  // Button with an icon only
+  &--icon-only {
+    width: toRem(20);
+    height: toRem(20);
+    padding: toRem(5);
+  }
+
+  // Action button displayed near a input field, icon + circle background  (ex: add/remove)
+  &--input-action {
+    width: toRem(28);
+    height: toRem(28);
+    padding: 0;
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: toRem(28);
+      height: toRem(28);
+      border-radius: 50%;
+    }
+  }
+
+  // Action add item, circled icon on left + text on right
+  &--iconcircle-text {
+    gap: toRem(10);
+    height: toRem(25);
+    padding-left: toRem(5);
+    padding-right: toRem(5);
+
+    &__icon-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:before {
+        content: '';
+        position: absolute;
+        display: block;
+        width: toRem(20);
+        height: toRem(20);
+        border-radius: 50%;
+        background-color: #6f779b;
+      }
+    }
+  }
+
+  // Button looks like a link, icon on left + text on right
+  &--icon-text {
+    gap: toRem(7);
+  }
+
+  &--select {
+    padding-left: toRem(10);
+    padding-right: toRem(10);
+
+    @include outlineOnFocus($border-radius: 5px);
+  }
+
+  // Button more dots ( ...)
+  &--more {
+    width: toRem(27);
+    height: toRem(27);
+    padding: 0;
+  }
+
+  // Toggler open/close element
+  &--toggle {
+    flex-direction: column;
+    width: toRem(40);
+    height: toRem(40);
+    padding: 0;
+
+    &:before {
+      @include drawChevron($size: 10px, $direction: right);
+      left: toRem(-2);
+    }
+
+    &[aria-pressed='false'],
+    &.is-active {
+      &:before {
+        @include drawChevron($size: 10px, $direction: left);
+        left: toRem(2);
+      }
+    }
+  }
+
+  /* MODIFIERS */
+  &.-circle {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    @include outlineOnFocus($border-radius: 50%);
+  }
+
+  // Classic link aspect
+  &.-link-like {
+    justify-content: left;
+    height: toRem(25);
+    padding: 0;
+    @include outlineOnFocus($border-radius: 5px);
+    text-align: left;
+    font-size: inherit;
+  }
+
+  &.-size-xs {
+    &.-circle {
+      width: toRem(27);
+      min-width: toRem(27);
+      height: toRem(27);
+    }
+  }
+
+  &.-size-sm {
+    gap: toRem(5);
+    height: toRem(34);
+    padding-left: toRem(15);
+    padding-right: toRem(15);
+    font-size: toRem(13);
+    line-height: toRem(15);
+
+    &.-circle {
+      width: toRem(34);
+      height: toRem(34);
+    }
+  }
+
+  &.-size-md {
+    gap: toRem(5);
+    height: toRem(37);
+    padding-left: toRem(20);
+    padding-right: toRem(20);
+    font-size: toRem(14);
+    line-height: toRem(16);
+
+    &.-circle {
+      width: toRem(37);
+      height: toRem(37);
+    }
+
+    pry-icon,
+    .a-icon {
+      width: 17px !important;
+      height: auto;
+    }
+  }
+
+  &.-width-full {
+    width: 100%;
+  }
+}
+
+/*a[href].a-btn {
+  color: inherit;
+}*/