richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

updates cards more, fixes labels, voted state

pull/13/head
Jack Lukic 12 years ago
parent
f3083bbc1c
commit
20105179af
8 changed files with 214 additions and 158 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/elements/label.min.css
  2. 2
      build/packaged/semantic.min.css
  3. 38
      build/uncompressed/elements/label.css
  4. 70
      node/src/documents/quirky/card.html
  5. 38
      node/src/files/components/semantic/elements/label.css
  6. 90
      node/src/files/overrides/card.css
  7. 38
      src/elements/label.less
  8. 94
      src/views/notecard.less

2
build/minified/elements/label.min.css
File diff suppressed because it is too large
View File

2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File

38
build/uncompressed/elements/label.css
View File

@ -150,45 +150,45 @@ a.ui.label:hover:before {
margin: 0em;
top: 0em;
left: 0em;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
-webkit-border-radius: 4px 4px 0em 0em;
-moz-border-radius: 4px 4px 0em 0em;
border-radius: 4px 4px 0em 0em;
}
.ui.bottom.attached.label {
top: auto;
bottom: 0em;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
-webkit-border-radius: 0em 0em 4px 4px;
-moz-border-radius: 0em 0em 4px 4px;
border-radius: 0em 0em 4px 4px;
}
.ui.top.left.attached.label {
width: auto;
margin-top: 0em !important;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
.ui.top.right.attached.label {
width: auto;
left: auto;
right: 0em;
-webkit-border-radius: 0em 0.3125em 0em 0.3125em;
-moz-border-radius: 0em 0.3125em 0em 0.3125em;
border-radius: 0em 0.3125em 0em 0.3125em;
-webkit-border-radius: 0em 4px 0em 4px;
-moz-border-radius: 0em 4px 0em 4px;
border-radius: 0em 4px 0em 4px;
}
.ui.bottom.left.attached.label {
width: auto;
top: auto;
bottom: 0em;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
-webkit-border-radius: 4px 0em 0em 4px;
-moz-border-radius: 4px 0em 0em 4px;
border-radius: 4px 0em 0em 4px;
}
.ui.bottom.right.attached.label {
width: auto;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
/*-------------------
Corner Label
@ -200,10 +200,10 @@ a.ui.label:hover:before {
right: 0em;
z-index: 10;
margin: 0em;
font-size: 0.9em;
width: 1.75em;
height: 1.75em;
padding: 0em;
font-size: 0.9em;
text-align: center;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;

70
node/src/documents/quirky/card.html
View File

@ -37,6 +37,9 @@ type : 'Quirky Element'
<div class="ui idea card" data-votes="150">
<div class="idea">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
@ -55,7 +58,7 @@ type : 'Quirky Element'
<span class="count">58</span> votes to go
</div>
</div>
<div class="ui bottom attached teal progress">
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="ui dimmer">
@ -78,6 +81,9 @@ type : 'Quirky Element'
<div class="ui idea cards">
<div class="card" data-votes="111">
<div class="idea">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
@ -96,7 +102,7 @@ type : 'Quirky Element'
<span class="count">58</span> votes to go
</div>
</div>
<div class="ui bottom attached teal progress">
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="ui dimmer">
@ -113,6 +119,9 @@ type : 'Quirky Element'
</div>
<div class="card" data-votes="51">
<div class="idea">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="image">
<img src="/images/demo/invention2.jpg">
</div>
@ -131,7 +140,7 @@ type : 'Quirky Element'
<span class="count">58</span> votes to go
</div>
</div>
<div class="ui bottom attached teal progress">
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="ui dimmer">
@ -148,6 +157,9 @@ type : 'Quirky Element'
</div>
<div class="card" data-votes="11">
<div class="idea">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="image">
<img src="/images/demo/invention3.jpg">
</div>
@ -166,7 +178,7 @@ type : 'Quirky Element'
<span class="count">58</span> votes to go
</div>
</div>
<div class="ui bottom attached teal progress">
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="ui dimmer">
@ -184,12 +196,62 @@ type : 'Quirky Element'
</div>
</div>
<h3 class="ui header">States</h3>
<div class="example">
<h4 class="ui header">Voted</h4>
<div class="ui voted idea card" data-votes="150">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="idea">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
<div class="header">Dog Moods</div>
<div class="description">
Wouldn't it be nice if your dog could always be happy. Introducing a device which will help your dog maintain his mood in any situation.
</div>
</div>
<div class="meta">
<div class="countdown">
<i class="icon sketchy clock"></i>
12 days left
</div>
<div class="votes">
<i class="sketchy checkmark circle icon"></i>
<span class="count">58</span> votes to go
</div>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="ui dimmer">
<div class="content">
<div class="middle">
<i class="sketchy x circle close link icon"></i>
<div class="buttons">
<div class="ui submit vote button">Vote</div>
<div class="ui button">Details</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Profile</h2>
<div class="example">
<h4 class="ui header">Single</h4>
<p>A profile card</p>
<div class="ui profile card">
<div class="ui corner vote label">
<i class="icon sketchy checkmark"></i>
</div>
<div class="content">
<div class="caption">Invented by</div>
<a class="name">

38
node/src/files/components/semantic/elements/label.css
View File

@ -150,45 +150,45 @@ a.ui.label:hover:before {
margin: 0em;
top: 0em;
left: 0em;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
-webkit-border-radius: 4px 4px 0em 0em;
-moz-border-radius: 4px 4px 0em 0em;
border-radius: 4px 4px 0em 0em;
}
.ui.bottom.attached.label {
top: auto;
bottom: 0em;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
-webkit-border-radius: 0em 0em 4px 4px;
-moz-border-radius: 0em 0em 4px 4px;
border-radius: 0em 0em 4px 4px;
}
.ui.top.left.attached.label {
width: auto;
margin-top: 0em !important;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
.ui.top.right.attached.label {
width: auto;
left: auto;
right: 0em;
-webkit-border-radius: 0em 0.3125em 0em 0.3125em;
-moz-border-radius: 0em 0.3125em 0em 0.3125em;
border-radius: 0em 0.3125em 0em 0.3125em;
-webkit-border-radius: 0em 4px 0em 4px;
-moz-border-radius: 0em 4px 0em 4px;
border-radius: 0em 4px 0em 4px;
}
.ui.bottom.left.attached.label {
width: auto;
top: auto;
bottom: 0em;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
-webkit-border-radius: 4px 0em 0em 4px;
-moz-border-radius: 4px 0em 0em 4px;
border-radius: 4px 0em 0em 4px;
}
.ui.bottom.right.attached.label {
width: auto;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
/*-------------------
Corner Label
@ -200,10 +200,10 @@ a.ui.label:hover:before {
right: 0em;
z-index: 10;
margin: 0em;
font-size: 0.9em;
width: 1.75em;
height: 1.75em;
padding: 0em;
font-size: 0.9em;
text-align: center;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;

90
node/src/files/overrides/card.css
View File

@ -38,9 +38,35 @@
Overlay
---------------*/
.ui.cards .card .vote.corner.label,
.ui.card .vote.corner.label {
opacity: 0;
font-size: 1em;
background-color: transparent;
color: #FFFFFF;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.ui.cards .card .vote.corner.label .icon,
.ui.card .vote.corner.label .icon {
font-size: 0.9em;
}
.ui.cards .card .vote.corner.label:after,
.ui.card .vote.corner.label:after {
border-right-color: #5BBD72
}
.ui.cards .card .dimmer,
.ui.card .dimmer {
background-color: rgba(0, 177, 219, 0.6);
background-color: rgba(80, 80, 80, 0.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.ui.cards .card .dimmer .close,
.ui.card .dimmer .close {
@ -83,12 +109,34 @@
States
*******************************/
/* Dimmed */
.ui.cards .dimmed.card > :not(.dimmer),
.ui.dimmed.card > :not(.dimmer) {
-webkit-filter: blur(5px) grayscale(0.7);
-moz-filter: blur(5px) grayscale(0.7);
}
/* Voted */
.ui.cards .card.voted .vote.corner.label,
.ui.voted.card .vote.corner.label {
opacity: 1;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: card-appear;
-moz-animation-name: card-appear;
-o-animation-name: card-appear;
animation-name: card-appear;
}
/*******************************
Variations
*******************************/
@ -112,3 +160,43 @@
margin: 0em 0.5em 1em;
}
/*******************************
Transitions
*******************************/
@-webkit-keyframes card-appear {
0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -webkit-transform-origin: 100%% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0) rotate(0deg); }
}
@-moz-keyframes card-appear {
0% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -moz-transform-origin: 0% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -moz-transform-origin: 100% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -moz-transform-origin: 100%% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -moz-transform-origin: 0% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0) rotate(0deg); }
}
@-o-keyframes card-appear {
0% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -o-transform-origin: 0% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -o-transform-origin: 100% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -o-transform-origin: 100%% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -o-transform-origin: 0% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0) rotate(0deg); }
}
@keyframes card-appear {
0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; transform-origin: 100%% 0%; transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0) rotate(0deg); }
}

