@fundamental-styles/common-css 0.0.1-rc.0 → 0.24.0-rc.102

package/dist/semantic/semantic-button-sap_fiori_3_light_dark-sap_fiori_3_dark.css

@@ -1,123 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/*
-WHY THIS:
-Other semantic grids don't eaily allow for fixed gutter widths
-nor do they take advantage of the CSS calc function
-and they can get kind of confusing.
-This is meant for simple layout problems — 
-i.e., you have a box and you need three cols inside of equal widths
-with gutters between.
-
-The FLOW terminology is meant to be netural outside of rows and columns
-and comes from the HTML5 spec referring to elements that can contain other elements
-http://w3c.github.io/html/dom.html#kinds-of-content-flow-content
-
-USAGE:
-— Outer containers should contain the `@include flow-box` base styles
-— Columns get `@include flow` with `$span` and `$cols` params
-
-EXAMPLE MARKUP:
-<section>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-</section>
-
-EXAMPLE CSS:
-section {
-  @include flow-box()
-  .box {
-    @include flow(2);
-    &:first-child {
-      @include flow-shift(2);
-    }
-  }
-}
-
-OUTPUT:
-This will render 4 boxes spanning 2 cols each indented 2 cols
-(based on defaults)
-
-|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--|
-          |  box  | |  box  | |  box  | |  box  |
-
-*/
-/*
-   Fully expanded pseudo element
-   Requires parent to have specified position
-*/
-button {
-  height: 2.25rem;
-  max-height: 2.25rem;
-  min-width: 2.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  padding-left: calc(0.625rem - var(--sapButton_BorderWidth));
-  padding-right: calc(0.625rem - var(--sapButton_BorderWidth));
-  line-height: 1rem;
-  text-align: center;
-  text-shadow: var(--fdButton_Text_Shadow);
-  border-style: solid;
-  border-width: var(--sapButton_BorderWidth);
-  color: var(--sapButton_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Background);
-}
-
-button::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 100%;
-  top: -0.25rem;
-  bottom: -0.25rem;
-  left: 0;
-  right: 0;
-}
-
-button:focus, button.is-focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-}
-
-button:focus.fd-button--toggled, button.is-focus.fd-button--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button:hover, button.is-hover {
-  color: var(--sapButton_Hover_TextColor);
-  border-color: var(--sapButton_Hover_BorderColor);
-  background-color: var(--sapButton_Hover_Background);
-}
-
-button:active, button.is-active {
-  color: var(--sapButton_Selected_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Active_Background);
-}
-
-button:active:focus, button:active.is-focus, button.is-active:focus, button.is-active.is-focus {
-  z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button[aria-disabled="true"], button.is-disabled, button:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  cursor: not-allowed;
-  outline: none;
-  box-shadow: none;
-}
-
-button[aria-disabled="true"]:focus, button.is-disabled:focus, button:disabled:focus {
-  outline: none;
-}

package/dist/semantic/semantic-button-sap_fiori_3_light_dark-sap_fiori_3_hcb.css

@@ -1,123 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/*
-WHY THIS:
-Other semantic grids don't eaily allow for fixed gutter widths
-nor do they take advantage of the CSS calc function
-and they can get kind of confusing.
-This is meant for simple layout problems — 
-i.e., you have a box and you need three cols inside of equal widths
-with gutters between.
-
-The FLOW terminology is meant to be netural outside of rows and columns
-and comes from the HTML5 spec referring to elements that can contain other elements
-http://w3c.github.io/html/dom.html#kinds-of-content-flow-content
-
-USAGE:
-— Outer containers should contain the `@include flow-box` base styles
-— Columns get `@include flow` with `$span` and `$cols` params
-
-EXAMPLE MARKUP:
-<section>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-</section>
-
-EXAMPLE CSS:
-section {
-  @include flow-box()
-  .box {
-    @include flow(2);
-    &:first-child {
-      @include flow-shift(2);
-    }
-  }
-}
-
-OUTPUT:
-This will render 4 boxes spanning 2 cols each indented 2 cols
-(based on defaults)
-
-|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--|
-          |  box  | |  box  | |  box  | |  box  |
-
-*/
-/*
-   Fully expanded pseudo element
-   Requires parent to have specified position
-*/
-button {
-  height: 2.25rem;
-  max-height: 2.25rem;
-  min-width: 2.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  padding-left: calc(0.625rem - var(--sapButton_BorderWidth));
-  padding-right: calc(0.625rem - var(--sapButton_BorderWidth));
-  line-height: 1rem;
-  text-align: center;
-  text-shadow: var(--fdButton_Text_Shadow);
-  border-style: solid;
-  border-width: var(--sapButton_BorderWidth);
-  color: var(--sapButton_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Background);
-}
-
-button::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 100%;
-  top: -0.25rem;
-  bottom: -0.25rem;
-  left: 0;
-  right: 0;
-}
-
-button:focus, button.is-focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-}
-
-button:focus.fd-button--toggled, button.is-focus.fd-button--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button:hover, button.is-hover {
-  color: var(--sapButton_Hover_TextColor);
-  border-color: var(--sapButton_Hover_BorderColor);
-  background-color: var(--sapButton_Hover_Background);
-}
-
-button:active, button.is-active {
-  color: var(--sapButton_Selected_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Active_Background);
-}
-
-button:active:focus, button:active.is-focus, button.is-active:focus, button.is-active.is-focus {
-  z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button[aria-disabled="true"], button.is-disabled, button:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  cursor: not-allowed;
-  outline: none;
-  box-shadow: none;
-}
-
-button[aria-disabled="true"]:focus, button.is-disabled:focus, button:disabled:focus {
-  outline: none;
-}

