Skip to content

Commit

Permalink
#6: Working on site UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Robin Poort committed Nov 29, 2016
1 parent 65be1ef commit 31b0b31
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 233 deletions.
317 changes: 108 additions & 209 deletions src/scss/admin/molecules/_card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,209 +1,6 @@
/* Card
========================================================================== */

/*
Card
default - Default
.k-card--rounded - Rounded
.k-card--center - Center content
markup:
<div class="k-card {$k-modifiers}">
<div class="k-card__body">
<div class="k-card__image">
<img src="{image source}" alt="{alternative text}">
</div>
<div class="k-card__header">
Card title
</div>
<div class="k-card__section">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
<div class="k-card__footer">
<a class="k-button k-button--primary" href="javascript:void(0);">Link</a>
</div>
</div>
</div><!-- .k-card -->
sg-wrapper:
<div style="width: 280px;">
<sg-wrapper-content/>
</div>
Styleguide 2.4
*/

/*
Card: image only
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__image">
<img src="{image source}" alt="{alternative text}">
</div>
</div>
</div><!-- .k-card -->
Styleguide 2.4.1
*/

/*
Card: icon only
markup:
<div class="k-card k-card--center">
<div class="k-card__body">
<div class="k-card__section">
<span class="k-icon-document-document k-icon--accent k-icon--size-huge" aria-hidden="true"></span>
</div>
</div>
</div><!-- .k-card -->
Styleguide 2.4.2
*/

/*
Card header
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__header">
Title
</div>
</div>
</div>
Styleguide 2.4.3
*/

/*
Card section
default - Default
.k-card__section--small-spacing - Small spacing
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__section {$k-modifiers}">
Section
</div>
</div>
</div>
Styleguide 2.4.4
*/

/*
Card footer
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__footer">
Footer
</div>
</div>
</div>
Styleguide 2.4.5
*/

/*
Card caption
default - Default
.k-card__caption--overflow - Overflowing caption
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__section">
Section
</div>
</div>
<div class="k-card__caption {$k-modifiers}">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>
</div>
Styleguide 2.4.6
*/

/*
Linked and labeled card
markup:
<div class="k-card">
<a class="k-card__body" href="javascript:void(0)">
<div class="k-card__header">
Title
</div>
<div class="k-card__section">
Section
</div>
</a>
<label class="k-card__caption">
<input type="checkbox"> Label
</label>
</div>
Styleguide 2.4.7
*/

/*
Selected card
markup:
<div class="k-card k-is-selected">
<div class="k-card__body">
<div class="k-card__header">
Title
</div>
<div class="k-card__section">
Section
</div>
</div>
<label class="k-card__caption">
<input type="checkbox" checked> Label
</label>
</div>
Styleguide 2.4.8
*/

/*
Card background
markup:
<div class="k-card">
<div class="k-card__body">
<div class="k-card__image k-card__image--background" style="background-image: url(joomlatools/images/placeholder-16-9.png);"></div>
<div class="k-card__section">
<p>Section</p>
<p>Section</p>
<p>Section</p>
<p>Section</p>
</div>
</div>
</div>
Styleguide 2.4.9
*/

.k-card {
position: relative;
display: block;
Expand Down Expand Up @@ -260,10 +57,12 @@ Styleguide 2.4.9
&:only-child {
border-radius: $k-card-radius - 1px;
}

&:first-child {
border-top-left-radius: $k-card-radius - 1px;
border-top-right-radius: $k-card-radius - 1px;
}

&:last-child {
border-bottom-left-radius: $k-card-radius - 1px;
border-bottom-right-radius: $k-card-radius - 1px;
Expand Down Expand Up @@ -296,7 +95,6 @@ Styleguide 2.4.9
backface-visibility: hidden;
background: $k-card-background;
border: 1px solid $k-card-border;
color: $k-card-color;
text-decoration: none;
@include transition;
}
Expand All @@ -307,10 +105,12 @@ Styleguide 2.4.9
* Only for links
*/

a.k-card__body {
a.k-card__body,
a.k-card__section {
&:focus,
&:hover {
border-color: $k-card-hover-border;
background: rgba(0, 0, 0, 0.05);

.k-card__header {
border-color: $k-card-header-hover-border;
Expand Down Expand Up @@ -390,11 +190,36 @@ a.k-card__body {
display: block;
padding: 10px;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include transition;


&:not(:first-child) {
border-top: 1px solid $k-card-border;
}

p {
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;

&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}

img {
max-width: 100%;
vertical-align: middle;
}
}

.k-gallery__item-label {
overflow: hidden;
text-overflow: ellipsis;
}
}

.k-card__section--small-spacing {
Expand Down Expand Up @@ -425,10 +250,32 @@ a.k-card__body {
&:not(:first-child) {
border-top: 1px solid $k-card-footer-border;
}
}

&:focus,
&:hover {
border-color: $k-card-footer-hover-border;
.k-card__footer--group {
display: table;
width: 100%;
}

.k-card__footer--group .k-manage__item,
.k-card__footer-item {
display: table-cell;
vertical-align: middle;
text-align: center;
white-space: nowrap;

&:first-child {
text-align: left;
width: 1%;
}

&:last-child {
text-align: right;
width: 1%;
}

&:only-child {
text-align: center;
}
}

Expand All @@ -440,7 +287,7 @@ a.k-card__body {
.k-card__caption {
display: block;
width: 100%;
padding: 1em 10px;
padding: 0.66em;
font-weight: $k-regular;
text-decoration: none;
@include transition;
Expand Down Expand Up @@ -484,3 +331,55 @@ a.k-card__body {
color: $k-card-selected-color;
}
}



/**
* Card graphic
*
* A 3:2 card graphic holder
* - centers all content
* - holds images and icons
*/

.k-card__graphic-wrapper {
position: relative;
width: 100%;
@include ratio-block(3 to 2);
@include content-block(10px);
}

.k-card__graphic-center {
@include coverall;
display: block;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
font-size: 0;
background: radial-gradient(to center, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.075);

&:before {
display: inline-block;
content: ' ';
vertical-align: middle;
height: 100%;
}
}

.k-card__graphic {
display: inline-block;
max-width: 100%;
max-height: 100%;
height: 100%;

[class*="k-icon"],
img {
vertical-align: middle;
max-width:100%;
max-height:100%;
height: auto;
width:auto;
}
}
Loading

0 comments on commit 31b0b31

Please sign in to comment.