38
src/elements/label.less
View File

@ -196,26 +196,26 @@ a.ui.label:hover:before {
margin: 0em;
top: 0em;
left: 0em;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
-webkit-border-radius: 4px 4px 0em 0em;
-moz-border-radius: 4px 4px 0em 0em;
border-radius: 4px 4px 0em 0em;
}
.ui.bottom.attached.label {
top: auto;
bottom: 0em;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
-webkit-border-radius: 0em 0em 4px 4px;
-moz-border-radius: 0em 0em 4px 4px;
border-radius: 0em 0em 4px 4px;
}
.ui.top.left.attached.label {
width: auto;
margin-top: 0em !important;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
.ui.top.right.attached.label {
@ -223,24 +223,24 @@ a.ui.label:hover:before {
left: auto;
right: 0em;
-webkit-border-radius: 0em 0.3125em 0em 0.3125em;
-moz-border-radius: 0em 0.3125em 0em 0.3125em;
border-radius: 0em 0.3125em 0em 0.3125em;
-webkit-border-radius: 0em 4px 0em 4px;
-moz-border-radius: 0em 4px 0em 4px;
border-radius: 0em 4px 0em 4px;
}
.ui.bottom.left.attached.label {
width: auto;
top: auto;
bottom: 0em;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
-webkit-border-radius: 4px 0em 0em 4px;
-moz-border-radius: 4px 0em 0em 4px;
border-radius: 4px 0em 0em 4px;
}
.ui.bottom.right.attached.label {
width: auto;
-webkit-border-radius: 0.3125em 0em 0.3125em 0em;
-moz-border-radius: 0.3125em 0em 0.3125em 0em;
border-radius: 0.3125em 0em 0.3125em 0em;
-webkit-border-radius: 4px 0em 4px 0em;
-moz-border-radius: 4px 0em 4px 0em;
border-radius: 4px 0em 4px 0em;
}
/*-------------------
@ -255,11 +255,11 @@ a.ui.label:hover:before {
z-index: 10;
margin: 0em;
font-size: 0.9em;
width: 1.75em;
height: 1.75em;
padding: 0em;
font-size: 0.9em;
text-align: center;
-webkit-transition: color 0.2s ease;

94
src/views/notecard.less
View File

@ -1,94 +0,0 @@
/*******************************
UI Cover View
*******************************/
/*--------------
UI Note Card
---------------*/
/* Normal */
.ui.notecard {
position: relative;
width: 520px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: #FDFBE9;
border: 1px solid #DDDDDD;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.ui.notecard .stripes {
height: 100%;
margin-top: 10px;
padding: 0px 5px 10px;
background: url(../images/notecard-stripes.png) repeat;
line-height: 21px;
}
.ui.notecard .stripes h2 {
margin: 0px;
font-size: 20px;
font-weight: bold;
}
.ui.notecard .stripes p {
margin: 0px;
padding: 0px;
font-size: 12px;
}
.ui.notecard .stripes .image {
display: block;
overflow: hidden;
border: 1px solid #DAD8C9;
background: #FFFFFF url(../images/placeholder-tiny.png) no-repeat center center;
padding: 4px;
}
.ui.notecard .stripes .image img {
display: block;
}
.ui.notecard br,
.ui.notecard hr {
height: 21px;
border: none;
background-color: transparent;
}
/* imageless */
.ui.notecard.simple .stripes {
margin-top: 10px;
background-image: -moz-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px);
background-image: -webkit-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px);
background-image: -ms-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px);
background-image: -o-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px);
background-image: repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px);
}
/* contrast */
.ui.notecard.contrast {
border: none;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
/*--------------
Clipped
---------------*/
.ui.clipped.notecard.paperclip img {
height: auto;
width: 135px;
}
.ui.clipped.notecard.stripes {
min-height: 150px;
padding: 0px 5px 10px 160px;
}
Write Preview
Loading…
Cancel
Save