aboutsummaryrefslogtreecommitdiffstats
path: root/components/tile
diff options
context:
space:
mode:
Diffstat (limited to 'components/tile')
-rw-r--r--components/tile/_tile.scss172
-rw-r--r--components/tile/tile-without-footer.html14
-rw-r--r--components/tile/vendor-tile.html26
-rw-r--r--components/tile/vfc-tile.html17
-rw-r--r--components/tile/vlm-tile.html22
-rw-r--r--components/tile/vsp-tile.html17
6 files changed, 0 insertions, 268 deletions
diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss
deleted file mode 100644
index 80629cf..0000000
--- a/components/tile/_tile.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-.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
deleted file mode 100644
index 514a19e..0000000
--- a/components/tile/tile-without-footer.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="sdc-tile">
- <div class="sdc-tile-header blue">Header</div>
- <div class="sdc-tile-content">
- <div class="sdc-tile-content-icon blue">
- <div class="svg-icon-wrapper">
- <!-- insert SVG -->
- </div>
- </div>
- <div class="sdc-tile-content-info">
- <div class="sdc-tile-info-line supertitle">Supertitle</div>
- <div class="sdc-tile-info-line title">Title</div>
- </div>
- </div>
-</div>
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html
deleted file mode 100644
index ede3fbf..0000000
--- a/components/tile/vendor-tile.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="sdc-tile">
- <div class="sdc-tile-header"></div>
- <div class="sdc-tile-content">
- <div class="sdc-tile-content-icon dark-gray">
- <div class="svg-icon-wrapper">
- <!-- insert SVG -->
- </div>
- </div>
- <div class="sdc-tile-content-info centered">
- <div class="sdc-tile-info-line title">Vendor Name</div>
- <div class="sdc-tile-info-line">
- <button class="sdc-button sdc-button-outline-rounded sdc-button__dark-gray">100 VSPs</button>
- </div>
- </div>
- </div>
- <div class="sdc-tile-footer centered">
- <span class="sdc-tile-footer-cell">
- <button class="sdc-button sdc-button-link sdc-button__primary sdc-button__with-icon">
- <div class="svg-icon-wrapper sdc-button-icon right">
- <!-- insert SVG -->
- <span class="svg-icon-label sdc-button-label">Create new VSP</span>
- </div>
- </button>
- </span>
- </div>
-</div>
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html
deleted file mode 100644
index 7b4753e..0000000
--- a/components/tile/vfc-tile.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="sdc-tile">
- <div class="sdc-tile-header purple">VFC</div>
- <div class="sdc-tile-content">
- <div class="sdc-tile-content-icon">
- <div class="svg-icon-wrapper">
- <!-- insert SVG -->
- </div>
- </div>
- <div class="sdc-tile-content-info">
- <div class="sdc-tile-info-line title">Title</div>
- <div class="sdc-tile-info-line subtitle">V 1.0</div>
- </div>
- </div>
- <div class="sdc-tile-footer">
- <span class="sdc-tile-footer-cell">Certified</span>
- </div>
-</div>
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html
deleted file mode 100644
index be629a1..0000000
--- a/components/tile/vlm-tile.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="sdc-tile">
- <div class="sdc-tile-header purple">VLM</div>
- <div class="sdc-tile-content">
- <div class="sdc-tile-content-icon purple">
- <div class="svg-icon-wrapper">
- <!-- insert SVG -->
- </div>
- </div>
- <div class="sdc-tile-content-info">
- <div class="sdc-tile-info-line title">VLM Name</div>
- </div>
- </div>
- <div class="sdc-tile-footer">
- <span class="sdc-tile-footer-cell">Certified</span>
- <span class="sdc-tile-footer-cell">
- <div class="svg-icon-wrapper left">
- <!-- insert SVG -->
- <span class="svg-icon-label">Owner</span>
- </div>
- </span>
- </div>
-</div>
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html
deleted file mode 100644
index 1a3dc1d..0000000
--- a/components/tile/vsp-tile.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="sdc-tile">
- <div class="sdc-tile-header blue">VSP</div>
- <div class="sdc-tile-content">
- <div class="sdc-tile-content-icon blue">
- <div class="svg-icon-wrapper">
- <!-- insert SVG -->
- </div>
- </div>
- <div class="sdc-tile-content-info">
- <div class="sdc-tile-info-line supertitle">VLM</div>
- <div class="sdc-tile-info-line title">VSP Name</div>
- </div>
- </div>
- <div class="sdc-tile-footer">
- <span class="sdc-tile-footer-cell">Draft</span>
- </div>
-</div>