diff --git a/packages/portal-style/src/components/_alert.scss b/packages/portal-style/src/components/_alert.scss index aede043e..b8ae5e7d 100644 --- a/packages/portal-style/src/components/_alert.scss +++ b/packages/portal-style/src/components/_alert.scss @@ -2,16 +2,15 @@ border-width: 2px; &.alert-icon { - padding-left: 60px; + padding-left: 70px; .dp-po-icon { - margin: 0 10px 0 0; display: inline-flex; background: #fff; border: 1px solid; position: absolute; height: calc(100% + 4px); - width: 50px; + width: 60px; text-align: center; left: -2px; top: -2px; diff --git a/packages/portal-style/src/components/_breadcrumbs.scss b/packages/portal-style/src/components/_breadcrumbs.scss index e8af31c4..6e6db996 100644 --- a/packages/portal-style/src/components/_breadcrumbs.scss +++ b/packages/portal-style/src/components/_breadcrumbs.scss @@ -3,8 +3,6 @@ } .breadcrumb { - margin-left: -7px; - &-item { color: $breadcrumb-inactive-color; font-weight: bold; @@ -48,4 +46,24 @@ color: $brand-primary; } } + + &-image { + position: relative; + + img { + max-width: 20px; + margin-right: 10px; + } + + &:after { + width: 2px; + height: 34px; + content: ''; + background: $grey-light; + right: -1px; + top: -4px; + display: block; + position: absolute; + } + } } diff --git a/packages/portal-style/src/variables/_colors.scss b/packages/portal-style/src/variables/_colors.scss index 0ce3d690..6fef7381 100644 --- a/packages/portal-style/src/variables/_colors.scss +++ b/packages/portal-style/src/variables/_colors.scss @@ -59,3 +59,5 @@ $rose-grad: linear-gradient(270deg, #FF4C85 0.99%, #F8497F 21.34%, #E5416D 50.57 $facebook: #3C5A97; $linkedin: #0077B7; +$twitter: #1DA1F2; +$whatsapp: #25d366; diff --git a/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs b/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs index d5847d96..04d15236 100644 --- a/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs +++ b/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs @@ -1,6 +1,9 @@