feat: breadcrum component change for rsp@v3

adobe · Mar 20, 2020 · 3dc2a63 · 3dc2a63
1 parent 3c6ebf6
commit 3dc2a63
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
@@ -13,10 +13,13 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 
 .spectrum-Breadcrumbs {
- display: inline-flex;
+ display: flex;
  justify-content: start;
  list-style-type: none;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-basis: 0%;
 
  margin: 0;
  padding: 0;
@@ -34,6 +37,10 @@ governing permissions and limitations under the License.
  transform: logical scale(1) rotate(0deg);
 
  opacity: 1;
+
+ &.is-reversed {
+ transform: scale(-1);
+ }
 }
 
 .spectrum-Breadcrumbs-item {
@@ -46,6 +53,7 @@ governing permissions and limitations under the License.
 
  position: relative;
 
+ white-space: nowrap;
  font-size: var(--spectrum-breadcrumb-item-text-size);
  font-weight: var(--spectrum-breadcrumb-item-text-font-weight);
  line-height: var(--spectrum-breadcrumb-item-text-line-height);
@@ -83,14 +91,14 @@ governing permissions and limitations under the License.
 
  text-decoration: none;
 
- &:hover,
- &:focus-ring {
- text-decoration: underline;
- }
-
  &[href],
  &[tabindex="0"] {
  cursor: pointer;
+
+ &:hover,
+ &:focus-ring {
+ text-decoration: underline;
+ }
  }
 }
 
@@ -121,6 +129,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Breadcrumbs--multiline {
+ flex-wrap: wrap;
+
  .spectrum-Breadcrumbs-item {
  font-size: var(--spectrum-breadcrumb-multiline-item-text-size);
  font-weight: var(--spectrum-breadcrumb-multiline-item-text-font-weight);
@@ -144,25 +154,11 @@ governing permissions and limitations under the License.
  }
  }
 
- }
-}
-
-/* @deprecated */
-.spectrum-Breadcrumbs--title .spectrum-Breadcrumbs-item {
- &:last-of-type {
- inline-size: 100%;
-
- margin: var(--spectrum-breadcrumb-title-margin);
+ .spectrum-Heading--pageTitle {
+ margin: 0;
 
- font-size: var(--spectrum-breadcrumb-title-active-text-size);
- font-weight: var(--spectrum-breadcrumb-title-active-text-font-weight);
- line-height: var(--spectrum-breadcrumb-title-active-text-line-height);
- }
-
- .spectrum-Heading--pageTitle {
- margin: 0;
-
- font-size: inherit;
- font-weight: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ }
  }
 }
diff --git a/components/breadcrumb/skin.css b/components/breadcrumb/skin.css
@@ -47,6 +47,10 @@ governing permissions and limitations under the License.
  color: var(--spectrum-breadcrumb-text-color-down);
  border-block-end: 0;
  }
+
+ &.is-disabled {
+ color: var(--spectrum-label-text-color-disabled);
+ }
  }
 
  &.is-selected,