@mgdis/mg-components 5.18.0 → 5.19.0

package/dist/mg-components/styles/a11y.scss

@@ -1,36 +0,0 @@
-/**
- * A11Y
- */
-
-// Make content available only for screen reader
-// https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
-@mixin sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-.sr-only {
-  @include sr-only();
-}
-
-// Remove outline for non-keyboard :focus
-// https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}

package/dist/mg-components/styles/fonts.scss

@@ -1,21 +0,0 @@
-/**
- * Open Sans
- * https://fonts.google.com/specimen/Open+Sans
- */
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 600;
-  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 700;
-  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
-}

package/dist/mg-components/styles/form.scss

@@ -1,3 +0,0 @@
-.is-asterisk {
-  color: hsl(var(--color-danger));
-}

package/dist/mg-components/styles/global.scss

@@ -1,80 +0,0 @@
-/**
- * Here we building the CSS for the component library
- */
-
-// Normalize CSS : https://necolas.github.io/normalize.css/
-@import '~normalize.css/normalize.css';
-
-// Fonts
-@import './fonts.scss';
-
-// Variables
-@import './variables.css';
-
-// Main style
-@import './main.scss';
-
-// Typography style
-@import './typography.scss';
-
-// Accessibility
-@import './a11y.scss';
-
-// Form
-// already included by mg-form
-// @import './form.scss';
-
-// Layout
-@import './layout.scss';
-
-// Utilities
-@import './utilities.scss';
-
-/* Atoms */
-
-// <mg-badge>
-@import '../components/atoms/mg-badge/mg-badge.scss';
-
-// <mg-button>
-@import '../components/atoms/mg-button/mg-button.scss';
-
-// <mg-character-left>
-@import '../components/atoms/mg-character-left/mg-character-left.scss';
-
-// <mg-icon>
-@import '../components/atoms/mg-icon/mg-icon.scss';
-
-// <mg-input-title>
-//! For now input style will not be included
-// @import '../components/atoms/mg-input-title/mg-input-title.scss';
-
-// <mg-tag>
-@import '../components/atoms/mg-tag/mg-tag.scss';
-
-// <mg-tooltip>
-@import '../components/atoms/mg-tooltip/mg-tooltip.scss';
-
-/* Molecules */
-
-// <mg-input-...>
-//! For now input style will not be included
-// @import '../components/molecules/inputs/styles/mg-input.scss';
-// @import '../components/molecules/inputs/styles/mg-input-box.scss';
-// @import '../components/molecules/inputs/styles/mg-input-charleft.scss';
-// @import '../components/molecules/inputs/styles/mg-input-fieldset.scss';
-// @import '../components/molecules/inputs/styles/mg-input-width.scss';
-
-// <mg-form>
-@import '../components/molecules/mg-form/mg-form.scss';
-
-// <mg-message>
-@import '../components/molecules/mg-message/mg-message.scss';
-
-// <mg-pagination>
-@import '../components/molecules/mg-pagination/mg-pagination.scss';
-
-// <mg-popover>
-@import '../components/molecules/mg-popover/mg-popover.scss';
-
-// <mg-tabs>
-@import '../components/molecules/mg-tabs/mg-tabs.scss';

package/dist/mg-components/styles/layout.scss

@@ -1,29 +0,0 @@
-@use 'sass:math';
-
-// Number of column
-$grid-columns: 12;
-
-// Calculate width
-@function round-width($i) {
-  $width: math.div(100 * $i, $grid-columns);
-  @return #{$width}#{'%'};
-}
-
-.mg-grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-// Those columns will equaly share space
-.mg-grid__col {
-  flex: 1 0 0;
-  padding: 0 var(--mg-grid-spacing);
-
-  // Building columns
-  @for $i from 1 through $grid-columns {
-    &.mg-grid__col-#{$i} {
-      flex: 0 0 auto;
-      width: round-width($i);
-    }
-  }
-}

package/dist/mg-components/styles/main.scss

@@ -1,23 +0,0 @@
-// Make all element use the border box model
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/**
- * We set html font size to 62.5% to get 10px in most of the case.
- * This is a common use for an easiest calculation : 1rem = 10px
- * Default font size will be defined in body element.
- */
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: var(--font-size);
-  font-family: var(--font-family);
-  line-height: var(--line-height);
-  -webkit-font-smoothing: antialiased;
-}

package/dist/mg-components/styles/mg-icon-animation.scss

@@ -1,6 +0,0 @@
-@mixin rotate($selector, $duration) {
-  transition: $duration;
-  &--rotate#{$selector} {
-    transform: rotate(180deg);
-  }
-}

package/dist/mg-components/styles/navigation-button.scss

