From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- components/tile/_tile.scss | 172 +++++++++++++++++++++++++++++++ components/tile/tile-without-footer.html | 14 +++ components/tile/vendor-tile.html | 26 +++++ components/tile/vfc-tile.html | 17 +++ components/tile/vlm-tile.html | 22 ++++ components/tile/vsp-tile.html | 17 +++ 6 files changed, 268 insertions(+) create mode 100644 components/tile/_tile.scss create mode 100644 components/tile/tile-without-footer.html create mode 100644 components/tile/vendor-tile.html create mode 100644 components/tile/vfc-tile.html create mode 100644 components/tile/vlm-tile.html create mode 100644 components/tile/vsp-tile.html (limited to 'components/tile') diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss new file mode 100644 index 0000000..80629cf --- /dev/null +++ b/components/tile/_tile.scss @@ -0,0 +1,172 @@ +.sdc-tile { + $tile-full-width: 204px; + $tile-full-height: 204px; + $tile-padding: 10px; + + $header-height: $body-font-1; + $footer-height: 23px; + $content-height: 100%; + + width: $tile-full-width; + height: $tile-full-height; + + padding: $tile-padding; + border: 1px solid $silver; + @include border-radius(2px); + @include box-sizing; + + display: flex; + flex-direction: column; + justify-content: space-between; + + position: relative; + cursor: pointer; + user-select: none; + + background: $white; + color: $text-black; + fill: $dark-gray; + transition: box-shadow 0.3s ease-in-out; + @include body-3; + @include box-shadow(0 1px 4px 0 rgba($text-black, 0.06)); + + &:hover { + border-color: $light-gray; + @include box-shadow( 0 10px 30px 0 rgba($text-black, 0.25)); + } + + .blue { + color: $blue; + fill: $blue; + } + + .purple { + color: $purple; + fill: $purple; + } + + .centered { + &.sdc-tile-footer, .sdc-tile-info-line { + text-align: center; + } + } + + .sdc-tile-header { + height: 1.1em; + line-height: 1em; + @include ellipsis($display: block); + + font-size: $body-font-1; + text-transform: uppercase; + } + + .sdc-tile-content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: $content-height; + + .sdc-tile-content-icon { + margin-top: 27px; + text-align: center; + + svg { + width: 50px; + height: 50px; + + &.__vsp { + width: 60px; + height: 40px; + } + &.__vlm { + width: 45px; + height: 53px; + } + &.__vendor { + width: 53px; + height: 47px; + } + } + } + + .sdc-tile-content-info { + display: flex; + flex-direction: column; + + .sdc-tile-info-line { + text-transform: capitalize; + @include ellipsis($display: inline-block); + + button { + height: 1.67em; + width: initial; + margin-bottom: 5px; + margin-top: 1px; + padding: 0 8px; + font-size: inherit; + } + &.supertitle { + height: 1.1em; + line-height: 1.2; + color: $gray; + } + &.title { + height: 1.6em; + line-height: 1.8; + color: $text-black; + @include heading-5; + } + &.subtitle { + height: 1.5em; + line-height: 1.6; + color: $dark-gray; + } + &:last-child { + margin-bottom: 4px; + } + } + } + } + + .sdc-tile-footer { + height: $footer-height; + @include box-sizing; + + border-top: 1px solid $silver; + padding-top: 8px; + + color: $dark-gray; + fill: $dark-gray; + text-transform: capitalize; + + display: flex; + align-items: center; + justify-content: space-between; + + .sdc-tile-footer-cell { + &:first-child { + @include ellipsis; + } + svg{ + width: 20px; + height: 12px; + } + button { + width: initial; + height: initial; + @include body-2; + + .svg-icon-wrapper { + .svg-icon-label { + font-size: inherit; + } + svg { + width: 9px; + height: 9px; + } + } + } + } + + } +} diff --git a/components/tile/tile-without-footer.html b/components/tile/tile-without-footer.html new file mode 100644 index 0000000..514a19e --- /dev/null +++ b/components/tile/tile-without-footer.html @@ -0,0 +1,14 @@ +
+
Header
+
+
+
+ +
+
+
+
Supertitle
+
Title
+
+
+
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html new file mode 100644 index 0000000..ede3fbf --- /dev/null +++ b/components/tile/vendor-tile.html @@ -0,0 +1,26 @@ +
+
+
+
+
+ +
+
+
+
Vendor Name
+
+ +
+
+
+
+ + + +
+
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html new file mode 100644 index 0000000..7b4753e --- /dev/null +++ b/components/tile/vfc-tile.html @@ -0,0 +1,17 @@ +
+
VFC
+
+
+
+ +
+
+
+
Title
+
V 1.0
+
+
+
+ Certified +
+
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html new file mode 100644 index 0000000..be629a1 --- /dev/null +++ b/components/tile/vlm-tile.html @@ -0,0 +1,22 @@ +
+
VLM
+
+
+
+ +
+
+
+
VLM Name
+
+
+
+ Certified + +
+ + Owner +
+ +
+
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html new file mode 100644 index 0000000..1a3dc1d --- /dev/null +++ b/components/tile/vsp-tile.html @@ -0,0 +1,17 @@ +
+
VSP
+
+
+
+ +
+
+
+
VLM
+
VSP Name
+
+
+
+ Draft +
+
-- cgit 1.2.3-korg