package/dist/semantic/semantic-button-sap_fiori_3_light_dark-sap_fiori_3_hcw.css

@@ -1,123 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/*
-WHY THIS:
-Other semantic grids don't eaily allow for fixed gutter widths
-nor do they take advantage of the CSS calc function
-and they can get kind of confusing.
-This is meant for simple layout problems — 
-i.e., you have a box and you need three cols inside of equal widths
-with gutters between.
-
-The FLOW terminology is meant to be netural outside of rows and columns
-and comes from the HTML5 spec referring to elements that can contain other elements
-http://w3c.github.io/html/dom.html#kinds-of-content-flow-content
-
-USAGE:
-— Outer containers should contain the `@include flow-box` base styles
-— Columns get `@include flow` with `$span` and `$cols` params
-
-EXAMPLE MARKUP:
-<section>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-</section>
-
-EXAMPLE CSS:
-section {
-  @include flow-box()
-  .box {
-    @include flow(2);
-    &:first-child {
-      @include flow-shift(2);
-    }
-  }
-}
-
-OUTPUT:
-This will render 4 boxes spanning 2 cols each indented 2 cols
-(based on defaults)
-
-|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--|
-          |  box  | |  box  | |  box  | |  box  |
-
-*/
-/*
-   Fully expanded pseudo element
-   Requires parent to have specified position
-*/
-button {
-  height: 2.25rem;
-  max-height: 2.25rem;
-  min-width: 2.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  padding-left: calc(0.625rem - var(--sapButton_BorderWidth));
-  padding-right: calc(0.625rem - var(--sapButton_BorderWidth));
-  line-height: 1rem;
-  text-align: center;
-  text-shadow: var(--fdButton_Text_Shadow);
-  border-style: solid;
-  border-width: var(--sapButton_BorderWidth);
-  color: var(--sapButton_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Background);
-}
-
-button::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 100%;
-  top: -0.25rem;
-  bottom: -0.25rem;
-  left: 0;
-  right: 0;
-}
-
-button:focus, button.is-focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-}
-
-button:focus.fd-button--toggled, button.is-focus.fd-button--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button:hover, button.is-hover {
-  color: var(--sapButton_Hover_TextColor);
-  border-color: var(--sapButton_Hover_BorderColor);
-  background-color: var(--sapButton_Hover_Background);
-}
-
-button:active, button.is-active {
-  color: var(--sapButton_Selected_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Active_Background);
-}
-
-button:active:focus, button:active.is-focus, button.is-active:focus, button.is-active.is-focus {
-  z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button[aria-disabled="true"], button.is-disabled, button:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  cursor: not-allowed;
-  outline: none;
-  box-shadow: none;
-}
-
-button[aria-disabled="true"]:focus, button.is-disabled:focus, button:disabled:focus {
-  outline: none;
-}

package/dist/semantic/semantic-button-sap_fiori_3_light_dark-sap_fiori_3_light_dark.css

