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

package/dist/semantic/semantic-link-sap_fiori_3_hcb-sap_fiori_3_hcw.css

@@ -1,124 +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
-*/
-a {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: var(--sapLinkColor);
-  text-decoration: var(--fdLink_Text_Decoration);
-  text-shadow: var(--sapContent_TextShadow);
-  display: inline-block;
-  transition: all 0.125s ease-in;
-  line-height: inherit;
-}
-
-a::before, a::after {
-  box-sizing: inherit;
-  font-size: inherit;
-}
-
-a--emphasized {
-  font-weight: bold;
-}
-
-a:visited {
-  color: var(--sapLink_Visited_Color);
-}
-
-a:hover, a.is-hover {
-  color: var(--sapLink_Hover_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:focus, a.is-focus {
-  z-index: 5;
-  box-shadow: none;
-  outline-offset: -0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:active, a.is-active {
-  color: var(--sapLink_Active_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a--inverted {
-  color: var(--sapLink_InvertedColor);
-  text-shadow: none;
-}
-
-a--inverted:hover, a--inverted.is-hover {
-  color: var(--sapLink_InvertedColor);
-}
-
-a--subtle {
-  color: var(--sapLink_SubtleColor);
-}
-
-a[aria-disabled="true"], a.is-disabled, a:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  color: var(--sapLinkColor);
-  pointer-events: none;
-}

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

@@ -1,124 +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
-*/
-a {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: var(--sapLinkColor);
-  text-decoration: var(--fdLink_Text_Decoration);
-  text-shadow: var(--sapContent_TextShadow);
-  display: inline-block;
-  transition: all 0.125s ease-in;
-  line-height: inherit;
-}
-
-a::before, a::after {
-  box-sizing: inherit;
-  font-size: inherit;
-}
-
-a--emphasized {
-  font-weight: bold;
-}
-
-a:visited {
-  color: var(--sapLink_Visited_Color);
-}
-
-a:hover, a.is-hover {
-  color: var(--sapLink_Hover_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:focus, a.is-focus {
-  z-index: 5;
-  box-shadow: none;
-  outline-offset: -0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:active, a.is-active {
-  color: var(--sapLink_Active_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a--inverted {
-  color: var(--sapLink_InvertedColor);
-  text-shadow: none;
-}
-
-a--inverted:hover, a--inverted.is-hover {
-  color: var(--sapLink_InvertedColor);
-}
-
-a--subtle {
-  color: var(--sapLink_SubtleColor);
-}
-
-a[aria-disabled="true"], a.is-disabled, a:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  color: var(--sapLinkColor);
-  pointer-events: none;
-}

package/dist/semantic/semantic-link-sap_fiori_3_hcb.css

@@ -1,124 +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
-*/
-a {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: var(--sapLinkColor);
-  text-decoration: var(--fdLink_Text_Decoration);
-  text-shadow: var(--sapContent_TextShadow);
-  display: inline-block;
-  transition: all 0.125s ease-in;
-  line-height: inherit;
-}
-
-a::before, a::after {
-  box-sizing: inherit;
-  font-size: inherit;
-}
-
-a--emphasized {
-  font-weight: bold;
-}
-
-a:visited {
-  color: var(--sapLink_Visited_Color);
-}
-
-a:hover, a.is-hover {
-  color: var(--sapLink_Hover_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:focus, a.is-focus {
-  z-index: 5;
-  box-shadow: none;
-  outline-offset: -0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:active, a.is-active {
-  color: var(--sapLink_Active_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a--inverted {
-  color: var(--sapLink_InvertedColor);
-  text-shadow: none;
-}
-
-a--inverted:hover, a--inverted.is-hover {
-  color: var(--sapLink_InvertedColor);
-}
-
-a--subtle {
-  color: var(--sapLink_SubtleColor);
-}
-
-a[aria-disabled="true"], a.is-disabled, a:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  color: var(--sapLinkColor);
-  pointer-events: none;
-}

package/dist/semantic/semantic-link-sap_fiori_3_hcw-sap_fiori_3.css

@@ -1,124 +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
-*/
-a {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: var(--sapLinkColor);
-  text-decoration: var(--fdLink_Text_Decoration);
-  text-shadow: var(--sapContent_TextShadow);
-  display: inline-block;
-  transition: all 0.125s ease-in;
-  line-height: inherit;
-}
-
-a::before, a::after {
-  box-sizing: inherit;
-  font-size: inherit;
-}
-
-a--emphasized {
-  font-weight: bold;
-}
-
-a:visited {
-  color: var(--sapLink_Visited_Color);
-}
-
-a:hover, a.is-hover {
-  color: var(--sapLink_Hover_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:focus, a.is-focus {
-  z-index: 5;
-  box-shadow: none;
-  outline-offset: -0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:active, a.is-active {
-  color: var(--sapLink_Active_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a--inverted {
-  color: var(--sapLink_InvertedColor);
-  text-shadow: none;
-}
-
-a--inverted:hover, a--inverted.is-hover {
-  color: var(--sapLink_InvertedColor);
-}
-
-a--subtle {
-  color: var(--sapLink_SubtleColor);
-}
-
-a[aria-disabled="true"], a.is-disabled, a:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  color: var(--sapLinkColor);
-  pointer-events: none;
-}

package/dist/semantic/semantic-link-sap_fiori_3_hcw-sap_fiori_3_dark.css

@@ -1,124 +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
-*/
-a {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: var(--sapLinkColor);
-  text-decoration: var(--fdLink_Text_Decoration);
-  text-shadow: var(--sapContent_TextShadow);
-  display: inline-block;
-  transition: all 0.125s ease-in;
-  line-height: inherit;
-}
-
-a::before, a::after {
-  box-sizing: inherit;
-  font-size: inherit;
-}
-
-a--emphasized {
-  font-weight: bold;
-}
-
-a:visited {
-  color: var(--sapLink_Visited_Color);
-}
-
-a:hover, a.is-hover {
-  color: var(--sapLink_Hover_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:focus, a.is-focus {
-  z-index: 5;
-  box-shadow: none;
-  outline-offset: -0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a:active, a.is-active {
-  color: var(--sapLink_Active_Color);
-  text-decoration: var(--fdLink_Text_Decoration_Opposite);
-}
-
-a--inverted {
-  color: var(--sapLink_InvertedColor);
-  text-shadow: none;
-}
-
-a--inverted:hover, a--inverted.is-hover {
-  color: var(--sapLink_InvertedColor);
-}
-
-a--subtle {
-  color: var(--sapLink_SubtleColor);
-}
-
-a[aria-disabled="true"], a.is-disabled, a:disabled {
-  opacity: var(--sapContent_DisabledOpacity);
-  color: var(--sapLinkColor);
-  pointer-events: none;
-}