@@ -1,77 +0,0 @@
-@use 'sass:map';
-
-$border-bottom-size: 0.3rem;
-$font-size-large: calc(var(--font-size) + 0.2rem);
-$navigation-button-column-gap: 1rem;
-
-@mixin navigation-button($element, $button-sizes) {
-  @each $name, $size in $button-sizes {
-    .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
-    .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
-      padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: #{map.get($size, 'height')};
-      &,
-      ::slotted([slot='label']),
-      ::slotted([slot='metadata']) {
-        @if $name == 'regular' {
-          font-size: var(--font-size);
-        } @else {
-          font-size: $font-size-large;
-        }
-      }
-      &.#{$element}__navigation-button--horizontal {
-        padding-bottom: calc(#{map.get($size, 'vertical')} - #{$border-bottom-size});
-      }
-      &.#{$element}__navigation-button--vertical {
-        padding-left: calc(#{map.get($size, 'horizontal')} - #{$border-bottom-size});
-      }
-    }
-  }
-
-  .#{$element}__navigation-button {
-    display: flex;
-    align-items: center;
-    column-gap: var(--#{$element}-navigation-button-column-gap, $navigation-button-column-gap);
-    background-color: unset;
-    border: none;
-    font-family: var(--font-family);
-    font-weight: 400;
-    color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
-    line-height: var(--line-height);
-    text-decoration: none;
-    white-space: nowrap;
-    box-sizing: border-box;
-    cursor: pointer;
-    &:disabled,
-    &--disabled {
-      cursor: default;
-      opacity: var(--mg-disabled-opacity);
-    }
-    &:focus-visible {
-      z-index: 10;
-    }
-    &:hover:not(.#{$element}__navigation-button--disabled),
-    &:focus-visible:not(.#{$element}__navigation-button--disabled) {
-      background-color: hsl(var(--#{$element}-focused-background-color-hsl), 0.1);
-    }
-    &.#{$element}__navigation-button--active {
-      color: hsl(var(--#{$element}-color-active-hsl));
-      font-weight: 600;
-      &.#{$element}__navigation-button--horizontal {
-        border-bottom-color: hsl(var(--#{$element}-border-color-active-hsl));
-      }
-      &.#{$element}__navigation-button--vertical {
-        border-left-color: hsl(var(--#{$element}-border-color-active-hsl));
-      }
-    }
-    &.#{$element}__navigation-button--hidden {
-      display: none;
-    }
-    &.#{$element}__navigation-button--horizontal {
-      border-bottom: $border-bottom-size solid transparent;
-    }
-    &.#{$element}__navigation-button--vertical {
-      border-left: $border-bottom-size solid transparent;
-    }
-  }
-}

package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss

@@ -1,11 +0,0 @@
-@mixin reset-slot-card-variables() {
-  ::slotted(*) {
-    --mg-card-border: var(--mg-card-border-default);
-    --mg-card-padding: var(--mg-card-padding-default);
-    --mg-card-border-radius: var(--mg-card-border-radius-default);
-    --mg-card-background: var(--mg-card-background-default);
-    --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-    --mg-card-max-width: unset;
-    --mg-card-min-width: unset;
-  }
-}

package/dist/mg-components/styles/typography.scss

@@ -1,82 +0,0 @@
-/**
- * Paragraph
- */
-
-p {
-  margin: 0;
-  & + p {
-    margin-top: 1rem;
-  }
-}
-
-/**
- * Headings
- *
- * Classes can also be used on element to match attending, for exemples :
- * <h4 class="h3">blu</h4>
- * <div role="heading" aria-level="4" class="h4">blu</div>
- */
-
-@for $i from 1 through 6 {
-  h#{$i},
-  .h#{$i} {
-    font-family: var(--font-family-heading);
-  }
-}
-
-//h1
-h1,
-.h1 {
-  font-size: calc(var(--font-size) * 1.85);
-}
-
-//h2
-h2,
-.h2 {
-  font-size: calc(var(--font-size) * 1.65);
-}
-
-//h3
-h3,
-.h3 {
-  font-size: calc(var(--font-size) * 1.35);
-}
-
-//h4
-h4,
-.h4 {
-  font-size: calc(var(--font-size) * 1.2);
-}
-
-//h5
-h5,
-.h5 {
-  font-size: calc(var(--font-size) * 1.1);
-}
-
-//h6
-h6,
-.h6 {
-  font-size: calc(var(--font-size) * 0.8);
-}
-
-/**
- * Links
- */
-a {
-  color: hsl(var(--color-primary));
-  text-decoration: underline;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
-}
-
-/**
-* Small
-*/
-small {
-  font-size: 0.9em;
-}

package/dist/mg-components/styles/utilities.scss

@@ -1,21 +0,0 @@
-// Helper to manage space between elements
-.mg-group-elements {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  // remove default margin
-  & > * {
-    margin: 0 !important; // I would say important is allowed in utility classes ?
-  }
-
-  // Align button on right side
-  &.mg-group-elements--align-right {
-    justify-content: flex-end;
-  }
-}
-
-.no-padding {
-  padding: 0;
-}