@@ -1,123 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/*
-WHY THIS:
-Other semantic grids don't eaily allow for fixed gutter widths
-nor do they take advantage of the CSS calc function
-and they can get kind of confusing.
-This is meant for simple layout problems — 
-i.e., you have a box and you need three cols inside of equal widths
-with gutters between.
-
-The FLOW terminology is meant to be netural outside of rows and columns
-and comes from the HTML5 spec referring to elements that can contain other elements
-http://w3c.github.io/html/dom.html#kinds-of-content-flow-content
-
-USAGE:
-— Outer containers should contain the `@include flow-box` base styles
-— Columns get `@include flow` with `$span` and `$cols` params
-
-EXAMPLE MARKUP:
-<section>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-</section>
-
-EXAMPLE CSS:
-section {
-  @include flow-box()
-  .box {
-    @include flow(2);
-    &:first-child {
-      @include flow-shift(2);
-    }
-  }
-}
-
-OUTPUT:
-This will render 4 boxes spanning 2 cols each indented 2 cols
-(based on defaults)
-
-|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--|
-          |  box  | |  box  | |  box  | |  box  |
-
-*/
-/*
-   Fully expanded pseudo element
-   Requires parent to have specified position
-*/
-button {
-  height: 2.25rem;
-  max-height: 2.25rem;
-  min-width: 2.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  padding-left: calc(0.625rem - var(--sapButton_BorderWidth));
-  padding-right: calc(0.625rem - var(--sapButton_BorderWidth));
-  line-height: 1rem;
-  text-align: center;
-  text-shadow: var(--fdButton_Text_Shadow);
-  border-style: solid;
-  border-width: var(--sapButton_BorderWidth);
-  color: var(--sapButton_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Background);
-}
-
-button::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 100%;
-  top: -0.25rem;
-  bottom: -0.25rem;
-  left: 0;
-  right: 0;
-}
-
-button:focus, button.is-focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-}
-
-button:focus.fd-button--toggled, button.is-focus.fd-button--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button:hover, button.is-hover {
-  color: var(--sapButton_Hover_TextColor);
-  border-color: var(--sapButton_Hover_BorderColor);
-  background-color: var(--sapButton_Hover_Background);
-}
-
-button:active, button.is-active {
-  color: var(--sapButton_Selected_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Active_Background);
-}
-
-button:active:focus, button:active.is-focus, button.is-active:focus, button.is-active.is-focus {
-  z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button[aria-disabled="true"], button.is-disabled, button:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  cursor: not-allowed;
-  outline: none;
-  box-shadow: none;
-}
-
-button[aria-disabled="true"]:focus, button.is-disabled:focus, button:disabled:focus {
-  outline: none;
-}

package/dist/semantic/semantic-button-sap_fiori_3_light_dark.css

@@ -1,123 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/*
-WHY THIS:
-Other semantic grids don't eaily allow for fixed gutter widths
-nor do they take advantage of the CSS calc function
-and they can get kind of confusing.
-This is meant for simple layout problems — 
-i.e., you have a box and you need three cols inside of equal widths
-with gutters between.
-
-The FLOW terminology is meant to be netural outside of rows and columns
-and comes from the HTML5 spec referring to elements that can contain other elements
-http://w3c.github.io/html/dom.html#kinds-of-content-flow-content
-
-USAGE:
-— Outer containers should contain the `@include flow-box` base styles
-— Columns get `@include flow` with `$span` and `$cols` params
-
-EXAMPLE MARKUP:
-<section>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-  <div class="box">x</div>
-</section>
-
-EXAMPLE CSS:
-section {
-  @include flow-box()
-  .box {
-    @include flow(2);
-    &:first-child {
-      @include flow-shift(2);
-    }
-  }
-}
-
-OUTPUT:
-This will render 4 boxes spanning 2 cols each indented 2 cols
-(based on defaults)
-
-|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--|
-          |  box  | |  box  | |  box  | |  box  |
-
-*/
-/*
-   Fully expanded pseudo element
-   Requires parent to have specified position
-*/
-button {
-  height: 2.25rem;
-  max-height: 2.25rem;
-  min-width: 2.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  padding-left: calc(0.625rem - var(--sapButton_BorderWidth));
-  padding-right: calc(0.625rem - var(--sapButton_BorderWidth));
-  line-height: 1rem;
-  text-align: center;
-  text-shadow: var(--fdButton_Text_Shadow);
-  border-style: solid;
-  border-width: var(--sapButton_BorderWidth);
-  color: var(--sapButton_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Background);
-}
-
-button::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 100%;
-  top: -0.25rem;
-  bottom: -0.25rem;
-  left: 0;
-  right: 0;
-}
-
-button:focus, button.is-focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-}
-
-button:focus.fd-button--toggled, button.is-focus.fd-button--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button:hover, button.is-hover {
-  color: var(--sapButton_Hover_TextColor);
-  border-color: var(--sapButton_Hover_BorderColor);
-  background-color: var(--sapButton_Hover_Background);
-}
-
-button:active, button.is-active {
-  color: var(--sapButton_Selected_TextColor);
-  border-color: var(--sapButton_BorderColor);
-  background-color: var(--sapButton_Active_Background);
-}
-
-button:active:focus, button:active.is-focus, button.is-active:focus, button.is-active.is-focus {
-  z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
-}
-
-button[aria-disabled="true"], button.is-disabled, button:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  cursor: not-allowed;
-  outline: none;
-  box-shadow: none;
-}
-
-button[aria-disabled="true"]:focus, button.is-disabled:focus, button:disabled:focus {
-  outline: none;
-}