updates cards more, fixes labels, voted state

build/uncompressed/elements/label.css

@@ -150,45 +150,45 @@ a.ui.label:hover:before {
   margin: 0em;
   top: 0em;
   left: 0em;
-  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -webkit-border-radius: 4px 4px 0em 0em;
-  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 4px 4px 0em 0em;
-  border-radius: 0.3125em 0.3125em 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;
+  -webkit-border-radius: 0em 0em 4px 4px;
-  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 4px 4px;
-  border-radius: 0em 0em 0.3125em 0.3125em;
+  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;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;
+  -webkit-border-radius: 0em 4px 0em 4px;
-  -moz-border-radius: 0em 0.3125em 0em 0.3125em;
+  -moz-border-radius: 0em 4px 0em 4px;
-  border-radius: 0em 0.3125em 0em 0.3125em;
+  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;
+  -webkit-border-radius: 4px 0em 0em 4px;
-  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 4px 0em 0em 4px;
-  border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 4px 0em 0em 4px;
 }
 .ui.bottom.right.attached.label {
   width: auto;
-  -webkit-border-radius: 0.3125em 0em 0.3125em 0em;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;

node/src/documents/quirky/card.html

@@ -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">

node/src/files/components/semantic/elements/label.css

@@ -150,45 +150,45 @@ a.ui.label:hover:before {
   margin: 0em;
   top: 0em;
   left: 0em;
-  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -webkit-border-radius: 4px 4px 0em 0em;
-  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 4px 4px 0em 0em;
-  border-radius: 0.3125em 0.3125em 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;
+  -webkit-border-radius: 0em 0em 4px 4px;
-  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 4px 4px;
-  border-radius: 0em 0em 0.3125em 0.3125em;
+  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;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;
+  -webkit-border-radius: 0em 4px 0em 4px;
-  -moz-border-radius: 0em 0.3125em 0em 0.3125em;
+  -moz-border-radius: 0em 4px 0em 4px;
-  border-radius: 0em 0.3125em 0em 0.3125em;
+  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;
+  -webkit-border-radius: 4px 0em 0em 4px;
-  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 4px 0em 0em 4px;
-  border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 4px 0em 0em 4px;
 }
 .ui.bottom.right.attached.label {
   width: auto;
-  -webkit-border-radius: 0.3125em 0em 0.3125em 0em;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;

node/src/files/overrides/card.css

@@ -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); }
+}

src/elements/label.less

@@ -196,26 +196,26 @@ a.ui.label:hover:before {
   margin: 0em;
   top: 0em;
   left: 0em;
-  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -webkit-border-radius: 4px 4px 0em 0em;
-  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 4px 4px 0em 0em;
-  border-radius: 0.3125em 0.3125em 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;
+  -webkit-border-radius: 0em 0em 4px 4px;
-  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 4px 4px;
-  border-radius: 0em 0em 0.3125em 0.3125em;  
+  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;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;
+  -webkit-border-radius: 0em 4px 0em 4px;
-  -moz-border-radius: 0em 0.3125em 0em 0.3125em;
+  -moz-border-radius: 0em 4px 0em 4px;
-  border-radius: 0em 0.3125em 0em 0.3125em;
+  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;
+  -webkit-border-radius: 4px 0em 0em 4px;
-  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 4px 0em 0em 4px;
-  border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 4px 0em 0em 4px;
 }
 .ui.bottom.right.attached.label {
   width: auto;
-  -webkit-border-radius: 0.3125em 0em 0.3125em 0em;
+  -webkit-border-radius: 4px 0em 4px 0em;
-  -moz-border-radius: 0.3125em 0em 0.3125em 0em;
+  -moz-border-radius: 4px 0em 4px 0em;
-  border-radius: 0.3125em 0em 0.3125em 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;

src/views/notecard.less

@@ -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;
-}