Browse Source
Former-commit-id: f19873566a1d1e589fd65e574fb333e6288223b8 Former-commit-id: d5b3843688941ff749515d37229b6f509f791faabeta
jlukic
11 years ago
84 changed files with 28860 additions and 23 deletions
@ -0,0 +1,79 @@ |
|||
/* |
|||
* # Semantic Breadcrumb |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Breadcrumb |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb { |
|||
margin: 1em 0em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.breadcrumb:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.breadcrumb:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .divider { |
|||
display: inline-block; |
|||
opacity: 0.5; |
|||
margin: 0em 0.15em 0em; |
|||
|
|||
font-size: 1em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.ui.breadcrumb a.section { |
|||
cursor: pointer; |
|||
} |
|||
.ui.breadcrumb .section { |
|||
display: inline-block; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/* Loose Coupling */ |
|||
.ui.breadcrumb.segment { |
|||
display: inline-block; |
|||
padding: 0.5em 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .active.section { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.breadcrumb { |
|||
font-size: 0.75em; |
|||
} |
|||
.ui.large.breadcrumb { |
|||
font-size: 1.1em; |
|||
} |
|||
.ui.huge.breadcrumb { |
|||
font-size: 1.3em; |
|||
} |
|||
@ -0,0 +1,536 @@ |
|||
/* |
|||
* # Semantic Form |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 22 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Form |
|||
---------------------*/ |
|||
|
|||
.ui.form { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
.ui.form :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.form :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Content |
|||
---------------------*/ |
|||
|
|||
.ui.form > p { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field |
|||
---------------------*/ |
|||
|
|||
.ui.form .field { |
|||
clear: both; |
|||
margin: 0em 0em 1em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labels |
|||
---------------------*/ |
|||
|
|||
.ui.form .field > label { |
|||
margin: 0em 0em 0.3em; |
|||
display: block; |
|||
|
|||
color: #555555; |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Standard Inputs |
|||
---------------------*/ |
|||
|
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="text"], |
|||
.ui.form input[type="date"], |
|||
.ui.form input[type="password"], |
|||
.ui.form .ui.input { |
|||
width: 100%; |
|||
} |
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="text"], |
|||
.ui.form input[type="date"], |
|||
.ui.form input[type="password"] { |
|||
|
|||
margin: 0em; |
|||
padding: 0.85em 1.2em; |
|||
font-size: 0.875em; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
outline: none; |
|||
|
|||
|
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-o-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
|
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.textarea, |
|||
.ui.form textarea { |
|||
line-height: 1.33; |
|||
min-height: 8em; |
|||
height: 12em; |
|||
max-height: 24em; |
|||
resize: vertical; |
|||
} |
|||
.ui.form select { |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.ui.form textarea, |
|||
.ui.form input[type="checkbox"] { |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Dividers |
|||
---------------------*/ |
|||
|
|||
.ui.form .divider { |
|||
clear: both; |
|||
margin: 1em 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Types of Messages |
|||
---------------------*/ |
|||
|
|||
.ui.form .info.message, |
|||
.ui.form .warning.message, |
|||
.ui.form .error.message { |
|||
display: none; |
|||
} |
|||
|
|||
/* Assumptions */ |
|||
.ui.form .message:first-child { |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Validation Prompt |
|||
---------------------*/ |
|||
|
|||
.ui.form .field .prompt.label { |
|||
white-space: nowrap; |
|||
} |
|||
.ui.form .inline.field .prompt { |
|||
margin-top: 0em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.form .inline.field .prompt:before { |
|||
margin-top: -0.3em; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.form input[type="text"]:focus, |
|||
.ui.form input[type="password"]:focus, |
|||
.ui.form textarea:focus { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
border-color: rgba(0, 0, 0, 0.2); |
|||
border-bottom-left-radius: 0; |
|||
border-top-left-radius: 0; |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.warning .warning.message { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Warning |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.error .error.message { |
|||
display: block; |
|||
} |
|||
|
|||
/* On Field(s) */ |
|||
.ui.form .fields.error .field label, |
|||
.ui.form .field.error label { |
|||
color: #D95C5C; |
|||
} |
|||
.ui.form .fields.error .field textarea, |
|||
.ui.form .fields.error .field input[type="text"], |
|||
.ui.form .fields.error .field input[type="date"], |
|||
.ui.form .fields.error .field input[type="password"], |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="text"], |
|||
.ui.form .field.error input[type="date"], |
|||
.ui.form .field.error input[type="password"] { |
|||
background-color: #FFFAFA; |
|||
border-color: #E7BEBE; |
|||
border-left: none; |
|||
|
|||
color: #D95C5C; |
|||
padding-left: 1.2em; |
|||
|
|||
border-bottom-left-radius: 0; |
|||
border-top-left-radius: 0; |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
|
|||
} |
|||
.ui.form .field.error textarea:focus, |
|||
.ui.form .field.error input[type="text"]:focus, |
|||
.ui.form .field.error input[type="password"]:focus { |
|||
border-color: rgba(255, 80, 80, 1); |
|||
color: rgba(255, 80, 80, 1); |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Empty (Placeholder) |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.form ::-webkit-input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.form ::-moz-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.form :focus::-webkit-input-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
.ui.form :focus::-moz-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.form .error ::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.form .error ::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.form .error :focus::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
.ui.form .error :focus::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Disabled |
|||
---------------------*/ |
|||
|
|||
.ui.form .field :disabled, |
|||
.ui.form .field.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled label { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled :disabled { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Loading State |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.loading { |
|||
position: relative; |
|||
} |
|||
.ui.form.loading:after { |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
content: ''; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; |
|||
visibility: visible; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Fluid Width |
|||
---------------------*/ |
|||
|
|||
.ui.form.fluid { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/*-------------------------- |
|||
Input w/ attached Button |
|||
---------------------------*/ |
|||
|
|||
.ui.form input.attached { |
|||
width: auto; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Date Input |
|||
---------------------*/ |
|||
|
|||
.ui.form .date.field > label { |
|||
position: relative; |
|||
} |
|||
.ui.form .date.field > label:after { |
|||
position: absolute; |
|||
top: 1.4em; |
|||
right: 0.5em; |
|||
|
|||
font-family: 'Icons'; |
|||
content: '📅'; /* '\1f4c5' */ |
|||
font-size: 1.5em; |
|||
font-weight: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inverted Colors |
|||
---------------------*/ |
|||
.ui.inverted.form label { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.form .field.error textarea, |
|||
.ui.inverted.form .field.error input[type="text"] { |
|||
background-color: #FFCCCC; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field Groups |
|||
---------------------*/ |
|||
|
|||
/* Grouped Vertically */ |
|||
.ui.form .grouped.fields { |
|||
margin: 0em 0em 1em; |
|||
} |
|||
.ui.form .grouped.fields .field { |
|||
display: block; |
|||
float: none; |
|||
margin: 0.5em 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Fields |
|||
---------------------*/ |
|||
|
|||
/* Split fields */ |
|||
.ui.form .fields { |
|||
clear: both; |
|||
} |
|||
.ui.form .fields:after { |
|||
content: ' '; |
|||
display: block; |
|||
clear: both; |
|||
visibility: hidden; |
|||
line-height: 0; |
|||
height: 0; |
|||
} |
|||
.ui.form .fields .field { |
|||
clear: none; |
|||
float: left; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.form .fields .field:first-child { |
|||
border-left: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Other Combinations */ |
|||
.ui.form .two.fields .field { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
.ui.form .three.fields .field { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .four.fields .field { |
|||
width: 25%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .five.fields .field { |
|||
width: 20%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
/* override sides, ie8 no last-child */ |
|||
.ui.form .fields .field:first-child { |
|||
padding-left: 0%; |
|||
} |
|||
.ui.form .fields .field:last-child { |
|||
padding-right: 0%; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inline Fields |
|||
---------------------*/ |
|||
|
|||
.ui.form .inline.fields .field { |
|||
min-height: 1.3em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui.form .inline.fields .field > label, |
|||
.ui.form .inline.fields .field > p, |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.fields .field > select, |
|||
.ui.form .inline.field > label, |
|||
.ui.form .inline.field > p, |
|||
.ui.form .inline.field > input, |
|||
.ui.form .inline.field > select { |
|||
|
|||
display: inline-block; |
|||
width: auto; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
vertical-align: middle; |
|||
font-size: 1em; |
|||
} |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.field > input { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
.ui.form .inline.fields .field > :first-child, |
|||
.ui.form .inline.field > :first-child { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
.ui.form .inline.fields .field > :only-child, |
|||
.ui.form .inline.field > :only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.small.form { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.small.form textarea, |
|||
.ui.small.form input[type="text"], |
|||
.ui.small.form input[type="password"], |
|||
.ui.small.form label { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.form { |
|||
font-size: 1.125em; |
|||
} |
|||
|
|||
@ -0,0 +1,655 @@ |
|||
/* |
|||
* # Semantic Grid |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 6 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Grid |
|||
*******************************/ |
|||
|
|||
.ui.grid { |
|||
display: block; |
|||
text-align: left; |
|||
|
|||
font-size: 0em; |
|||
margin: 0% -1.5%; |
|||
padding: 0%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.grid:after, |
|||
.ui.row:after { |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*------------------- |
|||
Columns |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .column, |
|||
.ui.grid > .row > .column { |
|||
|
|||
display: inline-block; |
|||
text-align: left; |
|||
font-size: 1rem; |
|||
|
|||
padding-left: 1.5%; |
|||
padding-right: 1.5%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*------------------- |
|||
Rows |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .row { |
|||
display: block; |
|||
width: 100% !important; |
|||
margin-top: 1.5%; |
|||
padding: 1.5% 0% 0%; |
|||
font-size: 0rem; |
|||
} |
|||
.ui.grid > .row:first-child { |
|||
padding-top: 0rem; |
|||
margin-top: 0rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .row > img, |
|||
.ui.grid > .row > .column > img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.ui.grid .column > .ui.segment:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Page |
|||
--------------------*/ |
|||
|
|||
.ui.page.grid { |
|||
margin: 0%; |
|||
padding: 0% 2%; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
.ui.responsive.grid { |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
min-width: 320px; |
|||
} |
|||
|
|||
@media only screen and (max-width : 1000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 5.55%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 8%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1500px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 13%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1750px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 18%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 2000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 23%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Width |
|||
--------------------*/ |
|||
|
|||
/* Sizing Combinations */ |
|||
.ui.grid .one.wide.column { |
|||
width: 6.25%; |
|||
} |
|||
.ui.grid .two.wide.column { |
|||
width: 12.5%; |
|||
} |
|||
.ui.grid .three.wide.column { |
|||
width: 18.75%; |
|||
} |
|||
.ui.grid .four.wide.column { |
|||
width: 25%; |
|||
} |
|||
.ui.grid .five.wide.column { |
|||
width: 31.25%; |
|||
} |
|||
.ui.grid .six.wide.column { |
|||
width: 37.5%; |
|||
} |
|||
.ui.grid .seven.wide.column { |
|||
width: 43.75%; |
|||
} |
|||
.ui.grid .eight.wide.column { |
|||
width: 50%; |
|||
} |
|||
.ui.grid .nine.wide.column { |
|||
width: 56.25%; |
|||
} |
|||
.ui.grid .ten.wide.column { |
|||
width: 62.5%; |
|||
} |
|||
.ui.grid .eleven.wide.column { |
|||
width: 68.75%; |
|||
} |
|||
.ui.grid .twelve.wide.column { |
|||
width: 75%; |
|||
} |
|||
.ui.grid .thirteen.wide.column { |
|||
width: 81.25%; |
|||
} |
|||
.ui.grid .fourteen.wide.column { |
|||
width: 87.5%; |
|||
} |
|||
.ui.grid .fifteen.wide.column { |
|||
width: 93.75%; |
|||
} |
|||
.ui.grid .sixteen.wide.column { |
|||
width: 100%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Count |
|||
--------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.grid > .column, |
|||
.ui.grid > .row > .column { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.one.column.grid > .row > .column, |
|||
.ui.one.column.grid > .column, |
|||
.ui.grid > .one.column.row > .column { |
|||
width: 100%; |
|||
} |
|||
.ui.two.column.grid > .row > .column, |
|||
.ui.two.column.grid > .column, |
|||
.ui.grid > .two.column.row > .column { |
|||
width: 50%; |
|||
} |
|||
.ui.three.column.grid > .row > .column, |
|||
.ui.three.column.grid > .column, |
|||
.ui.grid > .three.column.row > .column { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.four.column.grid > .row > .column, |
|||
.ui.four.column.grid > .column, |
|||
.ui.grid > .four.column.row > .column { |
|||
width: 25%; |
|||
} |
|||
.ui.five.column.grid > .row > .column, |
|||
.ui.five.column.grid > .column, |
|||
.ui.grid > .five.column.row > .column { |
|||
width: 20%; |
|||
} |
|||
.ui.six.column.grid > .row > .column, |
|||
.ui.six.column.grid > .column, |
|||
.ui.grid > .six.column.row > .column { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.seven.column.grid > .row > .column, |
|||
.ui.seven.column.grid > .column, |
|||
.ui.grid > .seven.column.row > .column { |
|||
width: 14.2857%; |
|||
} |
|||
.ui.eight.column.grid > .row > .column, |
|||
.ui.eight.column.grid > .column, |
|||
.ui.grid > .eight.column.row > .column { |
|||
width: 12.5%; |
|||
} |
|||
.ui.nine.column.grid > .row > .column, |
|||
.ui.nine.column.grid > .column, |
|||
.ui.grid > .nine.column.row > .column { |
|||
width: 11.1111%; |
|||
} |
|||
.ui.ten.column.grid > .row > .column, |
|||
.ui.ten.column.grid > .column, |
|||
.ui.grid > .ten.column.row > .column { |
|||
width: 10%; |
|||
} |
|||
.ui.eleven.column.grid > .row > .column, |
|||
.ui.eleven.column.grid > .column, |
|||
.ui.grid > .eleven.column.row > .column { |
|||
width: 9.0909%; |
|||
} |
|||
.ui.twelve.column.grid > .row > .column, |
|||
.ui.twelve.column.grid > .column, |
|||
.ui.grid > .twelve.column.row > .column { |
|||
width: 8.3333%; |
|||
} |
|||
.ui.thirteen.column.grid > .row > .column, |
|||
.ui.thirteen.column.grid > .column, |
|||
.ui.grid > .thirteen.column.row > .column { |
|||
width: 7.6923%; |
|||
} |
|||
.ui.fourteen.column.grid > .row > .column, |
|||
.ui.fourteen.column.grid > .column, |
|||
.ui.grid > .fourteen.column.row > .column { |
|||
width: 7.1428%; |
|||
} |
|||
.ui.fifteen.column.grid > .row > .column, |
|||
.ui.fifteen.column.grid > .column, |
|||
.ui.grid > .fifteen.column.row > .column { |
|||
width: 6.6666%; |
|||
} |
|||
.ui.sixteen.column.grid > .row > .column, |
|||
.ui.sixteen.column.grid > .column, |
|||
.ui.grid > .sixteen.column.row > .column { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.grid > .column:only-child, |
|||
.ui.grid > .row > .column:only-child { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
"Floated" |
|||
-----------------------*/ |
|||
|
|||
.ui.grid .left.floated.column { |
|||
float: left; |
|||
} |
|||
.ui.grid .right.floated.column { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Divided |
|||
-----------------------*/ |
|||
|
|||
.ui.divided.grid, |
|||
.ui.divided.grid > .row { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
} |
|||
.ui.divided.grid > .column:not(.row), |
|||
.ui.divided.grid > .row > .column { |
|||
display: table-cell; |
|||
-webkit-box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
-moz-box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
} |
|||
.ui.divided.grid > .column.row { |
|||
display: table; |
|||
} |
|||
.ui.divided.grid > .column:first-child, |
|||
.ui.divided.grid > .row > .column:first-child { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Vertically Divided */ |
|||
.ui.vertically.divided.grid > .row { |
|||
-webkit-box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
-moz-box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
} |
|||
.ui.vertically.divided.grid > .row > .column, |
|||
.ui.vertically.divided.grid > .column:not(.row), |
|||
.ui.vertically.divided.grid > .row:first-child { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Celled |
|||
-----------------------*/ |
|||
|
|||
.ui.celled.grid { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
-webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
-moz-box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .row, |
|||
.ui.celled.grid > .column.row, |
|||
.ui.celled.grid > .column.row:first-child { |
|||
display: table; |
|||
width: 100%; |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
-webkit-box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
-moz-box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .column:not(.row), |
|||
.ui.celled.grid > .row > .column { |
|||
display: table-cell; |
|||
padding: 0.75em; |
|||
-webkit-box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
-moz-box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .column:first-child, |
|||
.ui.celled.grid > .row > .column:first-child { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.ui.celled.responsive.grid { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Horizontally Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.left.aligned.grid, |
|||
.ui.left.aligned.grid > .row > .column, |
|||
.ui.left.aligned.grid > .column, |
|||
.ui.grid .left.aligned.column, |
|||
.ui.grid > .left.aligned.row > .column { |
|||
text-align: left; |
|||
} |
|||
.ui.center.aligned.grid, |
|||
.ui.center.aligned.grid > .row > .column, |
|||
.ui.center.aligned.grid > .column, |
|||
.ui.grid .center.aligned.column, |
|||
.ui.grid > .center.aligned.row > .column { |
|||
text-align: center; |
|||
} |
|||
.ui.right.aligned.grid, |
|||
.ui.right.aligned.grid > .row > .column, |
|||
.ui.right.aligned.grid > .column, |
|||
.ui.grid .right.aligned.column, |
|||
.ui.grid > .right.aligned.row > .column { |
|||
text-align: right; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Vertically Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.top.aligned.grid, |
|||
.ui.top.aligned.grid > .row > .column, |
|||
.ui.top.aligned.grid > .column, |
|||
.ui.grid .top.aligned.column, |
|||
.ui.grid > .top.aligned.row > .column { |
|||
vertical-align: top; |
|||
} |
|||
.ui.middle.aligned.grid, |
|||
.ui.middle.aligned.grid > .row > .column, |
|||
.ui.middle.aligned.grid > .column, |
|||
.ui.grid .middle.aligned.column, |
|||
.ui.grid > .middle.aligned.row > .column { |
|||
vertical-align: middle; |
|||
} |
|||
.ui.bottom.aligned.grid, |
|||
.ui.bottom.aligned.grid > .row > .column, |
|||
.ui.bottom.aligned.grid > .column, |
|||
.ui.grid .bottom.aligned.column, |
|||
.ui.grid > .bottom.aligned.row > .column { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Equal Height Columns |
|||
-----------------------*/ |
|||
|
|||
.ui.grid > .equal.height.row { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.grid > .equal.height.row > .column { |
|||
display: table-cell; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Only (Device) |
|||
-----------------------*/ |
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width : 768px) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.mobile.only.grid, |
|||
.ui.celled.mobile.only.grid, |
|||
.ui.divided.mobile.only.grid .row, |
|||
.ui.celled.mobile.only.grid .row, |
|||
.ui.divided.grid .mobile.only.row, |
|||
.ui.celled.grid .mobile.only.row, |
|||
.ui.grid .mobile.only.equal.height.row, |
|||
.ui.mobile.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .mobile.only.column, |
|||
.ui.celled.grid > .row > .mobile.only.column, |
|||
.ui.divided.mobile.only.grid > .row > .column, |
|||
.ui.celled.mobile.only.grid > .row > .column, |
|||
.ui.divided.mobile.only.grid > .column, |
|||
.ui.celled.mobile.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 768px) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row, |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Tablet Only */ |
|||
@media only screen and (min-width : 768px) and (max-width : 998px) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.tablet.only.grid, |
|||
.ui.celled.tablet.only.grid, |
|||
.ui.divided.tablet.only.grid .row, |
|||
.ui.celled.tablet.only.grid .row, |
|||
.ui.divided.grid .tablet.only.row, |
|||
.ui.celled.grid .tablet.only.row, |
|||
.ui.grid .tablet.only.equal.height.row, |
|||
.ui.tablet.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .tablet.only.column, |
|||
.ui.celled.grid > .row > .tablet.only.column, |
|||
.ui.divided.tablet.only.grid > .row > .column, |
|||
.ui.celled.tablet.only.grid > .row > .column, |
|||
.ui.divided.tablet.only.grid > .column, |
|||
.ui.celled.tablet.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : 768px), (min-width: 998px) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row, |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Computer Only */ |
|||
@media only screen and (min-width : 998px) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.computer.only.grid, |
|||
.ui.celled.computer.only.grid, |
|||
.ui.divided.computer.only.grid .row, |
|||
.ui.celled.computer.only.grid .row, |
|||
.ui.divided.grid .computer.only.row, |
|||
.ui.celled.grid .computer.only.row, |
|||
.ui.grid .computer.only.equal.height.row, |
|||
.ui.computer.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .computer.only.column, |
|||
.ui.celled.grid > .row > .computer.only.column, |
|||
.ui.divided.computer.only.grid > .row > .column, |
|||
.ui.celled.computer.only.grid > .row > .column, |
|||
.ui.divided.computer.only.grid > .column, |
|||
.ui.celled.computer.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : 998px) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row, |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Padded |
|||
--------------------*/ |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Stackable |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 768px) { |
|||
.ui.stackable.grid { |
|||
display: block !important; |
|||
padding: 0em; |
|||
} |
|||
.ui.stackable.grid .row > .column, |
|||
.ui.stackable.grid > .column { |
|||
display: block !important; |
|||
width: auto !important; |
|||
|
|||
margin: 1.5em 5% 0em !important; |
|||
padding: 1.5em 0em 0em !important; |
|||
|
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
} |
|||
.ui.stackable.divided.grid .column, |
|||
.ui.stackable.celled.grid .column { |
|||
border-top: 1px dotted rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.stackable.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.grid > .column:first-child { |
|||
margin-top: 0em !important; |
|||
padding-top: 0em !important; |
|||
} |
|||
.ui.stackable.divided.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.celled.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.divided.grid > .column:first-child, |
|||
.ui.stackable.celled.grid > .column:first-child { |
|||
border-top: none !important; |
|||
} |
|||
|
|||
/* Remove pointers from vertical menus */ |
|||
.ui.stackable.grid .vertical.pointing.menu .item:after { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,337 @@ |
|||
/* |
|||
* # Semantic Text Block - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 29 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Text Block |
|||
*******************************/ |
|||
|
|||
.ui.message { |
|||
position: relative; |
|||
min-height: 18px; |
|||
margin: 1em 0em; |
|||
|
|||
height: auto; |
|||
background-color: #EFEFEF; |
|||
padding: 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
-moz-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
} |
|||
|
|||
.ui.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* block with headers */ |
|||
.ui.message .header { |
|||
margin: 0em; |
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* block with paragraphs */ |
|||
.ui.message p { |
|||
opacity: 0.85; |
|||
margin: 0.3em 0em; |
|||
} |
|||
.ui.message > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* block with child list */ |
|||
.ui.message ul.list { |
|||
opacity: 0.85; |
|||
list-style-position: inside; |
|||
margin: 0.2em 0em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li { |
|||
position: relative; |
|||
list-style-type: none; |
|||
margin: 0em 0em 0em 1em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li:before { |
|||
position: absolute; |
|||
content: '\2022'; |
|||
top: -0.05em; |
|||
left: -0.8em; |
|||
|
|||
height: 100%; |
|||
vertical-align: baseline; |
|||
opacity: 0.5; |
|||
} |
|||
.ui.message ul.list li:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* dismissable block */ |
|||
.ui.message > .icon.close { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 1em; |
|||
right: 0.5em; |
|||
opacity: 0.7; |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
transition: |
|||
opacity 0.1s linear |
|||
; |
|||
} |
|||
.ui.message > .icon.close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.message.visible, |
|||
.ui.header.visible { |
|||
display: block !important; |
|||
} |
|||
.ui.message.hidden, |
|||
.ui.header.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Compact |
|||
---------------*/ |
|||
|
|||
.ui.compact.message { |
|||
display: inline-block; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
.ui.attached.message { |
|||
margin-left: -1px; |
|||
margin-right: -1px; |
|||
margin-bottom: -1px; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0em 0em; |
|||
-moz-border-radius: 0.325em 0.325em 0em 0em; |
|||
border-radius: 0.325em 0.325em 0em 0em; |
|||
|
|||
-webkit-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.bottom.attached.message { |
|||
margin-top: -1px; |
|||
|
|||
-webkit-border-radius: 0em 0em 0.325em 0.325em; |
|||
-moz-border-radius: 0em 0em 0.325em 0.325em; |
|||
border-radius: 0em 0em 0.325em 0.325em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.icon.message { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.icon.message > .icon { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
font-size: 3.8em; |
|||
padding-right: 0.4em; |
|||
opacity: 0.2; |
|||
} |
|||
.ui.icon.message > .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.message { |
|||
background-color: rgba(255, 255, 255, 0.05); |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.message { |
|||
-webkit-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.message { |
|||
background-color: #333333; |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Types |
|||
---------------*/ |
|||
.ui.blue.message, |
|||
.ui.info.message { |
|||
background-color: #E6F4F9; |
|||
color: #4D8796; |
|||
} |
|||
|
|||
/* Green Text Block */ |
|||
.ui.green.message { |
|||
background-color: #DEFCD5; |
|||
color: #52A954; |
|||
} |
|||
|
|||
/* Yellow Text Block */ |
|||
.ui.yellow.message, |
|||
.ui.warning.message { |
|||
background-color: #F6F3D5; |
|||
color: #96904D; |
|||
} |
|||
/* Red Text Block */ |
|||
.ui.red.message { |
|||
background-color: #F1D7D7; |
|||
|
|||
color: #A95252; |
|||
} |
|||
|
|||
/* Success Text Block */ |
|||
.ui.success.message, |
|||
.ui.positive.message { |
|||
background-color: #5BBD72; |
|||
color: #FFFFFF; |
|||
} |
|||
/* Error Text Block */ |
|||
.ui.error.message, |
|||
.ui.negative.message { |
|||
background-color: #D95C5C; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.message { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.message { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.message { |
|||
font-size: 1.125em; |
|||
} |
|||
.ui.huge.message { |
|||
font-size: 1.5em; |
|||
} |
|||
.ui.massive.message { |
|||
font-size: 2em; |
|||
} |
|||
@ -0,0 +1,526 @@ |
|||
/* |
|||
* # Semantic Table |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 24 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Table |
|||
*******************************/ |
|||
|
|||
/* Prototype */ |
|||
.ui.table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
/* Table Content */ |
|||
.ui.table th, |
|||
.ui.table tr, |
|||
.ui.table td { |
|||
border-collapse: collapse; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: all 0.1s ease-out; |
|||
-moz-transition: all 0.1s ease-out; |
|||
-o-transition: all 0.1s ease-out; |
|||
-ms-transition: all 0.1s ease-out; |
|||
transition: all 0.1s ease-out; |
|||
} |
|||
|
|||
/* Headers */ |
|||
.ui.table thead { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table th { |
|||
cursor: auto; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.03); |
|||
|
|||
text-align: left; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
padding: 0.5em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.table thead th:first-child { |
|||
border-radius: 5px 0px 0px 0px; |
|||
} |
|||
.ui.table thead th:last-child { |
|||
border-radius: 0px 5px 0px 0px; |
|||
} |
|||
.ui.table tfoot th:first-child { |
|||
border-radius: 0px 0px 0px 5px; |
|||
} |
|||
.ui.table tfoot th:last-child { |
|||
border-radius: 0px 0px 5px 0px; |
|||
} |
|||
|
|||
/* Table Cells */ |
|||
.ui.table td { |
|||
padding: 0.40em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* Footer */ |
|||
.ui.table tfoot { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table tfoot th { |
|||
font-weight: normal; |
|||
font-style: italic; |
|||
} |
|||
|
|||
/* Table Striping */ |
|||
.ui.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(0, 0, 50, 0.02); |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.table > .icon { |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.table > .icon:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* Table Segment */ |
|||
.ui.table.segment:after { |
|||
display: none; |
|||
} |
|||
.ui.table.segment.stacked:after { |
|||
display: block; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
/* Sortable */ |
|||
.ui.sortable.table thead th:hover { |
|||
background-image: none; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.sortable.table th.disabled:hover { |
|||
cursor: auto; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
|
|||
text-align: left; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Positive |
|||
---------------*/ |
|||
|
|||
.ui.table tr.positive, |
|||
.ui.table td.positive { |
|||
-webkit-box-shadow: 2px 0px 0px #119000 inset; |
|||
-moz-box-shadow: 2px 0px 0px #119000 inset; |
|||
box-shadow: 2px 0px 0px #119000 inset; |
|||
} |
|||
.ui.table tr.positive td, |
|||
.ui.table td.positive { |
|||
background-color: #F2F8F0 !important; |
|||
color: #119000 !important; |
|||
} |
|||
.ui.celled.table tr.positive:hover td, |
|||
.ui.celled.table tr:hover td.positive, |
|||
.ui.table tr.positive:hover td, |
|||
.ui.table td:hover.positive, |
|||
.ui.table th:hover.positive { |
|||
background-color: #ECF5E9 !important; |
|||
color: #119000 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Negative |
|||
---------------*/ |
|||
|
|||
.ui.table tr.negative, |
|||
.ui.table td.negative { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.negative td, |
|||
.ui.table td.negative { |
|||
background-color: #F9F4F4; |
|||
color: #CD2929 !important; |
|||
} |
|||
.ui.celled.table tr.negative:hover td, |
|||
.ui.celled.table tr:hover td.negative, |
|||
.ui.table tr.negative:hover td, |
|||
.ui.table td:hover.negative, |
|||
.ui.table th:hover.negative { |
|||
background-color: #F2E8E8 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Error |
|||
---------------*/ |
|||
|
|||
.ui.table tr.error, |
|||
.ui.table td.error { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.error td, |
|||
.ui.table td.error, |
|||
.ui.table th.error { |
|||
background-color: #F9F4F4 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
.ui.celled.table tr.error:hover td, |
|||
.ui.celled.table tr:hover td.error, |
|||
.ui.table tr.error:hover td, |
|||
.ui.table td:hover.error, |
|||
.ui.table th:hover.error { |
|||
background-color: #F2E8E8 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Warning |
|||
---------------*/ |
|||
|
|||
.ui.table tr.warning, |
|||
.ui.table td.warning { |
|||
-webkit-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
-moz-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
} |
|||
.ui.table tr.warning td, |
|||
.ui.table td.warning, |
|||
.ui.table th.warning { |
|||
background-color: #FBF6E9; |
|||
color: #7D6C00 !important; |
|||
} |
|||
.ui.celled.table tr.warning:hover td, |
|||
.ui.celled.table tr:hover td.warning, |
|||
.ui.table tr.warning:hover td, |
|||
.ui.table td:hover.warning, |
|||
.ui.table th:hover.warning { |
|||
background-color: #F3EDDC !important; |
|||
color: #7D6C00 !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.table tr.active, |
|||
.ui.table td.active { |
|||
-webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
-moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
} |
|||
|
|||
.ui.table tr.active td, |
|||
.ui.table tr td.active { |
|||
background-color: #E0E0E0 !important; |
|||
color: rgba(50, 50, 50, 0.9); |
|||
/* border-color: rgba(0, 0, 0, 0.15) !important; */ |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.table tr.disabled td, |
|||
.ui.table tr td.disabled, |
|||
.ui.table tr.disabled:hover td, |
|||
.ui.table tr:hover td.disabled { |
|||
color: rgba(150, 150, 150, 0.3); |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Column Count |
|||
---------------*/ |
|||
|
|||
.ui.two.column.table td { |
|||
width: 50%; |
|||
} |
|||
.ui.three.column.table td { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.four.column.table td { |
|||
width: 25%; |
|||
} |
|||
.ui.five.column.table td { |
|||
width: 20%; |
|||
} |
|||
.ui.six.column.table td { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.seven.column.table td { |
|||
width: 14.2857%; |
|||
} |
|||
.ui.eight.column.table td { |
|||
width: 12.5%; |
|||
} |
|||
.ui.nine.column.table td { |
|||
width: 11.1111%; |
|||
} |
|||
.ui.ten.column.table td { |
|||
width: 10%; |
|||
} |
|||
.ui.eleven.column.table td { |
|||
width: 9.0909%; |
|||
} |
|||
.ui.twelve.column.table td { |
|||
width: 8.3333%; |
|||
} |
|||
.ui.thirteen.column.table td { |
|||
width: 7.6923%; |
|||
} |
|||
.ui.fourteen.column.table td { |
|||
width: 7.1428%; |
|||
} |
|||
.ui.fifteen.column.table td { |
|||
width: 6.6666%; |
|||
} |
|||
.ui.sixteen.column.table td { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Column Width */ |
|||
.ui.table th.one.wide, |
|||
.ui.table td.one.wide { |
|||
width: 6.25%; |
|||
} |
|||
.ui.table th.two.wide, |
|||
.ui.table td.two.wide { |
|||
width: 12.5%; |
|||
} |
|||
.ui.table th.three.wide, |
|||
.ui.table td.three.wide { |
|||
width: 18.75%; |
|||
} |
|||
.ui.table th.four.wide, |
|||
.ui.table td.four.wide { |
|||
width: 25%; |
|||
} |
|||
.ui.table th.five.wide, |
|||
.ui.table td.five.wide { |
|||
width: 31.25%; |
|||
} |
|||
.ui.table th.six.wide, |
|||
.ui.table td.six.wide { |
|||
width: 37.5%; |
|||
} |
|||
.ui.table th.seven.wide, |
|||
.ui.table td.seven.wide { |
|||
width: 43.75%; |
|||
} |
|||
.ui.table th.eight.wide, |
|||
.ui.table td.eight.wide { |
|||
width: 50%; |
|||
} |
|||
.ui.table th.nine.wide, |
|||
.ui.table td.nine.wide { |
|||
width: 56.25%; |
|||
} |
|||
.ui.table th.ten.wide, |
|||
.ui.table td.ten.wide { |
|||
width: 62.5%; |
|||
} |
|||
.ui.table th.eleven.wide, |
|||
.ui.table td.eleven.wide { |
|||
width: 68.75%; |
|||
} |
|||
.ui.table th.twelve.wide, |
|||
.ui.table td.twelve.wide { |
|||
width: 75%; |
|||
} |
|||
.ui.table th.thirteen.wide, |
|||
.ui.table td.thirteen.wide { |
|||
width: 81.25%; |
|||
} |
|||
.ui.table th.fourteen.wide, |
|||
.ui.table td.fourteen.wide { |
|||
width: 87.5%; |
|||
} |
|||
.ui.table th.fifteen.wide, |
|||
.ui.table td.fifteen.wide { |
|||
width: 93.75%; |
|||
} |
|||
.ui.table th.sixteen.wide, |
|||
.ui.table td.sixteen.wide { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Celled |
|||
---------------*/ |
|||
|
|||
.ui.celled.table { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.celled.table tbody tr, |
|||
.ui.celled.table tfoot tr { |
|||
border: none; |
|||
} |
|||
.ui.celled.table th { |
|||
border: 1px solid #E0E0E0; |
|||
} |
|||
.ui.celled.table tbody td { |
|||
border: 1px solid #E0E0E0; |
|||
} |
|||
.ui.celled.table.segment th { |
|||
border: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sortable |
|||
---------------*/ |
|||
|
|||
.ui.sortable.table thead th { |
|||
cursor: pointer; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.sortable.table thead th.sorted, |
|||
.ui.sortable.table thead th.sorted:hover { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.ui.sortable.table thead th:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 1em; |
|||
opacity: 0.8; |
|||
|
|||
margin: 0em 0em 0em 0.5em; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
} |
|||
.ui.sortable.table thead th.ascending:after { |
|||
content: '\25b4'; |
|||
} |
|||
.ui.sortable.table thead th.descending:after { |
|||
content: '\25be'; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
/* Text Color */ |
|||
.ui.inverted.table td { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.inverted.table th { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/* Stripes */ |
|||
.ui.inverted.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(255, 255, 255, 0.06); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Definition |
|||
---------------*/ |
|||
|
|||
.ui.definition.table { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.definition.table tr { |
|||
border-top: 1px solid rgba(0, 0, 0 ,0.1); |
|||
} |
|||
.ui.definition.table td:first-child { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Collapsing |
|||
---------------*/ |
|||
|
|||
.ui.collapsing.table { |
|||
width: auto; |
|||
} |
|||
|
|||
/*-------------- |
|||
Basic |
|||
---------------*/ |
|||
|
|||
.ui.basic.table th { |
|||
background-color: transparent; |
|||
padding: 0.5em; |
|||
} |
|||
.ui.basic.table tbody tr { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.basic.table td { |
|||
padding: 0.8em 0.5em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Padded |
|||
---------------*/ |
|||
|
|||
.ui.padded.table th, |
|||
.ui.padded.table td { |
|||
padding: 0.8em 1em; |
|||
} |
|||
|
|||
.ui.compact.table th { |
|||
padding: 0.3em 0.5em; |
|||
} |
|||
.ui.compact.table td { |
|||
padding: 0.2em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
/* Small */ |
|||
.ui.small.table { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
/* Standard */ |
|||
.ui.table { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.table { |
|||
font-size: 1.1em; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,200 @@ |
|||
/* |
|||
* # Dividers |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Divider |
|||
*******************************/ |
|||
|
|||
.ui.divider { |
|||
margin: 1rem 0rem; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
|||
|
|||
line-height: 1; |
|||
height: 0em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.ui.vertical.divider, |
|||
.ui.horizontal.divider { |
|||
position: absolute; |
|||
|
|||
border: none; |
|||
height: 0em; |
|||
margin: 0em; |
|||
background-color: transparent; |
|||
|
|||
font-size: 0.875rem; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
|
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Vertical |
|||
---------------*/ |
|||
|
|||
.ui.vertical.divider { |
|||
position: absolute; |
|||
z-index: 2; |
|||
top: 50%; |
|||
left: 50%; |
|||
|
|||
margin: 0% 0% 0% -3%; |
|||
|
|||
width: 6%; |
|||
height: 50%; |
|||
|
|||
line-height: 0; |
|||
padding: 0em; |
|||
} |
|||
|
|||
.ui.vertical.divider:before, |
|||
.ui.vertical.divider:after { |
|||
position: absolute; |
|||
left: 50%; |
|||
content: " "; |
|||
z-index: 3; |
|||
|
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-right: 1px solid rgba(255, 255, 255, 0.8); |
|||
|
|||
width: 0%; |
|||
height: 80%; |
|||
} |
|||
|
|||
.ui.vertical.divider:before { |
|||
top: -100%; |
|||
} |
|||
|
|||
.ui.vertical.divider:after { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Horizontal |
|||
---------------*/ |
|||
|
|||
.ui.horizontal.divider { |
|||
position: relative; |
|||
top: 0%; |
|||
left: 0%; |
|||
|
|||
margin: 1rem 1.5rem; |
|||
height: auto; |
|||
padding: 0em; |
|||
|
|||
line-height: 1; |
|||
} |
|||
|
|||
.ui.horizontal.divider:before, |
|||
.ui.horizontal.divider:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
content: " "; |
|||
z-index: 3; |
|||
|
|||
width: 50%; |
|||
top: 50%; |
|||
height: 0%; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.ui.horizontal.divider:before { |
|||
left: 0%; |
|||
margin-left: -1.5rem; |
|||
} |
|||
.ui.horizontal.divider:after { |
|||
left: auto; |
|||
right: 0%; |
|||
margin-right: -1.5rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.divider > .icon { |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.divider.inverted { |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
.ui.vertical.inverted.divider, |
|||
.ui.horizontal.inverted.divider { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.divider.inverted, |
|||
.ui.divider.inverted:after, |
|||
.ui.divider.inverted:before { |
|||
border-top-color: rgba(0, 0, 0, 0.15); |
|||
border-bottom-color: rgba(255, 255, 255, 0.15); |
|||
|
|||
border-left-color: rgba(0, 0, 0, 0.15); |
|||
border-right-color: rgba(255, 255, 255, 0.15); |
|||
} |
|||
|
|||
/*-------------- |
|||
Fitted |
|||
---------------*/ |
|||
|
|||
.ui.fitted.divider { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Clearing |
|||
---------------*/ |
|||
|
|||
.ui.clearing.divider { |
|||
clear: both; |
|||
} |
|||
|
|||
/*-------------- |
|||
Section |
|||
---------------*/ |
|||
|
|||
.ui.section.divider { |
|||
margin-top: 2rem; |
|||
margin-bottom: 2rem; |
|||
} |
|||
@ -0,0 +1,325 @@ |
|||
/* |
|||
* # Semantic Headers - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 29 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Header |
|||
*******************************/ |
|||
|
|||
/* Standard */ |
|||
.ui.header { |
|||
border: none; |
|||
margin: 1em 0em 1rem; |
|||
padding: 0em; |
|||
|
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
line-height: 1.33; |
|||
} |
|||
|
|||
|
|||
.ui.header .sub.header { |
|||
font-size: 1rem; |
|||
font-weight: normal; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
|
|||
line-height: 1.2; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.header .content { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
.ui.header .icon { |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* Positioning */ |
|||
.ui.header:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.header:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.header + p { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Page Heading |
|||
---------------*/ |
|||
|
|||
h1.ui.header { |
|||
min-height: 1rem; |
|||
line-height: 1.33; |
|||
font-size: 2rem; |
|||
} |
|||
h2.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.75rem; |
|||
} |
|||
h3.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.33rem; |
|||
} |
|||
h4.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.1rem; |
|||
} |
|||
h5.ui.header { |
|||
line-height: 1.2; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content Heading |
|||
---------------*/ |
|||
|
|||
.ui.huge.header { |
|||
min-height: 1em; |
|||
font-size: 2em; |
|||
} |
|||
.ui.large.header { |
|||
font-size: 1.75em; |
|||
} |
|||
.ui.medium.header { |
|||
font-size: 1.33em; |
|||
} |
|||
.ui.small.header { |
|||
font-size: 1.1em; |
|||
} |
|||
.ui.tiny.header { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.header { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.blue.header { |
|||
color: #6ECFF5 !important; |
|||
} |
|||
.ui.black.header { |
|||
color: #5C6166 !important; |
|||
} |
|||
.ui.green.header { |
|||
color: #A1CF64 !important; |
|||
} |
|||
.ui.red.header { |
|||
color: #D95C5C !important; |
|||
} |
|||
.ui.purple.header { |
|||
color: #564F8A !important; |
|||
} |
|||
.ui.teal.header { |
|||
color: #00B5AD !important; |
|||
} |
|||
|
|||
.ui.blue.dividing.header { |
|||
border-bottom: 3px solid #6ECFF5; |
|||
} |
|||
.ui.black.dividing.header { |
|||
border-bottom: 3px solid #5C6166; |
|||
} |
|||
.ui.green.dividing.header { |
|||
border-bottom: 3px solid #A1CF64; |
|||
} |
|||
.ui.red.dividing.header { |
|||
border-bottom: 3px solid #D95C5C; |
|||
} |
|||
.ui.purple.dividing.header { |
|||
border-bottom: 3px solid #564F8A; |
|||
} |
|||
.ui.teal.dividing.header { |
|||
border-bottom: 3px solid #00B5AD; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.header { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.header .sub.header { |
|||
color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.black.header { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.blue.header { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.green.header { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.red.header { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.purple.header { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.teal.header { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
.ui.inverted.block.header { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.header { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.header { |
|||
text-align: right; |
|||
} |
|||
.ui.center.aligned.header { |
|||
text-align: center; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.header, |
|||
.ui.left.floated.header { |
|||
float: left; |
|||
margin-top: 0em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui.right.floated.header { |
|||
float: right; |
|||
margin-top: 0em; |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.header { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Dividing |
|||
--------------------*/ |
|||
|
|||
.ui.dividing.header { |
|||
padding-bottom: 0.2rem; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.dividing.header .sub.header { |
|||
padding-bottom: 0.5em; |
|||
} |
|||
.ui.dividing.header .icon { |
|||
margin-bottom: 0.2em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Block |
|||
--------------------*/ |
|||
|
|||
.ui.block.header { |
|||
background-color: #F5F5F5; |
|||
padding: 0.5em 1em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.attached.header { |
|||
background-color: #E0E0E0; |
|||
padding: 0.5em 1rem; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.top.attached.header { |
|||
margin-bottom: 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; |
|||
} |
|||
.ui.bottom.attached.header { |
|||
margin-top: 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; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Icon |
|||
--------------------*/ |
|||
|
|||
.ui.icon.header { |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
.ui.icon.header .icon { |
|||
float: none; |
|||
display: block; |
|||
font-size: 3em; |
|||
margin: 0em auto 0.2em; |
|||
} |
|||
.ui.icon.header .circular.icon, |
|||
.ui.icon.header .square.icon { |
|||
font-size: 2em; |
|||
} |
|||
.ui.block.icon.header .icon { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.icon.header.aligned { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,487 @@ |
|||
/* |
|||
* # Semantic Icons - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Icon |
|||
*******************************/ |
|||
|
|||
@font-face { |
|||
font-family: 'Icons'; |
|||
src: url(../fonts/icons.eot); |
|||
src: |
|||
url(../fonts/icons.eot?#iefix) format('embedded-opentype'), |
|||
url(../fonts/icons.woff) format('woff'), |
|||
url(../fonts/icons.ttf) format('truetype'), |
|||
url(../fonts/icons.svg#icons) format('svg') |
|||
; |
|||
|
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-decoration: inherit; |
|||
text-transform: none; |
|||
} |
|||
|
|||
i.icon { |
|||
display: inline-block; |
|||
opacity: 0.75; |
|||
|
|||
margin: 0em 0.25em 0em 0em; |
|||
|
|||
width: 1.23em; |
|||
height: 1em; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
text-align: center; |
|||
|
|||
speak: none; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-font-smoothing: antialiased; |
|||
font-smoothing: antialiased; |
|||
} |
|||
|
|||
/* icons available */ |
|||
i.icon.circle.attention:before { content: '\2757'; } /* '❗' */ |
|||
i.icon.circle.help:before { content: '\e704'; } /* '' */ |
|||
i.icon.circle.info:before { content: '\e705'; } /* '' */ |
|||
i.icon.add:before { content: '\2795'; } /* '➕' */ |
|||
|
|||
i.icon.chart:before { content: '📈'; } /* '\1f4c8' */ |
|||
i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */ |
|||
i.icon.chart.pie:before { content: '\e7a2'; } /* '' */ |
|||
|
|||
i.icon.resize.full:before { content: '\e744'; } /* '' */ |
|||
i.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */ |
|||
i.icon.resize.small:before { content: '\e746'; } /* '' */ |
|||
i.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */ |
|||
|
|||
i.icon.down:before { content: '\2193'; } /* '↓' */ |
|||
i.icon.down.triangle:before { content: '\25be'; } /* '▾' */ |
|||
i.icon.down.arrow:before { content: '\e75c'; } /* '' */ |
|||
|
|||
i.icon.left:before { content: '\2190'; } /* '←' */ |
|||
i.icon.left.triangle:before { content: '\25c2'; } /* '◂' */ |
|||
i.icon.left.arrow:before { content: '\e75d'; } /* '' */ |
|||
|
|||
i.icon.right:before { content: '\2192'; } /* '→' */ |
|||
i.icon.right.triangle:before { content: '\25b8'; } /* '▸' */ |
|||
i.icon.right.arrow:before { content: '\e75e'; } /* '' */ |
|||
|
|||
i.icon.up:before { content: '\2191'; } /* '↑' */ |
|||
i.icon.up.triangle:before { content: '\25b4'; } /* '▴' */ |
|||
i.icon.up.arrow:before { content: '\e75f'; } /* '' */ |
|||
|
|||
i.icon.folder:before { content: '\e810'; } /* '' */ |
|||
i.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */ |
|||
|
|||
i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */ |
|||
i.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */ |
|||
|
|||
i.icon.star:before { content: '\e801'; } /* '' */ |
|||
i.icon.star.empty:before { content: '\e800'; } /* '' */ |
|||
i.icon.star.half:before { content: '\e701'; } /* '' */ |
|||
|
|||
i.icon.lock:before { content: '🔒'; } /* '\1f512' */ |
|||
i.icon.unlock:before { content: '🔓'; } /* '\1f513' */ |
|||
|
|||
i.icon.layout.grid:before { content: '\e80c'; } /* '' */ |
|||
i.icon.layout.block:before { content: '\e708'; } /* '' */ |
|||
i.icon.layout.list:before { content: '\e80b'; } /* '' */ |
|||
|
|||
i.icon.heart.empty:before { content: '\2661'; } /* '♡' */ |
|||
i.icon.heart:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
|
|||
i.icon.asterisk:before { content: '\2731'; } /* '✱' */ |
|||
i.icon.attachment:before { content: '📎'; } /* '\1f4ce' */ |
|||
i.icon.attention:before { content: '\26a0'; } /* '⚠' */ |
|||
i.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */ |
|||
i.icon.barcode:before { content: '\e792'; } /* '' */ |
|||
i.icon.cart:before { content: '\e813'; } /* '' */ |
|||
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */ |
|||
i.icon.book:before { content: '\f4d6'; } |
|||
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */ |
|||
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */ |
|||
i.icon.cancel:before { content: '\2716'; } /* '✖' */ |
|||
i.icon.close:before { content: '\e80d'; } /* '' */ |
|||
i.icon.color:before { content: '\e794'; } /* '' */ |
|||
i.icon.chat:before { content: '\e720'; } /* '' */ |
|||
i.icon.check:before { content: '\2611'; } /* '☑' */ |
|||
i.icon.time:before { content: '🕔'; } /* '\1f554' */ |
|||
i.icon.cloud:before { content: '\2601'; } /* '☁' */ |
|||
i.icon.code:before { content: '\e714'; } /* '' */ |
|||
i.icon.email:before { content: '\40'; } /* '@' */ |
|||
i.icon.settings:before { content: '\26ef'; } /* '⛯' */ |
|||
i.icon.setting:before { content: '\2699'; } /* '⚙' */ |
|||
i.icon.comment:before { content: '\e802'; } /* '' */ |
|||
i.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */ |
|||
i.icon.clockwise:before { content: '\27f3'; } /* '⟳' */ |
|||
i.icon.cube:before { content: '\e807'; } /* '' */ |
|||
i.icon.direction:before { content: '\27a2'; } /* '➢' */ |
|||
i.icon.doc:before { content: '📄'; } /* '\1f4c4' */ |
|||
i.icon.docs:before { content: '\e736'; } /* '' */ |
|||
i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */ |
|||
i.icon.paint:before { content: '\e7b5'; } /* '' */ |
|||
i.icon.edit:before { content: '\270d'; } /* '✍' */ |
|||
i.icon.eject:before { content: '\2ecf'; } /* '⻏' */ |
|||
i.icon.export:before { content: '\e715'; } /* '' */ |
|||
i.icon.hide:before { content: '\e80f'; } /* '' */ |
|||
i.icon.unhide:before { content: '\e70b'; } /* '' */ |
|||
i.icon.facebook:before { content: '\f301'; } /* '' */ |
|||
i.icon.fast-forward:before { content: '\e804'; } /* '' */ |
|||
i.icon.fire:before { content: '🔥'; } /* '\1f525' */ |
|||
i.icon.flag:before { content: '\2691'; } /* '⚑' */ |
|||
i.icon.lightning:before { content: '\26a1'; } /* '⚡' */ |
|||
i.icon.lab:before { content: '\68'; } /* 'h' */ |
|||
i.icon.flight:before { content: '\2708'; } /* '✈' */ |
|||
i.icon.forward:before { content: '\27a6'; } /* '➦' */ |
|||
i.icon.gift:before { content: '🎁'; } /* '\1f381' */ |
|||
i.icon.github:before { content: '\f308'; } /* '' */ |
|||
i.icon.globe:before { content: '\e817'; } /* '' */ |
|||
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */ |
|||
i.icon.question:before { content: '\2753'; } /* '❓' */ |
|||
i.icon.home:before { content: '\2302'; } /* '⌂' */ |
|||
i.icon.i:before { content: '\2139'; } /* 'ℹ' */ |
|||
i.icon.idea:before { content: '💡'; } /* '\1f4a1' */ |
|||
i.icon.open:before { content: '🔗'; } /* '\1f517' */ |
|||
i.icon.content:before { content: '\e782'; } /* '' */ |
|||
i.icon.location:before { content: '\e724'; } /* '' */ |
|||
i.icon.mail:before { content: '\2709'; } /* '✉' */ |
|||
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ |
|||
i.icon.minus:before { content: '\2d'; } /* '-' */ |
|||
i.icon.money:before { content: '💰'; } /* '\1f4b0' */ |
|||
i.icon.off:before { content: '\e78e'; } /* '' */ |
|||
i.icon.pause:before { content: '\e808'; } /* '' */ |
|||
i.icon.photos:before { content: '\e812'; } /* '' */ |
|||
i.icon.photo:before { content: '🌄'; } /* '\1f304' */ |
|||
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ |
|||
i.icon.play:before { content: '\e809'; } /* '' */ |
|||
i.icon.plus:before { content: '\2b'; } /* '+' */ |
|||
i.icon.print:before { content: '\e716'; } /* '' */ |
|||
i.icon.rss:before { content: '\e73a'; } /* '' */ |
|||
i.icon.search:before { content: '🔍'; } /* '\1f50d' */ |
|||
i.icon.shuffle:before { content: '\e803'; } /* '' */ |
|||
i.icon.tag:before { content: '\e80a'; } /* '' */ |
|||
i.icon.tags:before { content: '\e70d'; } /* '' */ |
|||
i.icon.terminal:before { content: '\e7ac'; } /* '' */ |
|||
i.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */ |
|||
i.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */ |
|||
i.icon.to-end:before { content: '\e806'; } /* '' */ |
|||
i.icon.to-start:before { content: '\e805'; } /* '' */ |
|||
i.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */ |
|||
i.icon.trash:before { content: '\e729'; } /* '' */ |
|||
i.icon.twitter:before { content: '\f303'; } /* '' */ |
|||
i.icon.upload:before { content: '\e711'; } /* '' */ |
|||
i.icon.user.add:before { content: '\e700'; } /* '' */ |
|||
i.icon.user:before { content: '👤'; } /* '\1f464' */ |
|||
i.icon.community:before { content: '\e814'; } /* '' */ |
|||
i.icon.users:before { content: '👥'; } /* '\1f465' */ |
|||
i.icon.id:before { content: '\e722'; } /* '' */ |
|||
i.icon.url:before { content: '🔗'; } /* '\1f517' */ |
|||
i.icon.zoom.in:before { content: '\e750'; } /* '' */ |
|||
i.icon.zoom.out:before { content: '\e751'; } /* '' */ |
|||
|
|||
/*-------------- |
|||
Spacing Fix |
|||
---------------*/ |
|||
|
|||
/* dropdown arrows are to the right */ |
|||
i.dropdown.icon { |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/* stars are usually consecutive */ |
|||
i.icon.star { |
|||
width: auto; |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* left side icons */ |
|||
i.icon.left, |
|||
i.icon.left, |
|||
i.icon.left { |
|||
width: auto; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
/* right side icons */ |
|||
i.icon.search, |
|||
i.icon.up, |
|||
i.icon.down, |
|||
i.icon.right { |
|||
width: auto; |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Aliases |
|||
---------------*/ |
|||
|
|||
/* aliases for convenience */ |
|||
i.icon.delete:before { content: '\e80d'; } /* '' */ |
|||
i.icon.dropdown:before { content: '\25be'; } /* '▾' */ |
|||
|
|||
i.icon.help:before { content: '\e704'; } /* '' */ |
|||
i.icon.info:before { content: '\e705'; } /* '' */ |
|||
i.icon.error:before { content: '\e80d'; } /* '' */ |
|||
|
|||
i.icon.dislike:before { content: '\2661'; } /* '♡' */ |
|||
i.icon.like:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
i.icon.eye:before { content: '\e80f'; } /* '' */ |
|||
i.icon.eye.hidden:before { content: '\e70b'; } /* '' */ |
|||
i.icon.date:before { content: '📅'; } /* '\1f4c5' */ |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
i.icon.hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.emphasized.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.disabled { |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
i.link.icon { |
|||
cursor: pointer; |
|||
opacity: 0.7; |
|||
-webkit-transition: opacity 0.3s ease-out; |
|||
-moz-transition: opacity 0.3s ease-out; |
|||
-o-transition: opacity 0.3s ease-out; |
|||
-ms-transition: opacity 0.3s ease-out; |
|||
transition: opacity 0.3s ease-out; |
|||
} |
|||
.link.icon:hover { |
|||
opacity: 1 !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
i.circular.icon { |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
|
|||
padding: 0.5em 0.35em !important; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
line-height: 1 !important; |
|||
width: 2em !important; |
|||
height: 2em !important; |
|||
} |
|||
i.circular.icon:before { |
|||
vertical-align: middle; |
|||
} |
|||
i.circular.inverted.icon { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Flipped |
|||
--------------------*/ |
|||
|
|||
i.vertically.flipped.icon { |
|||
-webkit-transform: scale(1, -1); |
|||
-moz-transform: scale(1, -1); |
|||
-o-transform: scale(1, -1); |
|||
-ms-transform: scale(1, -1); |
|||
transform: scale(1, -1); |
|||
} |
|||
i.horizontally.flipped.icon { |
|||
-webkit-transform: scale(-1, 1); |
|||
-moz-transform: scale(-1, 1); |
|||
-o-transform: scale(-1, 1); |
|||
-ms-transform: scale(-1, 1); |
|||
transform: scale(-1, 1); |
|||
} |
|||
|
|||
/*------------------- |
|||
Rotated |
|||
--------------------*/ |
|||
|
|||
i.left.rotated.icon { |
|||
-webkit-transform: rotate(-90deg); |
|||
-moz-transform: rotate(-90deg); |
|||
-o-transform: rotate(-90deg); |
|||
-ms-transform: rotate(-90deg); |
|||
transform: rotate(-90deg); |
|||
} |
|||
i.right.rotated.icon { |
|||
-webkit-transform: rotate(90deg); |
|||
-moz-transform: rotate(90deg); |
|||
-o-transform: rotate(90deg); |
|||
-ms-transform: rotate(90deg); |
|||
transform: rotate(90deg); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Square |
|||
--------------------*/ |
|||
|
|||
i.square.icon { |
|||
width: 2em; |
|||
height: 2em; |
|||
padding: 0.5em 0.35em !important; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
vertical-align: baseline; |
|||
} |
|||
i.square.icon:before { |
|||
vertical-align: middle; |
|||
} |
|||
i.square.inverted.icon { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
i.inverted.icon { |
|||
background-color: #222222; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
i.blue.icon { |
|||
color: #6ECFF5 !important; |
|||
} |
|||
i.black.icon { |
|||
color: #5C6166 !important; |
|||
} |
|||
i.green.icon { |
|||
color: #A1CF64 !important; |
|||
} |
|||
i.red.icon { |
|||
color: #D95C5C !important; |
|||
} |
|||
i.purple.icon { |
|||
color: #564F8A !important; |
|||
} |
|||
i.teal.icon { |
|||
color: #00B5AD !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
i.inverted.black.icon { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.blue.icon { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.green.icon { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.red.icon { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.purple.icon { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.teal.icon { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
i.small.icon { |
|||
font-size: 0.875em; |
|||
} |
|||
i.icon { |
|||
font-size: 1em; |
|||
} |
|||
i.large.icon { |
|||
font-size: 2em; |
|||
margin-right: 0.5em; |
|||
vertical-align: middle; |
|||
} |
|||
i.huge.icon { |
|||
font-size: 4em; |
|||
margin-right: 0.75em; |
|||
vertical-align: middle; |
|||
} |
|||
i.massive.icon { |
|||
font-size: 8em; |
|||
margin-right: 1em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sketchy Sizing |
|||
---------------*/ |
|||
|
|||
i.sketchy.circular.icon, |
|||
i.sketchy.square.icon { |
|||
padding: 0.35em !important; |
|||
} |
|||
@ -0,0 +1,170 @@ |
|||
/* |
|||
* # Semantic Image |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Image |
|||
*******************************/ |
|||
|
|||
.ui.image { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
} |
|||
img.ui.image { |
|||
display: block; |
|||
background: none; |
|||
} |
|||
.ui.image img { |
|||
display: block; |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
.ui.disabled.image { |
|||
cursor: default; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Rounded |
|||
---------------*/ |
|||
|
|||
.ui.rounded.images .image, |
|||
.ui.rounded.images img, |
|||
.ui.rounded.image img, |
|||
.ui.rounded.image { |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Circular |
|||
---------------*/ |
|||
|
|||
.ui.circular.images .image, |
|||
.ui.circular.images img, |
|||
.ui.circular.image img, |
|||
.ui.circular.image { |
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Avatar |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.avatar.images .image, |
|||
.ui.avatar.images img, |
|||
.ui.avatar.image img, |
|||
.ui.avatar.image { |
|||
margin-right: 0.5em; |
|||
|
|||
display: inline-block; |
|||
width: 2em; |
|||
height: 2em; |
|||
|
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.image, |
|||
.ui.floated.images { |
|||
float: left; |
|||
margin-right: 1em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.right.floated.images, |
|||
.ui.right.floated.image { |
|||
float: right; |
|||
margin-bottom: 1em; |
|||
margin-left: 1em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.tiny.images .image, |
|||
.ui.tiny.images img, |
|||
.ui.tiny.image { |
|||
width: 20px; |
|||
font-size: 0.7rem; |
|||
} |
|||
.ui.mini.images .image, |
|||
.ui.mini.images img, |
|||
.ui.mini.image { |
|||
width: 35px; |
|||
font-size: 0.8rem; |
|||
} |
|||
.ui.small.images .image, |
|||
.ui.small.images img, |
|||
.ui.small.image { |
|||
width: 80px; |
|||
font-size: 0.9rem; |
|||
} |
|||
.ui.medium.images .image, |
|||
.ui.medium.images img, |
|||
.ui.medium.image { |
|||
width: 300px; |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.images .image, |
|||
.ui.large.images img, |
|||
.ui.large.image { |
|||
width: 450px; |
|||
font-size: 1.1rem; |
|||
} |
|||
.ui.huge.images .image, |
|||
.ui.huge.images img, |
|||
.ui.huge.image { |
|||
width: 600px; |
|||
font-size: 1.2rem; |
|||
} |
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.images { |
|||
font-size: 0em; |
|||
margin: 0em -0.25rem 0rem; |
|||
} |
|||
|
|||
.ui.images .image, |
|||
.ui.images img { |
|||
display: inline-block; |
|||
margin: 0em 0.25em 0.5em; |
|||
} |
|||
@ -0,0 +1,287 @@ |
|||
/* |
|||
* # Semantic Input |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 29 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Inputs |
|||
---------------------*/ |
|||
|
|||
.ui.input { |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
.ui.input input { |
|||
width: 100%; |
|||
font-family: "Helvetica Neue", "Helvetica", Arial; |
|||
|
|||
margin: 0em; |
|||
padding: 0.85em 1.2em; |
|||
font-size: 0.875em; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
outline: none; |
|||
|
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-o-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
|
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Placeholder |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.input::-web inputkit-input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.input::-moz input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Active |
|||
---------------------*/ |
|||
|
|||
.ui.input input:active, |
|||
.ui.input.down input { |
|||
border-color: rgba(0, 0, 0, 0.3); |
|||
background-color: #FAFAFA; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.loading.input .icon { |
|||
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
|||
} |
|||
.ui.loading.input .icon:before, |
|||
.ui.loading.input .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.input.focus input, |
|||
.ui.input input:focus { |
|||
border-color: rgba(0, 0, 0, 0.2); |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
.ui.input.focus input input::-webkit-input-placeholder, |
|||
.ui.input input:focus input::-webkit-input-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
.ui.input.focus input input::-moz-placeholder, |
|||
.ui.input input:focus input::-moz-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
.ui.input.error input { |
|||
background-color: #FFFAFA; |
|||
border-color: #E7BEBE; |
|||
color: #D95C5C; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.input.error input ::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.input.error input ::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.input.error input :focus::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
.ui.input.error input :focus::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Transparent |
|||
---------------------*/ |
|||
|
|||
.ui.transparent.input input { |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Icon |
|||
---------------------*/ |
|||
|
|||
.ui.icon.input > .icon { |
|||
position: absolute; |
|||
opacity: 0.5; |
|||
top: 1px; |
|||
right: 1px; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 2.5em; |
|||
height: 2.5em; |
|||
padding-top: 0.75em; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-border-radius: 0.2em 0em 0em 0.2em; |
|||
-moz-border-radius: 0.2em 0em 0em 0.2em; |
|||
border-radius: 0.2em 0em 0em 0.2em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: opacity 0.3s ease-out; |
|||
-moz-transition: opacity 0.3s ease-out; |
|||
-o-transition: opacity 0.3s ease-out; |
|||
-ms-transition: opacity 0.3s ease-out; |
|||
transition: opacity 0.3s ease-out; |
|||
} |
|||
.ui.icon.input input { |
|||
padding-right: 3em !important; |
|||
} |
|||
|
|||
.ui.left.icon.input .icon { |
|||
right: auto; |
|||
left: 1px; |
|||
} |
|||
.ui.left.icon.input input { |
|||
padding-left: 3em !important; |
|||
padding-right: 1.2em !important; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.icon.input input:focus ~ .icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labeled |
|||
---------------------*/ |
|||
|
|||
.ui.labeled.input .corner.label { |
|||
top: 1px; |
|||
right: 1px; |
|||
|
|||
font-size: 0.7em; |
|||
|
|||
-webkit-border-top-right-radius: 0.3125em; |
|||
-moz-border-top-right-radius: 0.3125em; |
|||
border-top-right-radius: 0.3125em; |
|||
} |
|||
.ui.labeled.input input { |
|||
padding-right: 2.5em !important; |
|||
} |
|||
|
|||
/* Spacing with corner label */ |
|||
.ui.labeled.icon.input:not(.left) input { |
|||
padding-right: 3.25em !important; |
|||
} |
|||
.ui.labeled.icon.input:not(.left) .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Action |
|||
---------------------*/ |
|||
|
|||
.ui.action.input { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.action.input > input { |
|||
display: table-cell; |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-right: none; |
|||
} |
|||
.ui.action.input > .button { |
|||
display: table-cell; |
|||
opacity: 0.9; |
|||
|
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ui.action.input > input:focus ~ .button { |
|||
opacity: 1; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
} |
|||
@ -0,0 +1,824 @@ |
|||
/* |
|||
* # Semantic Label - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Label |
|||
*******************************/ |
|||
|
|||
.ui.label { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
|
|||
margin: -0.25em 0.25em 0em; |
|||
|
|||
background-color: #E8E8E8; |
|||
border-color: #E8E8E8; |
|||
|
|||
padding: 0.5em 0.8em; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
|
|||
text-transform: uppercase; |
|||
font-weight: normal; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
.ui.label:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.label:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
|
|||
/* Link */ |
|||
a.ui.label { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Detail */ |
|||
.ui.label .detail { |
|||
display: inline-block; |
|||
margin-left: 0.5em; |
|||
font-weight: bold; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.label .icon { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Removable label */ |
|||
.ui.label .delete.icon { |
|||
cursor: pointer; |
|||
margin: 0em 0em 0em 0.5em; |
|||
opacity: 0.7; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
.ui.label .delete.icon:hover { |
|||
opacity: 0.99; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.image.label { |
|||
width: auto !important; |
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
padding-top: 0.4em; |
|||
padding-bottom: 0.4em; |
|||
|
|||
line-height: 1.5em; |
|||
vertical-align: baseline; |
|||
text-transform: none; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
.ui.image.label img { |
|||
display: inline-block; |
|||
height: 2.5em; |
|||
margin: -0.4em 0.8em -0.4em -0.8em; |
|||
vertical-align: top; |
|||
|
|||
-moz-border-radius: 0.325em 0em 0em 0.325em; |
|||
-webkit-border-radius: 0.325em 0em 0em 0.325em; |
|||
border-radius: 0.325em 0em 0em 0.325em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Disabled |
|||
--------------------*/ |
|||
|
|||
.ui.label.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
a.ui.labels .label:hover, |
|||
a.ui.label:hover { |
|||
background-color: #E0E0E0; |
|||
border-color: #E0E0E0; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.labels a.label:hover:before, |
|||
a.ui.label:hover:before { |
|||
background-color: #E0E0E0; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
/*------------------- |
|||
Visible |
|||
--------------------*/ |
|||
|
|||
.ui.labels.visible .label, |
|||
.ui.label.visible { |
|||
display: inline-block !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Hidden |
|||
--------------------*/ |
|||
|
|||
.ui.labels.hidden .label, |
|||
.ui.label.hidden { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Tag |
|||
--------------------*/ |
|||
|
|||
.ui.tag.labels .label, |
|||
.ui.tag.label { |
|||
margin-left: 1em; |
|||
position: relative; |
|||
padding: 0.33em 1.3em 0.33em 1.4em; |
|||
|
|||
-webkit-border-radius: 0px 3px 3px 0px; |
|||
-moz-border-radius: 0px 3px 3px 0px; |
|||
border-radius: 0px 3px 3px 0px; |
|||
} |
|||
.ui.tag.labels .label:before, |
|||
.ui.tag.label:before { |
|||
position: absolute; |
|||
top: 0.3em; |
|||
left: 0.3em; |
|||
content: ''; |
|||
|
|||
margin-left: -1em; |
|||
background-image: none; |
|||
|
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
|
|||
.ui.tag.labels .label:after, |
|||
.ui.tag.label:after { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 50%; |
|||
left: -0.25em; |
|||
|
|||
margin-top: -0.3em; |
|||
background-color: #FFFFFF; |
|||
width: 0.55em; |
|||
height: 0.55em; |
|||
|
|||
-webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
-moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
|
|||
-moz-border-radius: 100px 100px 100px 100px; |
|||
-webkit-border-radius: 100px 100px 100px 100px; |
|||
border-radius: 100px 100px 100px 100px; |
|||
} |
|||
/*------------------- |
|||
Ribbon |
|||
--------------------*/ |
|||
|
|||
.ui.ribbon.label { |
|||
position: relative; |
|||
left: -2rem; |
|||
padding-left: 2rem; |
|||
-webkit-border-radius: 0px 4px 4px 0px; |
|||
-moz-border-radius: 0px 4px 4px 0px; |
|||
border-radius: 0px 4px 4px 0px; |
|||
} |
|||
|
|||
.ui.ribbon.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
|
|||
top: 100%; |
|||
left: 0%; |
|||
|
|||
border-top: 0em solid transparent; |
|||
border-right-width: 1em; |
|||
border-right-color: inherit; |
|||
border-right-style: solid; |
|||
border-bottom: 1em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.top.attached.label, |
|||
.ui.attached.label { |
|||
width: 100%; |
|||
position: absolute; |
|||
margin: 0em; |
|||
top: 0em; |
|||
left: 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 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: 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 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: 4px 0em 0em 4px; |
|||
-moz-border-radius: 4px 0em 0em 4px; |
|||
border-radius: 4px 0em 0em 4px; |
|||
} |
|||
.ui.bottom.right.attached.label { |
|||
top: auto; |
|||
bottom: 0em; |
|||
left: auto; |
|||
right: 0em; |
|||
width: auto; |
|||
-webkit-border-radius: 4px 0em 4px 0em; |
|||
-moz-border-radius: 4px 0em 4px 0em; |
|||
border-radius: 4px 0em 4px 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Corner Label |
|||
--------------------*/ |
|||
|
|||
.ui.corner.label { |
|||
background-color: transparent; |
|||
position: absolute; |
|||
top: 0em; |
|||
right: 0em; |
|||
z-index: 10; |
|||
margin: 0em; |
|||
|
|||
font-size: 0.9em; |
|||
width: 1.75em; |
|||
height: 1.75em; |
|||
padding: 0em; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.corner.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0em; |
|||
top: 0em; |
|||
z-index: -1; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
|
|||
border-top: 0em solid transparent; |
|||
border-right: 2.75em solid transparent; |
|||
border-bottom: 2.75em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
border-right-color: inherit; |
|||
|
|||
-webkit-transition: border-color 0.2s ease; |
|||
-moz-transition: border-color 0.2s ease; |
|||
-o-transition: border-color 0.2s ease; |
|||
-ms-transition: border-color 0.2s ease; |
|||
transition: border-color 0.2s ease; |
|||
} |
|||
|
|||
.ui.corner.label .icon { |
|||
margin: 0.35em 0em; |
|||
vertical-align: top; |
|||
} |
|||
.ui.corner.label .text { |
|||
display: inline-block; |
|||
margin: 0.7em 0em 0em 0em; |
|||
width: 2.5em; |
|||
|
|||
font-size: 0.7em; |
|||
text-align: center; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
-o-transform: rotate(45deg); |
|||
-ms-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
/* Left Corner */ |
|||
.ui.left.corner.label, |
|||
.ui.left.corner.label:after { |
|||
right: auto; |
|||
left: 0em; |
|||
} |
|||
.ui.left.corner.label:after { |
|||
border-top: 2.75em solid transparent; |
|||
border-right: 2.75em solid transparent; |
|||
border-bottom: 0em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
border-top-color: inherit; |
|||
} |
|||
.ui.left.corner.label .text { |
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.corner.label:hover { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Fluid |
|||
--------------------*/ |
|||
|
|||
.ui.label.fluid, |
|||
.ui.fluid.labels > .label { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.labels .label, |
|||
.ui.inverted.label { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
/*--- Black ---*/ |
|||
.ui.black.labels .label, |
|||
.ui.black.label { |
|||
background-color: #5C6166 !important; |
|||
border-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .black.label:before, |
|||
.ui.black.labels .label:before, |
|||
.ui.black.label:before { |
|||
background-color: #5C6166 !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.black.labels .label:hover, |
|||
a.ui.black.label:hover { |
|||
background-color: #888888 !important; |
|||
border-color: #888888 !important; |
|||
} |
|||
.ui.labels a.black.label:hover:before, |
|||
.ui.black.labels a.label:hover:before, |
|||
a.ui.black.label:hover:before { |
|||
background-color: #888888 !important; |
|||
} |
|||
|
|||
/* Corner */ |
|||
.ui.black.corner.label, |
|||
.ui.black.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Green ---*/ |
|||
.ui.green.labels .label, |
|||
.ui.green.label { |
|||
background-color: #A1CF64 !important; |
|||
border-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .green.label:before, |
|||
.ui.green.labels .label:before, |
|||
.ui.green.label:before { |
|||
background-color: #A1CF64 !important; |
|||
} |
|||
|
|||
/* Hover */ |
|||
a.ui.green.labels .label:hover, |
|||
a.ui.green.label:hover { |
|||
background-color: #89B84C !important; |
|||
border-color: #89B84C !important; |
|||
} |
|||
.ui.labels a.green.label:hover:before, |
|||
.ui.green.labels a.label:hover:before, |
|||
a.ui.green.label:hover:before { |
|||
background-color: #89B84C !important; |
|||
} |
|||
|
|||
/* Corner */ |
|||
.ui.green.corner.label, |
|||
.ui.green.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Red ---*/ |
|||
.ui.red.labels .label, |
|||
.ui.red.label { |
|||
background-color: #D95C5C !important; |
|||
border-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .red.label:before, |
|||
.ui.red.labels .label:before, |
|||
.ui.red.label:before { |
|||
background-color: #D95C5C !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.red.corner.label, |
|||
.ui.red.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/* Hover */ |
|||
a.ui.red.labels .label:hover, |
|||
a.ui.red.label:hover{ |
|||
background-color: #DE3859 !important; |
|||
border-color: #DE3859 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.red.label:hover:before, |
|||
.ui.red.labels a.label:hover:before, |
|||
a.ui.red.label:hover:before { |
|||
background-color: #DE3859 !important; |
|||
} |
|||
|
|||
|
|||
/*--- Blue ---*/ |
|||
.ui.blue.labels .label, |
|||
.ui.blue.label { |
|||
background-color: #6ECFF5 !important; |
|||
border-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .blue.label:before, |
|||
.ui.blue.labels .label:before, |
|||
.ui.blue.label:before { |
|||
background-color: #6ECFF5 !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.blue.labels .label:hover, |
|||
.ui.blue.labels a.label:hover, |
|||
a.ui.blue.label:hover { |
|||
background-color: #1AB8F3 !important; |
|||
border-color: #1AB8F3 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.blue.label:hover:before, |
|||
.ui.blue.labels a.label:hover:before, |
|||
a.ui.blue.label:hover:before { |
|||
background-color: #1AB8F3 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.blue.corner.label, |
|||
.ui.blue.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/*--- Purple ---*/ |
|||
.ui.purple.labels .label, |
|||
.ui.purple.label { |
|||
background-color: #564F8A !important; |
|||
border-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .purple.label:before, |
|||
.ui.purple.labels .label:before, |
|||
.ui.purple.label:before { |
|||
background-color: #564F8A !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.purple.labels .label:hover, |
|||
.ui.purple.labels a.label:hover, |
|||
a.ui.purple.label:hover { |
|||
background-color: #3E3773 !important; |
|||
border-color: #3E3773 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.purple.label:hover:before, |
|||
.ui.purple.labels a.label:hover:before, |
|||
a.ui.purple.label:hover:before { |
|||
background-color: #3E3773 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.purple.corner.label, |
|||
.ui.purple.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Pink ---*/ |
|||
.ui.teal.labels .label, |
|||
.ui.teal.label { |
|||
background-color: #00B5AD !important; |
|||
border-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .teal.label:before, |
|||
.ui.teal.labels .label:before, |
|||
.ui.teal.label:before { |
|||
background-color: #00B5AD !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.teal.labels .label:hover, |
|||
.ui.teal.labels a.label:hover, |
|||
a.ui.teal.label:hover { |
|||
background-color: #009A93 !important; |
|||
border-color: #009A93 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.teal.label:hover:before, |
|||
.ui.teal.labels a.label:hover:before, |
|||
a.ui.teal.label:hover:before { |
|||
background-color: #009A93 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.teal.corner.label, |
|||
.ui.teal.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.labels .label, |
|||
.ui.horizontal.label { |
|||
margin: -0.125em 0.5em -0.125em 0em; |
|||
|
|||
padding: 0.35em 1em; |
|||
min-width: 6em; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
.ui.circular.labels .label, |
|||
.ui.circular.label { |
|||
min-height: 1em; |
|||
max-height: 2em; |
|||
|
|||
padding: 0.5em !important; |
|||
|
|||
line-height: 1em; |
|||
text-align: center; |
|||
|
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Pointing |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.label { |
|||
position: relative; |
|||
} |
|||
.ui.attached.pointing.label { |
|||
position: absolute; |
|||
} |
|||
|
|||
.ui.pointing.label:before { |
|||
position: absolute; |
|||
content: ""; |
|||
|
|||
width: 0.6em; |
|||
height: 0.6em; |
|||
|
|||
background-image: none; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
/*--- Above ---*/ |
|||
.ui.pointing.label:before { |
|||
background-color: #E8E8E8; |
|||
} |
|||
.ui.pointing.label, |
|||
.ui.pointing.above.label { |
|||
margin-top: 1em; |
|||
} |
|||
.ui.pointing.label:before, |
|||
.ui.pointing.above.label:before { |
|||
margin-left: -0.3em; |
|||
top: -0.3em; |
|||
left: 50%; |
|||
} |
|||
/*--- Below ---*/ |
|||
.ui.pointing.below.label { |
|||
margin-top: 0em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.pointing.below.label:before { |
|||
margin-left: -0.3em; |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -0.3em; |
|||
left: 50%; |
|||
} |
|||
/*--- Left ---*/ |
|||
.ui.pointing.left.label { |
|||
margin-top: 0em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.pointing.left.label:before { |
|||
margin-top: -0.3em; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
/*--- Right ---*/ |
|||
.ui.pointing.right.label { |
|||
margin-top: 0em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.pointing.right.label:before { |
|||
margin-top: -0.3em; |
|||
right: -0.3em; |
|||
top: 50%; |
|||
bottom: auto; |
|||
left: auto; |
|||
} |
|||
|
|||
/*------------------ |
|||
Floating Label |
|||
-------------------*/ |
|||
|
|||
.ui.floating.label { |
|||
position: absolute; |
|||
z-index: 100; |
|||
top: -1em; |
|||
left: 100%; |
|||
margin: 0em 0em 0em -1.5em !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.small.labels .label, |
|||
.ui.small.label { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.label { |
|||
font-size: 0.8125rem; |
|||
} |
|||
.ui.large.labels .label, |
|||
.ui.large.label { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.huge.labels .label, |
|||
.ui.huge.label { |
|||
font-size: 1rem; |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
/* |
|||
* # Semantic Loader |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Loader |
|||
*******************************/ |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.loader { |
|||
display: none; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -16px 0px 0px -16px; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.ui.dimmer .loader { |
|||
display: block; |
|||
} |
|||
|
|||
/*------------------- |
|||
Text |
|||
--------------------*/ |
|||
|
|||
/* Text Styles */ |
|||
.ui.loader.text { |
|||
width: auto !important; |
|||
height: auto !important; |
|||
text-align: center; |
|||
font-style: normal; |
|||
|
|||
margin-top: -28px; |
|||
min-width: 32px; |
|||
padding-top: 40px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.mini { |
|||
margin-top: -16px; |
|||
min-width: 16px; |
|||
padding-top: 20px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.small { |
|||
margin-top: -23px; |
|||
min-width: 24px; |
|||
padding-top: 32px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.large { |
|||
margin-top: -46px; |
|||
min-width: 64px; |
|||
padding-top: 80px; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
.ui.loader.active, |
|||
.ui.loader.visible { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.loader.disabled, |
|||
.ui.loader.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.dimmer .ui.text.loader, |
|||
.ui.inverted.text.loader { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.dimmer .ui.text.loader { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/* Tiny Size */ |
|||
.ui.dimmer .mini.ui.loader, |
|||
.ui.inverted .mini.ui.loader { |
|||
background-image: url(../images/loader-mini-inverted.gif); |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.dimmer .small.ui.loader, |
|||
.ui.inverted .small.ui.loader { |
|||
background-image: url(../images/loader-small-inverted.gif); |
|||
} |
|||
|
|||
/* Standard Size */ |
|||
.ui.dimmer .ui.loader, |
|||
.ui.inverted.loader { |
|||
background-image: url(../images/loader-medium-inverted.gif); |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.dimmer .large.ui.loader, |
|||
.ui.inverted .large.ui.loader { |
|||
background-image: url(../images/loader-large-inverted.gif); |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
/* Tiny Size */ |
|||
.ui.inverted.dimmer .ui.loader.mini, |
|||
.ui.loader.mini { |
|||
width: 16px; |
|||
height: 16px; |
|||
background-image: url(../images/loader-mini.gif); |
|||
margin: -8px 0px 0px -8px; |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.inverted.dimmer .ui.loader.small, |
|||
.ui.loader.small { |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url(../images/loader-small.gif); |
|||
margin: -12px 0px 0px -12px; |
|||
} |
|||
|
|||
.ui.inverted.dimmer .ui.loader, |
|||
.ui.loader { |
|||
width: 32px; |
|||
height: 32px; |
|||
background: url(../images/loader-medium.gif) no-repeat; |
|||
background-position: 48% 0px; |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.inverted.dimmer .ui.loader.large, |
|||
.ui.loader.large { |
|||
width: 64px; |
|||
height: 64px; |
|||
background-image: url(../images/loader-large.gif); |
|||
margin: -32px 0px 0px -32px; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inline |
|||
--------------------*/ |
|||
|
|||
.ui.inline.loader { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin: 0em; |
|||
} |
|||
|
|||
.ui.inline.loader.active, |
|||
.ui.inline.loader.visible { |
|||
display: inline-block; |
|||
} |
|||
@ -0,0 +1,353 @@ |
|||
/* |
|||
* # Semantic Progress Bar |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Nay 14, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Progress Bar |
|||
*******************************/ |
|||
|
|||
.ui.progress { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Successful |
|||
---------------*/ |
|||
|
|||
.ui.successful.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.successful.progress .bar, |
|||
.ui.successful.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Failed |
|||
---------------*/ |
|||
|
|||
.ui.failed.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.failed.progress .bar, |
|||
.ui.failed.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.active.progress .bar { |
|||
position: relative; |
|||
} |
|||
.ui.active.progress .bar::after { |
|||
content: ''; |
|||
opacity: 0; |
|||
|
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
bottom: 0px; |
|||
background: #FFFFFF; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-animation: progress-active 2s ease-out infinite; |
|||
-moz-animation: progress-active 2s ease-out infinite; |
|||
animation: progress-active 2s ease-out infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 95%; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
@keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.disabled.progress { |
|||
opacity: 0.35; |
|||
} |
|||
.ui.disabled.progress .bar, |
|||
.ui.disabled.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
/* bottom attached */ |
|||
.ui.progress.attached { |
|||
position: relative; |
|||
border: none; |
|||
} |
|||
.ui.progress.attached, |
|||
.ui.progress.attached .bar { |
|||
display: block; |
|||
height: 3px; |
|||
padding: 0px; |
|||
overflow: hidden; |
|||
-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; |
|||
} |
|||
.ui.progress.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
/* top attached */ |
|||
.ui.progress.top.attached, |
|||
.ui.progress.top.attached .bar { |
|||
top: -2px; |
|||
-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; |
|||
} |
|||
.ui.progress.top.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
.ui.black.progress .bar { |
|||
background-color: #5C6166; |
|||
} |
|||
.ui.green.progress .bar { |
|||
background-color: #A1CF64; |
|||
} |
|||
.ui.red.progress .bar { |
|||
background-color: #EF4D6D; |
|||
} |
|||
.ui.purple.progress .bar { |
|||
background-color: #564F8A; |
|||
} |
|||
.ui.teal.progress .bar { |
|||
background-color: #00B5AD; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Striped |
|||
---------------*/ |
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
} |
|||
|
|||
.ui.progress.active.striped .bar:after { |
|||
-webkit-animation: none; |
|||
-moz-animation: none; |
|||
-ms-animation: none; |
|||
-o-animation: none; |
|||
animation: none; |
|||
} |
|||
.ui.progress.active.striped .bar { |
|||
-webkit-animation: progress-striped 3s linear infinite; |
|||
-moz-animation: progress-striped 3s linear infinite; |
|||
animation: progress-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.progress .bar { |
|||
height: 14px; |
|||
} |
|||
@ -0,0 +1,465 @@ |
|||
/* |
|||
* # Semantic Segment - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Segment |
|||
*******************************/ |
|||
|
|||
.ui.segment { |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
margin: 1em 0em; |
|||
padding: 1em; |
|||
|
|||
-webkit-border-radius: 5px 5px 5px 5px; |
|||
-moz-border-radius: 5px 5px 5px 5px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
|
|||
.ui.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
.ui.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.segment:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.vertical.segment { |
|||
margin: 0em; |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
|
|||
background-color: transparent; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.vertical.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
.ui.horizontal.segment { |
|||
margin: 0em; |
|||
padding-top: 0em; |
|||
padding-bottom: 0em; |
|||
|
|||
background-color: transparent; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
-webkit-box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.horizontal.segment:first-child { |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Loose Coupling |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.menu + .ui.attached.segment { |
|||
top: 1px; |
|||
} |
|||
|
|||
/* No padding on edge content */ |
|||
.ui.segment > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* Padding on next content after a label */ |
|||
.ui.segment > .attached.label:first-child + * { |
|||
margin-top: 2em; |
|||
} |
|||
.ui.segment > .bottom.attached.label:first-child ~ :last-child { |
|||
margin-top: 0em; |
|||
margin-bottom: 2em; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Piled |
|||
--------------------*/ |
|||
|
|||
.ui.piled.segment { |
|||
margin: 2em 0em; |
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-ms-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-o-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
} |
|||
.ui.piled.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.piled.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.piled.segment:after, |
|||
.ui.piled.segment:before { |
|||
background-color: #FFFFFF; |
|||
visibility: visible; |
|||
content: ""; |
|||
display: block; |
|||
height: 100%; |
|||
left: -1px; |
|||
position: absolute; |
|||
width: 100%; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.piled.segment:after { |
|||
-webkit-transform: rotate(1.2deg); |
|||
-moz-transform: rotate(1.2deg); |
|||
-ms-transform: rotate(1.2deg); |
|||
-o-transform: rotate(1.2deg); |
|||
transform: rotate(1.2deg); |
|||
top: 0; |
|||
z-index: -1; |
|||
} |
|||
.ui.piled.segment:before { |
|||
-webkit-transform: rotate(-1.2deg); |
|||
-moz-transform: rotate(-1.2deg); |
|||
-ms-transform: rotate(-1.2deg); |
|||
-o-transform: rotate(-1.2deg); |
|||
transform: rotate(-1.2deg); |
|||
top: 0; |
|||
z-index: -2; |
|||
} |
|||
|
|||
/*------------------- |
|||
Stacked |
|||
--------------------*/ |
|||
|
|||
.ui.stacked.segment { |
|||
padding-bottom: 1.7em; |
|||
} |
|||
.ui.stacked.segment:after, |
|||
.ui.stacked.segment:before { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -3px; |
|||
left: 0%; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
|
|||
width: 100%; |
|||
height: 5px; |
|||
visibility: visible; |
|||
} |
|||
.ui.stacked.segment:before { |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.stacked.inverted.segment:after, |
|||
.ui.stacked.inverted.segment:before { |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
border-top: 1px solid rgba(255, 255, 255, 0.35); |
|||
} |
|||
|
|||
/*------------------- |
|||
Raised |
|||
--------------------*/ |
|||
|
|||
.ui.raised.segment { |
|||
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.segment { |
|||
opacity: 0.8; |
|||
color: #DDDDDD; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Basic |
|||
--------------------*/ |
|||
|
|||
.ui.basic.segment { |
|||
position: relative; |
|||
background-color: transparent; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.ui.basic.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
.ui.basic.segment:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.segment { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.blue.segment { |
|||
border-top: 0.2em solid #6ECFF5; |
|||
} |
|||
.ui.green.segment { |
|||
border-top: 0.2em solid #A1CF64; |
|||
} |
|||
.ui.red.segment { |
|||
border-top: 0.2em solid #D95C5C; |
|||
} |
|||
.ui.purple.segment { |
|||
border-top: 0.2em solid #564F8A; |
|||
} |
|||
.ui.teal.segment { |
|||
border-top: 0.2em solid #00B5AD; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.black.segment { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.blue.segment { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.green.segment { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.red.segment { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.purple.segment { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.teal.segment { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.segment { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.segment { |
|||
text-align: right; |
|||
} |
|||
.ui.center.aligned.segment { |
|||
text-align: center; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.segment, |
|||
.ui.left.floated.segment { |
|||
float: left; |
|||
} |
|||
.ui.right.floated.segment { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.segment { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.segment, |
|||
.ui.primary.inverted.segment { |
|||
background-color: #222222; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordinality |
|||
--------------------*/ |
|||
|
|||
.ui.primary.segment { |
|||
background-color: #FFFFFF; |
|||
color: #555555; |
|||
} |
|||
|
|||
.ui.secondary.segment { |
|||
background-color: #FAF9FA; |
|||
color: #777777; |
|||
} |
|||
|
|||
.ui.tertiary.segment { |
|||
background-color: #EBEBEB; |
|||
color: #B0B0B0; |
|||
} |
|||
|
|||
.ui.secondary.inverted.segment { |
|||
background-color: #555555; |
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); |
|||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
color: #FAFAFA; |
|||
} |
|||
.ui.tertiary.inverted.segment { |
|||
background-color: #555555; |
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); |
|||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
color: #EEEEEE; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.segment.attached { |
|||
top: -1px; |
|||
bottom: -1px; |
|||
|
|||
-moz-border-radius: 0px; |
|||
-webkit-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
margin: 0em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
} |
|||
.ui.top.attached.segment { |
|||
top: 0px; |
|||
bottom: -1px; |
|||
|
|||
margin-top: 1em; |
|||
margin-bottom: 0em; |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.segment.bottom.attached { |
|||
top: -1px; |
|||
bottom: 0px; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: 1em; |
|||
|
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
@ -0,0 +1,294 @@ |
|||
/* |
|||
* # Semantic Steps |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Step |
|||
*******************************/ |
|||
|
|||
.ui.step, |
|||
.ui.steps .step { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 1em 2em 1em 3em; |
|||
|
|||
vertical-align: top; |
|||
background-color: #FFFFFF; |
|||
color: #888888; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.step:after, |
|||
.ui.steps .step:after { |
|||
position: absolute; |
|||
z-index: 2; |
|||
content: ''; |
|||
top: 0em; |
|||
right: -1.45em; |
|||
|
|||
border-bottom: 1.5em solid transparent; |
|||
border-left: 1.5em solid #FFFFFF; |
|||
border-top: 1.5em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
.ui.step, |
|||
.ui.steps .step, |
|||
.ui.steps .step:after { |
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Group |
|||
*******************************/ |
|||
|
|||
.ui.steps { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-moz-border-radius: 0.3125rem; |
|||
-webkit-border-radius: 0.3125rem; |
|||
border-radius: 0.3125rem; |
|||
} |
|||
|
|||
.ui.steps .step:first-child { |
|||
padding-left: 1.35em; |
|||
-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; |
|||
} |
|||
.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
border-radius: 0em 0.3125em 0.3125em 0em; |
|||
} |
|||
.ui.steps .step:only-child { |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
|
|||
.ui.steps .step:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.steps .step:last-child:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.step:hover, |
|||
.ui.step.hover { |
|||
background-color: #F7F7F7; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.steps .step.hover:after, |
|||
.ui.steps .step:hover:after, |
|||
.ui.step:hover, |
|||
.ui.step.hover::after { |
|||
border-left-color: #F7F7F7; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.steps .step.down, |
|||
.ui.steps .step:active, |
|||
.ui.step.down, |
|||
.ui.step:active { |
|||
background-color: #F0F0F0; |
|||
} |
|||
.ui.steps .step.down:after, |
|||
.ui.steps .step:active:after, |
|||
.ui.steps.down::after, |
|||
.ui.steps:active::after { |
|||
border-left-color: #F0F0F0; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.steps .step.active, |
|||
.ui.active.step { |
|||
cursor: auto; |
|||
background-color: #555555; |
|||
|
|||
color: #FFFFFF; |
|||
font-weight: bold; |
|||
} |
|||
.ui.steps .step.active:after, |
|||
.ui.active.steps:after { |
|||
border-left-color: #555555; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.steps .disabled.step, |
|||
.ui.disabled.step { |
|||
cursor: auto; |
|||
background-color: #FFFFFF; |
|||
color: #CBCBCB; |
|||
} |
|||
.ui.disabled.step:after { |
|||
border: none; |
|||
background-color: #FFFFFF; |
|||
top: 0.42em; |
|||
right: -1em; |
|||
|
|||
width: 2.15em; |
|||
height: 2.15em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
|
|||
-webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* Attached */ |
|||
.attached.ui.steps { |
|||
margin: 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; |
|||
} |
|||
.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0.3125em 0em 0em 0em; |
|||
-moz-border-radius: 0.3125em 0em 0em 0em; |
|||
border-radius: 0.3125em 0em 0em 0em; |
|||
} |
|||
.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0em 0em; |
|||
border-radius: 0em 0.3125em 0em 0em; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.steps { |
|||
margin-top: -1px; |
|||
-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; |
|||
} |
|||
.bottom.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0em 0em 0em 0.3125em; |
|||
-moz-border-radius: 0em 0em 0em 0.3125em; |
|||
border-radius: 0em 0em 0em 0.3125em; |
|||
} |
|||
.bottom.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0em 0.3125em 0em; |
|||
border-radius: 0em 0em 0.3125em 0em; |
|||
} |
|||
|
|||
|
|||
/* Evenly divided */ |
|||
.ui.one.steps, |
|||
.ui.two.steps, |
|||
.ui.three.steps, |
|||
.ui.four.steps, |
|||
.ui.five.steps, |
|||
.ui.six.steps, |
|||
.ui.seven.steps, |
|||
.ui.eight.steps { |
|||
display: block; |
|||
} |
|||
.ui.one.steps > .step { |
|||
width: 100%; |
|||
} |
|||
.ui.two.steps > .step { |
|||
width: 50%; |
|||
} |
|||
.ui.three.steps > .step { |
|||
width: 33.333%; |
|||
} |
|||
.ui.four.steps > .step { |
|||
width: 25%; |
|||
} |
|||
.ui.five.steps > .step { |
|||
width: 20%; |
|||
} |
|||
.ui.six.steps > .step { |
|||
width: 16.666%; |
|||
} |
|||
.ui.seven.steps > .step { |
|||
width: 14.285%; |
|||
} |
|||
.ui.eight.steps > .step { |
|||
width: 12.500%; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Sizes |
|||
*******************************/ |
|||
|
|||
.ui.small.step, |
|||
.ui.small.steps .step { |
|||
font-size: 0.8rem; |
|||
} |
|||
.ui.step, |
|||
.ui.steps .step { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.step, |
|||
.ui.large.steps .step { |
|||
font-size: 1.25rem; |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* # Semantic Accordion |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Button |
|||
*******************************/ |
|||
|
|||
.ui.accordion { |
|||
width: 600px; |
|||
max-width: 100%; |
|||
overflow: hidden; |
|||
|
|||
font-size: 1rem; |
|||
border-radius: 0.3125em; |
|||
|
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.accordion .title { |
|||
cursor: pointer; |
|||
|
|||
margin: 0em; |
|||
padding: 0.75em 1em; |
|||
|
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-moz-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-o-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-ms-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
} |
|||
.ui.accordion .title:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/* Content */ |
|||
.ui.accordion .content { |
|||
display: none; |
|||
margin: 0em; |
|||
padding: 1.3em 1em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Loose Coupling |
|||
---------------*/ |
|||
|
|||
.ui.basic.accordion.menu { |
|||
background-color: #FFFFFF; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.basic.accordion.menu .title, |
|||
.ui.basic.accordion.menu .content { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.accordion .title:hover, |
|||
.ui.accordion .title.active { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
.ui.accordion .title.active { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.accordion .content.active { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.basic.accordion { |
|||
background-color: transparent; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.basic.accordion .title { |
|||
background-color: transparent; |
|||
border-top: none; |
|||
} |
|||
|
|||
.ui.basic.accordion .title, |
|||
.ui.basic.accordion .content { |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
} |
|||
@ -0,0 +1,271 @@ |
|||
|
|||
/******************************* |
|||
Chat Room |
|||
*******************************/ |
|||
|
|||
.ui.chatroom { |
|||
background-color: #F8F8F8; |
|||
width: 330px; |
|||
height: 370px; |
|||
padding: 0px; |
|||
} |
|||
.ui.chatroom .room { |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
height: 286px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-top: none; |
|||
border-bottom: none; |
|||
} |
|||
.ui.chatroom .room .loader { |
|||
display: none; |
|||
margin: -25px 0px 0px -25px; |
|||
} |
|||
/* Chat Room Actions */ |
|||
.ui.chatroom .actions { |
|||
overflow: hidden; |
|||
background-color: #EEEEEE; |
|||
padding: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.chatroom .actions .button { |
|||
float: right; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
/* Online User Count */ |
|||
.ui.chatroom .actions .message { |
|||
float: left; |
|||
margin-left: 6px; |
|||
font-size: 11px; |
|||
color: #AAAAAA; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
line-height: 28px; |
|||
} |
|||
.ui.chatroom .actions .message .loader { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
|
|||
/* Chat Room Text Log */ |
|||
.ui.chatroom .log { |
|||
float: left; |
|||
|
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.ui.chatroom .log .message { |
|||
padding: 3px 0px; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .message:first-child { |
|||
border-top: none; |
|||
} |
|||
/* status event */ |
|||
.ui.chatroom .status { |
|||
padding: 5px 0px; |
|||
color: #AAAAAA; |
|||
|
|||
font-size: 12px; |
|||
font-style: italic; |
|||
line-height: 1.33; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .status:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.ui.chatroom .log .flag { |
|||
float: left; |
|||
} |
|||
.ui.chatroom .log p { |
|||
margin-left: 0px; |
|||
} |
|||
.ui.chatroom .log .author { |
|||
font-weight: bold; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
transition: color 0.3s ease-out; |
|||
} |
|||
.ui.chatroom .log a.author:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.ui.chatroom .log .message.admin p { |
|||
font-weight: bold; |
|||
margin: 1px 0px 0px 23px; |
|||
} |
|||
.ui.chatroom .log .divider { |
|||
margin: -1px 0px; |
|||
font-size: 11px; |
|||
padding: 10px 0px; |
|||
border-top: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid #F8F8F8; |
|||
} |
|||
.ui.chatroom .log .divider .rule { |
|||
top: 50%; |
|||
width: 15%; |
|||
} |
|||
|
|||
.ui.chatroom .log .divider .label { |
|||
color: #777777; |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* Chat Room User List */ |
|||
.ui.chatroom .room .list { |
|||
position: relative; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
float: left; |
|||
background-color: #EEEEEE; |
|||
border-left: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
display: table; |
|||
padding: 3px 7px; |
|||
border-bottom: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.chatroom .room .list .image { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
} |
|||
.ui.chatroom .room .list .image img { |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.chatroom .room .list p { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
padding-left: 7px; |
|||
padding-right: 14px; |
|||
font-size: 11px; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
.ui.chatroom .room .list a:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* User List Loading */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
|
|||
/* Chat Room Talk Input */ |
|||
.ui.chatroom .talk { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 5px 0px 0px; |
|||
|
|||
background-color: #EEEEEE; |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
.ui.chatroom .talk .avatar, |
|||
.ui.chatroom .talk input, |
|||
.ui.chatroom .talk .button { |
|||
float: left; |
|||
} |
|||
|
|||
.ui.chatroom .talk .avatar img { |
|||
display: block; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 4px; |
|||
border-radius: 500rem; |
|||
} |
|||
.ui.chatroom .talk input { |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0px; |
|||
width: 196px; |
|||
height: 14px; |
|||
padding: 8px 5px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.chatroom .talk input.focus { |
|||
border: 1px solid #AAAAAA; |
|||
} |
|||
.ui.chatroom .send { |
|||
width: 80px; |
|||
height: 32px; |
|||
|
|||
margin-left: -1px; |
|||
padding: 4px 12px; |
|||
font-size: 12px; |
|||
line-height: 23px; |
|||
|
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 0 5px 5px 0; |
|||
} |
|||
.ui.chatroom .talk .log-in.button { |
|||
display: block; |
|||
float: none; |
|||
margin-top: -6px; |
|||
height: 22px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.chatroom .talk .log-in.button i { |
|||
vertical-align: text-top; |
|||
} |
|||
|
|||
/* Quirky Flags */ |
|||
.ui.chatroom .log .team.flag { |
|||
width: 18px; |
|||
} |
|||
|
|||
/* Chat room Loaded */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.chatroom { |
|||
width: 330px; |
|||
height: 370px; |
|||
} |
|||
.ui.chatroom .room .container { |
|||
width: 3000px; |
|||
} |
|||
.ui.chatroom .log { |
|||
width: 314px; |
|||
height: 278px; |
|||
padding: 4px 7px; |
|||
} |
|||
.ui.chatroom .room .list { |
|||
width: 124px; |
|||
height: 278px; |
|||
padding: 4px 0px; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
width: 110px; |
|||
} |
|||
.ui.chatroom .talk { |
|||
height: 40px; |
|||
} |
|||
@ -0,0 +1,378 @@ |
|||
/******************************* |
|||
UI Checkbox |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Standard |
|||
---------------*/ |
|||
|
|||
|
|||
/*--- Content ---*/ |
|||
.ui.checkbox { |
|||
position: relative; |
|||
display: inline-block; |
|||
outline: none; |
|||
|
|||
margin-right: 0.5em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.checkbox input { |
|||
visibility: hidden; |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
/*--- Box ---*/ |
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
outline: none; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
|
|||
line-height: 1; |
|||
width: 1em; |
|||
height: 1em; |
|||
bottom: 0em; |
|||
left: 0em; |
|||
border-radius: 4px; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
background: #FFFFFF; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-moz-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-o-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-ms-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
} |
|||
|
|||
/*--- Checkbox ---*/ |
|||
.ui.checkbox .box:after, |
|||
.ui.checkbox label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
opacity: 0; |
|||
content: ''; |
|||
position: absolute; |
|||
background: transparent; |
|||
border: 0.2em solid #333333; |
|||
border-top: none; |
|||
border-right: none; |
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
.ui.checkbox .box:after, |
|||
.ui.checkbox label:after { |
|||
top: 0.3em; |
|||
left: 0.2em; |
|||
width: 0.45em; |
|||
height: 0.15em; |
|||
} |
|||
|
|||
/*--- Label ---*/ |
|||
.ui.checkbox + label { |
|||
cursor: pointer; |
|||
opacity: 0.85; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.checkbox + label:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*--- Hover ---*/ |
|||
.ui.checkbox .box:hover, |
|||
.ui.checkbox label:hover { |
|||
background-color: #FAFAFA; |
|||
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
|
|||
/*--- Down ---*/ |
|||
.ui.checkbox .box:active, |
|||
.ui.checkbox label:active { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
|
|||
/*--- Active ---*/ |
|||
.ui.checkbox input:checked + .box:after, |
|||
.ui.checkbox input:checked + label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|||
filter: alpha(opacity=100); |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*--- Disabled ---*/ |
|||
.ui.disabled.checkbox + .box:after, |
|||
.ui.checkbox input[disabled] + .box:after, |
|||
.ui.disabled.checkbox label, |
|||
.ui.checkbox input[disabled] + label { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Radio |
|||
---------------*/ |
|||
|
|||
.ui.radio.checkbox { |
|||
width: 14px; |
|||
height: 16px; |
|||
} |
|||
.ui.radio.checkbox .box, |
|||
.ui.radio.checkbox label { |
|||
width: 14px; |
|||
height: 14px; |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
.ui.radio.checkbox .box:after, |
|||
.ui.radio.checkbox label:after { |
|||
top: 3px; |
|||
left: 3px; |
|||
|
|||
border: none; |
|||
width: 8px; |
|||
height: 8px; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Slider |
|||
---------------*/ |
|||
|
|||
.ui.slider.checkbox { |
|||
width: 3em; |
|||
height: 2em; |
|||
} |
|||
/* Line */ |
|||
.ui.slider.checkbox:after { |
|||
position: absolute; |
|||
top: 1em; |
|||
left: 0em; |
|||
content: ''; |
|||
|
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
/* Button */ |
|||
.ui.slider.checkbox .box, |
|||
.ui.slider.checkbox label { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
top: 0.25em; |
|||
left: 0; |
|||
z-index: 1; |
|||
|
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: left 0.3s ease 0s; |
|||
-moz-transition: left 0.3s ease 0s; |
|||
-o-transition: left 0.3s ease 0s; |
|||
-ms-transition: left 0.3s ease 0s; |
|||
transition: left 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Button Activation Light */ |
|||
.ui.slider.checkbox .box:after, |
|||
.ui.slider.checkbox label:after { |
|||
opacity: 1; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
top: 0.375em; |
|||
left: 0.375em; |
|||
|
|||
border: none; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
|
|||
background-color: #D95C5C; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: background 0.3s ease 0s; |
|||
-moz-transition: background 0.3s ease 0s; |
|||
-o-transition: background 0.3s ease 0s; |
|||
-ms-transition: background 0.3s ease 0s; |
|||
transition: background 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Active Slider Toggle */ |
|||
.ui.slider.checkbox input:checked + .box, |
|||
.ui.slider.checkbox input:checked + label { |
|||
left: 1.75em; |
|||
} |
|||
.ui.slider.checkbox input:checked + .box:after, |
|||
.ui.slider.checkbox input:checked + label:after { |
|||
background-color: #89B84C; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Toggle |
|||
---------------*/ |
|||
|
|||
.ui.toggle.checkbox { |
|||
width: 3em; |
|||
height: 2em; |
|||
} |
|||
/* Line */ |
|||
.ui.toggle.checkbox:after { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
top: 0.25em; |
|||
left: 0em; |
|||
z-index: 1; |
|||
|
|||
background-color: #FFFFFF; |
|||
width: 100%; |
|||
height: 1.5em; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 50rem; |
|||
} |
|||
.ui.toggle.checkbox .box, |
|||
.ui.toggle.checkbox label { |
|||
position: absolute; |
|||
top: 0.65em; |
|||
left: 0.5em; |
|||
|
|||
-webkit-transition: left 0.3s ease 0s; |
|||
-moz-transition: left 0.3s ease 0s; |
|||
-o-transition: left 0.3s ease 0s; |
|||
-ms-transition: left 0.3s ease 0s; |
|||
transition: left 0.3s ease 0s; |
|||
|
|||
background-color: transparent; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
/* Button Activation Light */ |
|||
.ui.toggle.checkbox .box:after, |
|||
.ui.toggle.checkbox label:after { |
|||
opacity: 1; |
|||
|
|||
content: ''; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
|
|||
border: none; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
|
|||
background-color: #D95C5C; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: background 0.3s ease 0s; |
|||
-moz-transition: background 0.3s ease 0s; |
|||
-o-transition: background 0.3s ease 0s; |
|||
-ms-transition: background 0.3s ease 0s; |
|||
transition: background 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Active toggle Toggle */ |
|||
.ui.toggle.checkbox input:checked + .box, |
|||
.ui.toggle.checkbox input:checked + label { |
|||
left: 1.75em; |
|||
} |
|||
.ui.toggle.checkbox input:checked + .box:after, |
|||
.ui.toggle.checkbox input:checked + label:after { |
|||
background-color: #89B84C; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.checkbox { |
|||
width: 1em; |
|||
height: 1em; |
|||
} |
|||
.ui.checkbox, |
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.ui.large.checkbox { |
|||
width: 1.25em; |
|||
height: 1.25em; |
|||
} |
|||
.ui.large.checkbox, |
|||
.ui.large.checkbox .box, |
|||
.ui.large.checkbox label { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.huge.checkbox { |
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
} |
|||
.ui.huge.checkbox, |
|||
.ui.huge.checkbox .box, |
|||
.ui.huge.checkbox label { |
|||
font-size: 1.5em; |
|||
} |
|||
@ -0,0 +1,230 @@ |
|||
/* |
|||
* # Semantic Dimmer |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dimmer |
|||
*******************************/ |
|||
|
|||
.ui.dimmable { |
|||
position: relative; |
|||
} |
|||
|
|||
.ui.dimmer { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
|
|||
width: 0%; |
|||
height: 0%; |
|||
|
|||
text-align: center; |
|||
vertical-align: middle; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
opacity: 0; |
|||
line-height: 1; |
|||
|
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
|
|||
-webkit-animation-duration: 0.5s; |
|||
-moz-animation-duration: 0.5s; |
|||
-o-animation-duration: 0.5s; |
|||
-ms-animation-duration: 0.5s; |
|||
animation-duration: 0.5s; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-moz-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-o-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-ms-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
transition: |
|||
background-color 0.5s linear |
|||
; |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* |
|||
.ui.dimmed.dimmable > :not(.dimmer) { |
|||
-webkit-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-moz-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-o-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-ms-transition: |
|||
filter 0.5s ease |
|||
; |
|||
transition: |
|||
filter 0.5s ease |
|||
; |
|||
} |
|||
*/ |
|||
|
|||
|
|||
/* Dimmer Content */; |
|||
.ui.dimmer > .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: table; |
|||
|
|||
-webkit-user-select: text; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
} |
|||
.ui.dimmer > .content > div { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
/* Loose Coupling */ |
|||
.ui.segment > .ui.dimmer { |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
.ui.horizontal.segment > .ui.dimmer, |
|||
.ui.vertical.segment > .ui.dimmer { |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/* |
|||
.ui.dimmed.dimmable > :not(.dimmer) { |
|||
-webkit-filter: ~"blur(5px) grayscale(0.7)"; |
|||
-moz-filter: ~"blur(5px) grayscale(0.7)"; |
|||
} |
|||
*/ |
|||
.ui.dimmed.dimmable > .ui.dimmer, |
|||
.ui.active.dimmer { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.disabled.dimmer { |
|||
width: 0em !important; |
|||
height: 0em !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Page |
|||
---------------*/ |
|||
|
|||
.ui.page.dimmer { |
|||
position: fixed; |
|||
|
|||
-webkit-perspective: 2000px; |
|||
-moz-perspective: 2000px; |
|||
perspective: 2000px; |
|||
|
|||
-webkit-transform-origin: top center; |
|||
-moz-transform-origin: top center; |
|||
-o-transform-origin: top center; |
|||
-ms-transform-origin: top center; |
|||
transform-origin: top center; |
|||
} |
|||
/* |
|||
body.ui.dimmed.dimmable > :not(.dimmer){ |
|||
-webkit-filter: ~"blur(15px) grayscale(0.7)"; |
|||
-moz-filter: ~"blur(15px) grayscale(0.7)"; |
|||
} |
|||
*/ |
|||
|
|||
/*-------------- |
|||
Aligned |
|||
---------------*/ |
|||
|
|||
.ui.dimmer > .top.aligned.content > * { |
|||
vertical-align: top; |
|||
} |
|||
.ui.dimmer > .bottom.aligned.content > * { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
.ui.inverted.dimmer > .content > * { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dimmer { |
|||
display: block; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
z-index: -100; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.dimmer { |
|||
overflow: visible; |
|||
opacity: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
z-index: 1; |
|||
} |
|||
|
|||
.ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85) |
|||
} |
|||
@ -0,0 +1,506 @@ |
|||
/* |
|||
* # Semantic Dropdown |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
|
|||
.ui.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-o-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
} |
|||
|
|||
.ui.dropdown .menu { |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
|
|||
margin: 0em; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
|
|||
white-space: nowrap; |
|||
font-size: 0.875em; |
|||
text-shadow: none; |
|||
|
|||
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease; |
|||
-moz-transition: opacity 0.2s ease; |
|||
-o-transition: opacity 0.2s ease; |
|||
-ms-transition: opacity 0.2s ease; |
|||
transition: opacity 0.2s ease; |
|||
z-index: 11; |
|||
} |
|||
|
|||
/* Dropdown Icon */ |
|||
.ui.dropdown > .dropdown.icon { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Dropdown Text */ |
|||
.ui.dropdown > .text { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 0px; |
|||
} |
|||
.ui.menu .dropdown:last-child .menu, |
|||
.ui > .ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 0px; |
|||
} |
|||
|
|||
/* Sub Menu Position */ |
|||
.ui.dropdown .menu .menu { |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
margin: 0em !important; |
|||
border-radius: 0 0.325em 0.325em 0em !important; |
|||
} |
|||
.ui.dropdown .menu .menu:after { |
|||
display: none; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
font-size: 0.875em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
|
|||
padding: 0.85em 1em !important; |
|||
font-size: 0.875rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
|
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item:before { |
|||
display: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Dropdown Visible */ |
|||
.ui.visible.dropdown { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
.ui.visible.dropdown > .menu { |
|||
display: block; |
|||
} |
|||
|
|||
/* Menu Item Hover */ |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
z-index: 12; |
|||
} |
|||
|
|||
/* Menu Item Active */ |
|||
.ui.dropdown .menu .active.item { |
|||
box-shadow: none; |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
border-left: none; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-shadow: none; |
|||
box-shadow: none; |
|||
z-index: 12; |
|||
} |
|||
|
|||
/* Default Text */ |
|||
.ui.dropdown > .default.text, |
|||
.ui.default.dropdown > .text { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.dropdown:hover > .default.text, |
|||
.ui.default.dropdown:hover > .text { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dropdown .menu:before, |
|||
.ui.simple.dropdown .menu:after { |
|||
display: none; |
|||
} |
|||
.ui.simple.dropdown .menu { |
|||
display: block; |
|||
overflow: hidden; |
|||
top: -9999px !important; |
|||
position: absolute; |
|||
opacity: 0; |
|||
width: 0; |
|||
height: 0; |
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown, |
|||
.ui.simple.dropdown:hover { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown > .menu, |
|||
.ui.simple.dropdown:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.dropdown > .menu .item:active > .menu, |
|||
.ui.simple.dropdown:hover > .menu .item:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.disabled.dropdown:hover .menu { |
|||
display: none; |
|||
height: 0px; |
|||
width: 0px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
/* Displays like a select box */ |
|||
|
|||
.ui.selection.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
|
|||
background-color: #FFFFFF; |
|||
padding: 0.5em 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-border-radius: 0.3125em !important; |
|||
-moz-border-radius: 0.3125em !important; |
|||
border-radius: 0.3125em !important; |
|||
} |
|||
.ui.selection.dropdown > .dropdown.icon { |
|||
float: right; |
|||
|
|||
opacity: 0.7; |
|||
margin: 0.2em 0em 0.2em 1.25em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown, |
|||
.ui.selection.dropdown .menu { |
|||
top: 100%; |
|||
-webkit-transition: box-shadow 0.2s ease-out; |
|||
-moz-transition: box-shadow 0.2s ease-out; |
|||
-o-transition: box-shadow 0.2s ease-out; |
|||
-ms-transition: box-shadow 0.2s ease-out; |
|||
transition: box-shadow 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown .menu { |
|||
max-height: 312px; |
|||
|
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
} |
|||
.ui.selection.dropdown .menu:after, |
|||
.ui.selection.dropdown .menu:before { |
|||
display: none; |
|||
} |
|||
.ui.selection.dropdown .menu img { |
|||
height: 2.5em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.selection.dropdown:hover, |
|||
.ui.selection.dropdown.hover { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.selection.dropdown:hover > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.selection.active.dropdown { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
} |
|||
.ui.selection.active.dropdown > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
.ui.selection.active.dropdown .menu { |
|||
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fluid |
|||
---------------*/ |
|||
|
|||
.ui.fluid.dropdown { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inline |
|||
---------------*/ |
|||
|
|||
.ui.inline.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
color: inherit; |
|||
} |
|||
.ui.inline.dropdown .dropdown.icon { |
|||
margin: 0em 0.5em 0em 0.25em; |
|||
} |
|||
.ui.inline.dropdown .text { |
|||
font-weight: bold; |
|||
} |
|||
.ui.inline.dropdown .menu { |
|||
cursor: auto; |
|||
margin-top: 0.25em; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.dropdown .menu { |
|||
left: 0; |
|||
right: auto; |
|||
|
|||
margin-top: 0.5em; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointing |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.pointing.dropdown .menu { |
|||
top: 100%; |
|||
margin-top: 0.75em; |
|||
-moz-border-radius: 0.325em; |
|||
-webkit-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
display: block; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
content: " "; |
|||
visibility: visible; |
|||
|
|||
width: 0.5em; |
|||
height: 0.5em; |
|||
|
|||
-moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu .item.active:first-child { |
|||
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
} |
|||
|
|||
/* Directions */ |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 50%; |
|||
margin: 0em 0em 0em -0.25em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
left: 0%; |
|||
right: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 1.25em; |
|||
right: auto; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
right: 0%; |
|||
left: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: auto; |
|||
right: 1.25em; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.ui.left.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: 100%; |
|||
right: auto; |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.left.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
.ui.right.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: auto; |
|||
right: 100%; |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.right.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: auto; |
|||
right: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(135deg); |
|||
-moz-transform: rotate(135deg); |
|||
transform: rotate(135deg); |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
/* |
|||
* # Semantic Modal |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Aug 05, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Modal |
|||
*******************************/ |
|||
|
|||
.ui.modal { |
|||
display: none; |
|||
position: fixed; |
|||
z-index: 1001; |
|||
|
|||
top: 50%; |
|||
left: 50%; |
|||
text-align: left; |
|||
|
|||
width: 800px; |
|||
margin-left: -400px; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Close |
|||
---------------*/ |
|||
|
|||
.ui.modal > .close { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
|
|||
opacity: 0.8; |
|||
|
|||
font-size: 1.25em; |
|||
top: -1.75em; |
|||
right: -1.75em; |
|||
|
|||
color: #FFFFFF; |
|||
} |
|||
.ui.modal > .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Header |
|||
---------------*/ |
|||
|
|||
.ui.modal > .header { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
margin: 0em; |
|||
padding: 1.5rem 2rem; |
|||
|
|||
font-size: 1.6em; |
|||
font-weight: bold; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0px 0px; |
|||
-moz-border-radius: 0.325em 0.325em 0px 0px; |
|||
border-radius: 0.325em 0.325em 0px 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.modal > .content { |
|||
display: table; |
|||
position: relative; |
|||
padding: 2em; |
|||
background-color: #F4F4F4; |
|||
} |
|||
.ui.modal > .content > .left { |
|||
display: table-cell; |
|||
padding-right: 5%; |
|||
} |
|||
.ui.modal > .content > .right { |
|||
display: table-cell; |
|||
padding-left: 5%; |
|||
vertical-align: middle; |
|||
|
|||
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.modal > .content p { |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
/*-------------- |
|||
Actions |
|||
---------------*/ |
|||
|
|||
.ui.modal .actions { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
padding: 1rem 2rem; |
|||
text-align: right; |
|||
} |
|||
.ui.modal .actions > .button { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.basic.modal { |
|||
background-color: transparent; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.basic.modal .content { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* A modal that cannot fit on the page */ |
|||
.ui.modal.scrolling { |
|||
position: absolute; |
|||
margin-top: 100px; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.modal { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
/* |
|||
* # Semantic Nag |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Nag |
|||
*******************************/ |
|||
|
|||
.ui.nag { |
|||
display: none; |
|||
opacity: 0.95; |
|||
|
|||
position: relative; |
|||
top: 0px; |
|||
left: 0%; |
|||
z-index: 101; |
|||
|
|||
min-height: 0; |
|||
width: 100%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
line-height: 3em; |
|||
padding: 0em 1em; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
|
|||
font-size: 1em; |
|||
text-align: center; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
|
|||
-webkit-transition: 0.2s background; |
|||
-moz-transition: 0.2s background; |
|||
-o-transition: 0.2s background; |
|||
-ms-transition: 0.2s background; |
|||
transition: 0.2s background; |
|||
} |
|||
|
|||
a.ui.nag { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.nag > .title { |
|||
display: inline-block; |
|||
margin: 0em 0.5em; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.ui.nag > .close.icon { |
|||
cursor: pointer; |
|||
opacity: 0.4; |
|||
|
|||
position: absolute; |
|||
top: 50%; |
|||
right: 1em; |
|||
|
|||
margin-top: -0.5em; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-transition: 0.1s opacity; |
|||
-moz-transition: 0.1s opacity; |
|||
-o-transition: 0.1s opacity; |
|||
-ms-transition: 0.1s opacity; |
|||
transition: 0.1s opacity; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.nag:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.nag .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Static |
|||
---------------*/ |
|||
|
|||
.ui.overlay.nag { |
|||
position: absolute; |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fixed |
|||
---------------*/ |
|||
|
|||
.ui.fixed.nag { |
|||
position: fixed; |
|||
} |
|||
|
|||
/*-------------- |
|||
Bottom |
|||
---------------*/ |
|||
|
|||
.ui.botton.nag { |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.fixed.bottom.nags, |
|||
.ui.fixed.bottom.nag { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
White |
|||
---------------*/ |
|||
|
|||
.ui.white.nags .nag, |
|||
.ui.white.nag { |
|||
background-color: #F1F1F1; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
color: #ACACAC; |
|||
} |
|||
.ui.white.nags .nag .close, |
|||
.ui.white.nags .nag .title, |
|||
.ui.white.nag .close, |
|||
.ui.white.nag .title { |
|||
color: #333333; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.nags .nag { |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
@ -0,0 +1,238 @@ |
|||
/* |
|||
* # Semantic Popup |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Popup |
|||
*******************************/ |
|||
|
|||
.ui.popup { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
z-index: 900; |
|||
|
|||
border: 1px solid #DCDDDE; |
|||
max-width: 250px; |
|||
background-color: #FFFFFF; |
|||
|
|||
padding: 0.8em 1.2em; |
|||
font-size: 0.875rem; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
|
|||
-webkit-box-shadow: 0px 1px 1px #DCDDDE; |
|||
-moz-box-shadow: 0px 1px 1px #DCDDDE; |
|||
box-shadow: 0px 1px 1px #DCDDDE; |
|||
} |
|||
.ui.popup .header { |
|||
padding: 0em 0em 0.5em; |
|||
|
|||
font-size: 1.125em; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.ui.popup:before { |
|||
position: absolute; |
|||
content: ""; |
|||
width: 0.75em; |
|||
height: 0.75rem; |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
z-index: 2; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-box-shadow: 1px 1px 1px #DCDDDE; |
|||
-moz-box-shadow: 1px 1px 1px #DCDDDE; |
|||
box-shadow: 1px 1px 1px #DCDDDE; |
|||
} |
|||
|
|||
.ui.popup .ui.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Spacing |
|||
---------------*/ |
|||
.ui.popup { |
|||
margin: 0em; |
|||
} |
|||
.ui.popup.bottom { |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.top { |
|||
margin: 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.left.center { |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.right.center { |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.center { |
|||
margin-left: -1.25em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointer |
|||
---------------*/ |
|||
|
|||
/*--- Below ---*/ |
|||
.ui.bottom.center.popup:before { |
|||
margin-left: -0.4em; |
|||
top: -0.4em; |
|||
left: 50%; |
|||
right: auto; |
|||
bottom: auto; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
.ui.bottom.left.popup:before { |
|||
top: -0.4em; |
|||
left: 1em; |
|||
right: auto; |
|||
bottom: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
.ui.bottom.right.popup:before { |
|||
top: -0.4em; |
|||
right: 1em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
/*--- Above ---*/ |
|||
.ui.top.center.popup:before { |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -0.4em; |
|||
left: 50%; |
|||
margin-left: -0.4em; |
|||
} |
|||
.ui.top.left.popup:before { |
|||
bottom: -0.4em; |
|||
left: 1em; |
|||
top: auto; |
|||
right: auto; |
|||
margin-left: 0em; |
|||
} |
|||
.ui.top.right.popup:before { |
|||
bottom: -0.4em; |
|||
right: 1em; |
|||
top: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
} |
|||
/*--- Left ---*/ |
|||
.ui.left.center.popup:before { |
|||
top: 50%; |
|||
right: -0.35em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: 1px -1px 1px #dcddde; |
|||
-webkit-box-shadow: 1px -1px 1px #dcddde; |
|||
box-shadow: 1px -1px 1px #dcddde; |
|||
} |
|||
/*--- Right ---*/ |
|||
.ui.right.center.popup:before { |
|||
top: 50%; |
|||
left: -0.35em; |
|||
bottom: auto; |
|||
right: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: -1px 1px 1px #dcddde; |
|||
-webkit-box-shadow: -1px 1px 1px #dcddde; |
|||
box-shadow: -1px 1px 1px #dcddde; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.loading.popup { |
|||
display: block; |
|||
visibility: hidden; |
|||
} |
|||
.ui.active.popup { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.small.popup { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.large.popup { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
/* Inverted colors */ |
|||
.ui.inverted.popup { |
|||
background-color: #333333; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.popup .header { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.popup:before { |
|||
background-color: #333333; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
|
|||
.ui.rating { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5em; |
|||
} |
|||
.ui.rating:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
.ui.rating:after { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: default; |
|||
float: left; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:after { |
|||
content: "\2605"; |
|||
color: rgba(0, 0, 0, 0.15); |
|||
|
|||
-webkit-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
|
|||
.ui.star.rating .icon:after { |
|||
content: '\e800'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.star.rating .active.icon:after { |
|||
content: '\e801'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
|
|||
.ui.heart.rating .icon:after { |
|||
content: '\2661'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.heart.rating .active.icon:after { |
|||
content: '\2665'; |
|||
font-family: 'Icons'; |
|||
color: #EF404A; |
|||
} |
|||
.ui.heart.rating .hover.icon:after, |
|||
.ui.heart.rating .active.hover.icon:after { |
|||
color: #FF2733; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
|
|||
/* active rating */ |
|||
.ui.active.rating .icon { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* active icons */ |
|||
.ui.rating .active.icon:after { |
|||
color: #FFCB08; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
/* rating */ |
|||
.ui.rating.hover .active.icon:after { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* icon */ |
|||
.ui.rating .icon.hover:after, |
|||
.ui.rating .icon.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.rating { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.rating { |
|||
font-size: 1.5rem; |
|||
} |
|||
.ui.large.rating { |
|||
font-size: 2rem; |
|||
} |
|||
@ -0,0 +1,367 @@ |
|||
/* |
|||
* # Semantic Reveal |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: June 28, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Reveal |
|||
*******************************/ |
|||
|
|||
.ui.reveal { |
|||
display: inline-block; |
|||
position: relative !important; |
|||
z-index: 2 !important; |
|||
font-size: 0em !important; |
|||
} |
|||
|
|||
.ui.reveal > .content { |
|||
font-size: 1em !important; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
position: absolute !important; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
z-index: 4 !important; |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.reveal > .hidden.content { |
|||
position: relative !important; |
|||
z-index: 3 !important; |
|||
} |
|||
|
|||
/*------------------ |
|||
Loose Coupling |
|||
-------------------*/ |
|||
|
|||
.ui.reveal.button { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.reveal { |
|||
position: relative !important; |
|||
display: block; |
|||
overflow: hidden !important; |
|||
|
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ui.slide.reveal > .content { |
|||
display: block; |
|||
float: left; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
-webkit-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.slide.reveal > .visible.content { |
|||
position: relative !important; |
|||
} |
|||
.ui.slide.reveal > .hidden.content { |
|||
position: absolute !important; |
|||
left: 100% !important; |
|||
width: 100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .visible.content { |
|||
left: -100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.right.slide.reveal > .visible.content { |
|||
left: 0%; |
|||
} |
|||
.ui.right.slide.reveal > .hidden.content { |
|||
left: auto !important; |
|||
right: 100% !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
right: auto !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .hidden.content { |
|||
left: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
|
|||
.ui.up.slide.reveal > .visible.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.up.slide.reveal > .hidden.content { |
|||
top: 100% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .visible.content { |
|||
top: -100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .hidden.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.down.slide.reveal > .visible.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
bottom: 0% !important; |
|||
} |
|||
.ui.down.slide.reveal > .hidden.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: 100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .visible.content { |
|||
left: 0% !important; |
|||
bottom: -100% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
bottom: 0% !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Fade |
|||
---------------*/ |
|||
|
|||
.ui.fade.reveal > .visible.content { |
|||
opacity: 1; |
|||
} |
|||
.ui.fade.reveal:hover > .visible.content { |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Move |
|||
---------------*/ |
|||
|
|||
.ui.move.reveal > .visible.content, |
|||
.ui.move.left.reveal > .visible.content { |
|||
left: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
.ui.move.reveal:hover > .visible.content, |
|||
.ui.move.left.reveal:hover > .visible.content { |
|||
right: 100% !important; |
|||
} |
|||
|
|||
.ui.move.right.reveal > .visible.content { |
|||
right: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.move.right.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
} |
|||
|
|||
.ui.move.up.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
top: auto !important; |
|||
|
|||
bottom: 0% !important; |
|||
} |
|||
.ui.move.up.reveal:hover > .visible.content { |
|||
bottom: 100% !important; |
|||
} |
|||
|
|||
.ui.move.down.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
bottom: auto !important; |
|||
|
|||
top: 0% !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.move.down.reveal:hover > .visible.content { |
|||
top: 100% !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Rotate |
|||
---------------*/ |
|||
|
|||
.ui.rotate.reveal > .visible.content { |
|||
-webkit-transition-duration: 0.8s; |
|||
-moz-transition-duration: 0.8s; |
|||
-o-transition-duration: 0.8s; |
|||
-ms-transition-duration: 0.8s; |
|||
transition-duration: 0.8s; |
|||
|
|||
-webkit-transform: rotate(0deg); |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-ms-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
.ui.rotate.reveal > .visible.content, |
|||
.ui.rotate.right.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom right; |
|||
-moz-transform-origin: bottom right; |
|||
-o-transform-origin: bottom right; |
|||
-ms-transform-origin: bottom right; |
|||
transform-origin: bottom right; |
|||
} |
|||
.ui.rotate.reveal:hover > .visible.content, |
|||
.ui.rotate.right.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(110deg); |
|||
-moz-transform: rotate(110deg); |
|||
-o-transform: rotate(110deg); |
|||
-ms-transform: rotate(110deg); |
|||
transform: rotate(110deg); |
|||
} |
|||
|
|||
.ui.rotate.left.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom left; |
|||
-moz-transform-origin: bottom left; |
|||
-o-transform-origin: bottom left; |
|||
-ms-transform-origin: bottom left; |
|||
transform-origin: bottom left; |
|||
} |
|||
.ui.rotate.left.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(-110deg); |
|||
-moz-transform: rotate(-110deg); |
|||
-o-transform: rotate(-110deg); |
|||
-ms-transform: rotate(-110deg); |
|||
transform: rotate(-110deg); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.reveal { |
|||
opacity: 1 !important; |
|||
} |
|||
.ui.disabled.reveal > .content { |
|||
-webkit-transition: none !important; |
|||
-moz-transition: none !important; |
|||
-o-transition: none !important; |
|||
-ms-transition: none !important; |
|||
transition: none !important; |
|||
} |
|||
.ui.disabled.reveal:hover > .visible.content { |
|||
position: static !important; |
|||
display: block !important; |
|||
opacity: 1 !important; |
|||
top: 0 !important; |
|||
left: 0 !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
transform: none !important; |
|||
} |
|||
.ui.disabled.reveal:hover > .hidden.content { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Masked |
|||
---------------*/ |
|||
|
|||
.ui.masked.reveal { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Instant |
|||
---------------*/ |
|||
|
|||
.ui.instant.reveal > .content { |
|||
-webkit-transition-delay: 0s !important; |
|||
-moz-transition-delay: 0s !important; |
|||
-o-transition-delay: 0s !important; |
|||
-ms-transition-delay: 0s !important; |
|||
transition-delay: 0s !important; |
|||
} |
|||
@ -0,0 +1,275 @@ |
|||
/* |
|||
* # Semantic Search |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Search |
|||
*******************************/ |
|||
|
|||
.ui.search { |
|||
position: relative; |
|||
|
|||
text-shadow: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.ui.search input { |
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Button |
|||
---------------*/ |
|||
|
|||
.ui.search > .button { |
|||
position: relative; |
|||
z-index: 2; |
|||
float: right; |
|||
margin: 0px 0px 0px -15px; |
|||
padding: 6px 15px 7px; |
|||
-webkit-border-radius: 0px 15px 15px 0px; |
|||
-moz-border-radius: 0px 15px 15px 0px; |
|||
border-radius: 0px 15px 15px 0px; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Results |
|||
---------------*/ |
|||
|
|||
.ui.search .results { |
|||
display: none; |
|||
|
|||
position: absolute; |
|||
z-index: 999; |
|||
top: 100%; |
|||
left: 0px; |
|||
|
|||
overflow: hidden; |
|||
background-color: #FFFFFF; |
|||
|
|||
margin-top: 0.5em; |
|||
width: 380px; |
|||
font-size: 0.875em; |
|||
line-height: 1.2; |
|||
color: #555555; |
|||
|
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.search .result { |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
padding: 0.5em 1em; |
|||
} |
|||
.ui.search .result:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.search .result .image { |
|||
background: #F0F0F0; |
|||
margin-right: 10px; |
|||
float: left; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
width: 38px; |
|||
height: 38px; |
|||
} |
|||
.ui.search .result .image img { |
|||
display: block; |
|||
width: 38px; |
|||
height: 38px; |
|||
} |
|||
.ui.search .result .image ~ .info { |
|||
float: none; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.ui.search .result .info { |
|||
float: left; |
|||
} |
|||
.ui.search .result .title { |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .result .description { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.ui.search .result .price { |
|||
float: right; |
|||
color: #5BBD72; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*-------------- |
|||
Message |
|||
---------------*/ |
|||
|
|||
.ui.search .message { |
|||
padding: 1em; |
|||
} |
|||
.ui.search .message .text .title { |
|||
margin: 0em 0em 0.5rem; |
|||
|
|||
font-size: 1.25rem; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .message .text .description { |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Categories |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category { |
|||
background-color: #FAFAFA; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-transition: background 0.2s ease-in; |
|||
-moz-transition: background 0.2s ease-in; |
|||
-o-transition: background 0.2s ease-in; |
|||
-ms-transition: background 0.2s ease-in; |
|||
transition: background 0.2s ease-in; |
|||
} |
|||
.ui.search .results .category:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
.ui.search .results .category > .name { |
|||
float: left; |
|||
padding: 12px 0px 0px 8px; |
|||
font-weight: bold; |
|||
color: #777777; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.search .results .category .result { |
|||
background-color: #FFFFFF; |
|||
margin-left: 80px; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* View All Results */ |
|||
.ui.search .all { |
|||
display: block; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
background-color: #FAFAFA; |
|||
height: 2em; |
|||
line-height: 2em; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
font-weight: bold; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.search .result:hover, |
|||
.ui.search .category .result:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.search .all:hover { |
|||
background-color: #F0F0F0; |
|||
} |
|||
|
|||
/*-------------- |
|||
Loading |
|||
---------------*/ |
|||
|
|||
.ui.search.loading .input .icon { |
|||
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
|||
} |
|||
.ui.search.loading .input .icon:before, |
|||
.ui.search.loading .input .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category.active { |
|||
background-color: #F1F1F1; |
|||
} |
|||
.ui.search .results .category.active > .name { |
|||
color: #333333; |
|||
} |
|||
|
|||
.ui.search .result.active, |
|||
.ui.search .category .result.active { |
|||
background-color: #FBFBFB; |
|||
} |
|||
.ui.search .result.active .title { |
|||
color: #000000; |
|||
} |
|||
.ui.search .result.active .description { |
|||
color: #555555; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/* Large */ |
|||
.ui.search .large.result .image, |
|||
.ui.search .large.result .image img { |
|||
width: 50px; |
|||
height: 50px; |
|||
} |
|||
.ui.search .large.results .indented.info { |
|||
margin-left: 65px; |
|||
} |
|||
.ui.search .large.results .info .title { |
|||
font-size: 16px; |
|||
} |
|||
.ui.search .large.results .info .description { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
@ -0,0 +1,115 @@ |
|||
/* |
|||
* # Semantic Button |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Shape |
|||
*******************************/ |
|||
|
|||
.ui.shape { |
|||
position: relative; |
|||
|
|||
-webkit-perspective: 2000px; |
|||
-moz-perspective: 2000px; |
|||
-ms-perspective: 2000px; |
|||
perspective: 2000px; |
|||
} |
|||
|
|||
.ui.shape .sides { |
|||
-webkit-transform-style: preserve-3d; |
|||
-moz-transform-style: preserve-3d; |
|||
-ms-transform-style: preserve-3d; |
|||
transform-style: preserve-3d; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
opacity: 1; |
|||
width: 100%; |
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Animating |
|||
---------------*/ |
|||
|
|||
.ui.shape.animating .sides { |
|||
position: absolute; |
|||
} |
|||
.ui.shape .animating.side { |
|||
position: absolute; |
|||
width: 100%; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 100; |
|||
} |
|||
.ui.shape .hidden.side { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
CSS |
|||
---------------*/ |
|||
|
|||
.ui.shape.css { |
|||
-webkit-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-moz-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-o-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-ms-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
} |
|||
.ui.shape.css .sides { |
|||
-webkit-transition: all 0.6s ease-in-out; |
|||
-moz-transition: all 0.6s ease-in-out; |
|||
-o-transition: all 0.6s ease-in-out; |
|||
-ms-transition: all 0.6s ease-in-out; |
|||
transition: all 0.6s ease-in-out; |
|||
} |
|||
.ui.shape.css .side { |
|||
-webkit-transition: opacity 0.6s ease-in-out; |
|||
-moz-transition: opacity 0.6s ease-in-out; |
|||
-o-transition: opacity 0.6s ease-in-out; |
|||
-ms-transition: opacity 0.6s ease-in-out; |
|||
transition: opacity 0.6s ease-in-out; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.shape .active.side { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,147 @@ |
|||
/******************************* |
|||
Semantic Module: Sidebar |
|||
Author: Jack Lukic |
|||
Notes: First Commit March 25, 2013 |
|||
Sidebar Menu System |
|||
*******************************/ |
|||
|
|||
/******************************* |
|||
Sidebar |
|||
*******************************/ |
|||
|
|||
body { |
|||
-webkit-transition: |
|||
margin 0.3s ease, |
|||
-webkit-transform 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin 0.3s ease, |
|||
-moz-transform 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
} |
|||
|
|||
.ui.sidebar { |
|||
position: fixed; |
|||
|
|||
margin: 0 !important; |
|||
|
|||
width: 275px !important; |
|||
height: 100% !important; |
|||
|
|||
-webkit-border-radius: 0px !important; |
|||
-moz-border-radius: 0px !important; |
|||
border-radius: 0px !important; |
|||
|
|||
-ms-overflow-y: auto; |
|||
overflow-y: auto; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 999; |
|||
|
|||
-webkit-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.sidebar { |
|||
margin-left: -275px !important; |
|||
} |
|||
|
|||
.ui.right.sidebar { |
|||
left: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
.ui.top.sidebar { |
|||
margin: -40px 0px 0px 0px !important; |
|||
width: 100% !important; |
|||
height: 40px !important; |
|||
} |
|||
|
|||
.ui.bottom.sidebar { |
|||
width: 100% !important; |
|||
height: 40px !important; |
|||
top: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.sidebar { |
|||
margin-left: -275px !important; |
|||
} |
|||
|
|||
.ui.active.top.sidebar { |
|||
margin-top: 0px !important; |
|||
} |
|||
.ui.active.bottom.sidebar { |
|||
margin-top: -40px !important; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.floating.sidebar { |
|||
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.right.floating.sidebar { |
|||
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.top.floating.sidebar { |
|||
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.bottom.floating.sidebar { |
|||
-webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
/* |
|||
* # Semantic Button |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
UI Tabs |
|||
*******************************/ |
|||
|
|||
.ui.tab { |
|||
display: none; |
|||
} |
|||
.ui.tab.active, |
|||
.ui.tab.open { |
|||
display: block; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.tab.loading { |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: block; |
|||
min-height: 250px; |
|||
text-indent: -10000px; |
|||
} |
|||
.ui.tab.loading * { |
|||
position: relative !important; |
|||
left: -10000px !important; |
|||
} |
|||
.ui.tab.loading:after { |
|||
position: absolute; |
|||
top: 50px; |
|||
left: 50%; |
|||
content: 'Loading...'; |
|||
margin-left: -32px; |
|||
text-indent: 5px; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 75px; |
|||
background: url(../images/loader-large.gif) no-repeat 0px 0px; |
|||
visibility: visible; |
|||
} |
|||
@ -0,0 +1,839 @@ |
|||
/******************************* |
|||
Semantic Module: Transition |
|||
Author: Jack Lukic |
|||
Notes: First Commit March 25, 2013 |
|||
|
|||
CSS animation definitions for |
|||
transition module |
|||
|
|||
*******************************/ |
|||
|
|||
/* |
|||
Some transitions adapted from Animate CSS |
|||
https://github.com/daneden/animate.css |
|||
*/ |
|||
|
|||
|
|||
.ui.transition { |
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
-o-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
|
|||
-webkit-animation-iteration-count: 1; |
|||
-moz-animation-iteration-count: 1; |
|||
-ms-animation-iteration-count: 1; |
|||
-o-animation-iteration-count: 1; |
|||
animation-iteration-count: 1; |
|||
|
|||
-webkit-animation-duration: 1s; |
|||
-moz-animation-duration: 1s; |
|||
-ms-animation-duration: 1s; |
|||
-o-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
|
|||
animation-timing-function: ease; |
|||
-webkit-animation-timing-function: ease; |
|||
|
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
|
|||
-webkit-transform: translateZ(0); |
|||
-moz-transform: translateZ(0); |
|||
-ms-transform: translateZ(0); |
|||
-o-transform: translateZ(0); |
|||
transform: translateZ(0); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Loading */ |
|||
.ui.loading.transition { |
|||
position: absolute; |
|||
top: -999999px; |
|||
left: -99999px; |
|||
} |
|||
|
|||
/* Hidden */ |
|||
.ui.hidden.transition { |
|||
display: none; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.visible.transition { |
|||
display: block; |
|||
visibility: visible; |
|||
} |
|||
|
|||
|
|||
/* Direction */ |
|||
.ui.out.transition { |
|||
-webkit-animation-direction: reverse; |
|||
-moz-animation-direction: reverse; |
|||
-o-animation-direction: reverse; |
|||
animation-direction: reverse; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.disabled.transition { |
|||
-webkit-animation-play-state: paused; |
|||
-moz-animation-play-state: paused; |
|||
-ms-animation-play-state: paused; |
|||
-o-animation-play-state: paused; |
|||
animation-play-state: paused; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.looping.transition { |
|||
-webkit-animation-iteration-count: infinite; |
|||
-moz-animation-iteration-count: infinite; |
|||
-ms-animation-iteration-count: infinite; |
|||
-o-animation-iteration-count: infinite; |
|||
animation-iteration-count: infinite; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
.ui.flash.transition { |
|||
-webkit-animation-name: flash; |
|||
-moz-animation-name: flash; |
|||
-o-animation-name: flash; |
|||
animation-name: flash; |
|||
} |
|||
.ui.shake.transition { |
|||
-webkit-animation-name: shake; |
|||
-moz-animation-name: shake; |
|||
-o-animation-name: shake; |
|||
animation-name: shake; |
|||
} |
|||
.ui.bounce.transition { |
|||
-webkit-animation-name: bounce; |
|||
-moz-animation-name: bounce; |
|||
-o-animation-name: bounce; |
|||
animation-name: bounce; |
|||
} |
|||
.ui.tada.transition { |
|||
-webkit-animation-name: tada; |
|||
-moz-animation-name: tada; |
|||
-o-animation-name: tada; |
|||
animation-name: tada; |
|||
} |
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
|||
.ui.pulse.transition { |
|||
-webkit-animation-name: pulse; |
|||
-moz-animation-name: pulse; |
|||
-o-animation-name: pulse; |
|||
animation-name: pulse; |
|||
} |
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
.ui.flip.transition.in, |
|||
.ui.flip.transition.out { |
|||
-webkit-perspective: 2000px; |
|||
perspective: 2000px; |
|||
} |
|||
.ui.horizontal.flip.transition.in, |
|||
.ui.horizontal.flip.transition.out { |
|||
-webkit-animation-name: horizontalFlip; |
|||
-moz-animation-name: horizontalFlip; |
|||
-o-animation-name: horizontalFlip; |
|||
animation-name: horizontalFlip; |
|||
} |
|||
.ui.vertical.flip.transition.in, |
|||
.ui.vertical.flip.transition.out { |
|||
-webkit-animation-name: verticalFlip; |
|||
-moz-animation-name: verticalFlip; |
|||
-o-animation-name: verticalFlip; |
|||
animation-name: verticalFlip; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
.ui.fade.transition.in, |
|||
.ui.fade.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
.ui.fade.up.transition.in { |
|||
-webkit-animation-name: fadeUp; |
|||
-moz-animation-name: fadeUp; |
|||
-o-animation-name: fadeUp; |
|||
animation-name: fadeUp; |
|||
} |
|||
.ui.fade.up.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
.ui.fade.down.transition.in { |
|||
-webkit-animation-name: fadeDown; |
|||
-moz-animation-name: fadeDown; |
|||
-o-animation-name: fadeDown; |
|||
animation-name: fadeDown; |
|||
} |
|||
.ui.fade.down.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
.ui.scale.transition.in, |
|||
.ui.scale.transition.out { |
|||
-webkit-animation-name: scale; |
|||
-moz-animation-name: scale; |
|||
-o-animation-name: scale; |
|||
animation-name: scale; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.down.transition.in, |
|||
.ui.slide.down.transition.out { |
|||
-webkit-animation-name: slide; |
|||
-moz-animation-name: slide; |
|||
-o-animation-name: slide; |
|||
animation-name: slide; |
|||
transform-origin: 50% 0%; |
|||
-ms-transform-origin: 50% 0%; |
|||
-webkit-transform-origin: 50% 0%; |
|||
} |
|||
.ui.slide.up.transition.in, |
|||
.ui.slide.up.transition.out { |
|||
-webkit-animation-name: slide; |
|||
-moz-animation-name: slide; |
|||
-o-animation-name: slide; |
|||
animation-name: slide; |
|||
transform-origin: 50% 100%; |
|||
-ms-transform-origin: 50% 100%; |
|||
-webkit-transform-origin: 50% 100%; |
|||
} |
|||
|
|||
@-moz-keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: scaleY(1); |
|||
} |
|||
} |
|||
@-webkit-keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: scaleY(1); |
|||
} |
|||
} |
|||
@keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scaleY(1); |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Animations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
/* Flash */ |
|||
@-webkit-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@-moz-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@-o-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
/* Shake */ |
|||
@-webkit-keyframes shake { |
|||
0%, 100% { |
|||
-webkit-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-webkit-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-webkit-transform: translateX(10px); |
|||
} |
|||
} |
|||
@-moz-keyframes shake { |
|||
0%, 100% { |
|||
-moz-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-moz-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-moz-transform: translateX(10px); |
|||
} |
|||
} |
|||
@-o-keyframes shake { |
|||
0%, 100% { |
|||
-o-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-o-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-o-transform: translateX(10px); |
|||
} |
|||
} |
|||
@keyframes shake { |
|||
0%, 100% { |
|||
transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
transform: translateX(10px); |
|||
} |
|||
} |
|||
|
|||
/* Bounce */ |
|||
@-webkit-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-webkit-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-webkit-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@-moz-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-moz-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-moz-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-moz-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@-o-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-o-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-o-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-o-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
transform: translateY(0); |
|||
} |
|||
40% { |
|||
transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
transform: translateY(-15px); |
|||
} |
|||
} |
|||
|
|||
/* Tada */ |
|||
@-webkit-keyframes tada { |
|||
0% { |
|||
-webkit-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-webkit-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-webkit-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-webkit-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
@-moz-keyframes tada { |
|||
0% { |
|||
-moz-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-moz-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-moz-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-moz-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-moz-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
@-o-keyframes tada { |
|||
0% { |
|||
-o-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-o-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-o-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-o-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-o-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes tada { |
|||
0% { |
|||
transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes pulse { |
|||
0% { |
|||
-webkit-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-webkit-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@-o-keyframes pulse { |
|||
0% { |
|||
-o-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-o-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-o-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@-moz-keyframes pulse { |
|||
0% { |
|||
-moz-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-moz-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-moz-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0% { |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
/* Horizontal */ |
|||
@-webkit-keyframes horizontalFlip { |
|||
0% { |
|||
-webkit-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes horizontalFlip { |
|||
0% { |
|||
-moz-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes horizontalFlip { |
|||
0% { |
|||
-o-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes horizontalFlip { |
|||
0% { |
|||
transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
/* Horizontal */ |
|||
@-webkit-keyframes horizontalFlipOut { |
|||
0% { |
|||
-webkit-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes horizontalFlipOut { |
|||
0% { |
|||
-moz-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes horizontalFlipOut { |
|||
0% { |
|||
-o-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes horizontalFlipOut { |
|||
0% { |
|||
transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* Vertical */ |
|||
@-webkit-keyframes verticalFlip { |
|||
0% { |
|||
-webkit-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes verticalFlip { |
|||
0% { |
|||
-moz-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes verticalFlip { |
|||
0% { |
|||
-o-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes verticalFlip { |
|||
0% { |
|||
transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
/* Fade */ |
|||
@-webkit-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* Fade Up */ |
|||
@-webkit-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
} |
|||
@-moz-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: translateY(0); |
|||
} |
|||
} |
|||
@-o-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* Fade Down */ |
|||
@-webkit-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
} |
|||
@-moz-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: translateY(0); |
|||
} |
|||
} |
|||
@-o-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
/* Scale */ |
|||
@-webkit-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: scale(1); |
|||
} |
|||
} |
|||
@-moz-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: scale(1); |
|||
} |
|||
} |
|||
@-o-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: scale(1); |
|||
} |
|||
} |
|||
@keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
/* |
|||
* # Semantic Video |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: July 30, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Video |
|||
*******************************/ |
|||
|
|||
.ui.video { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* Placeholder Image */ |
|||
.ui.video .placeholder { |
|||
background-color: #333333; |
|||
} |
|||
|
|||
/* Play Icon Overlay */ |
|||
.ui.video .play { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 10; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
|||
filter: alpha(opacity=60); |
|||
opacity: 0.6; |
|||
|
|||
-webkit-transition: opacity 0.3s; |
|||
-moz-transition: opacity 0.3s; |
|||
-o-transition: opacity 0.3s; |
|||
-ms-transition: opacity 0.3s; |
|||
transition: opacity 0.3s; |
|||
} |
|||
.ui.video .play.icon:before { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 11; |
|||
|
|||
font-size: 6rem; |
|||
margin: -3rem 0em 0em -3rem; |
|||
color: #FFFFFF; |
|||
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
.ui.video .placeholder { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* IFrame Embed */ |
|||
.ui.video .embed { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.video .play:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.video.active .play, |
|||
.ui.video.active .placeholder { |
|||
display: none; |
|||
} |
|||
.ui.video.active .embed { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,221 @@ |
|||
/* |
|||
* # Semantic Comment View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Comments |
|||
---------------*/ |
|||
|
|||
.ui.comments { |
|||
|
|||
|
|||
} |
|||
.ui.comments a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Comment |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment { |
|||
position: relative; |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
} |
|||
.ui.comments .comment:first-child { |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Avatar (Optional) |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .avatar { |
|||
display: block; |
|||
float: left; |
|||
width: 4em; |
|||
} |
|||
.ui.comments .comment .avatar img { |
|||
display: block; |
|||
margin: 0em auto; |
|||
|
|||
width: 3em; |
|||
height: 3em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment > .content, |
|||
.ui.comments .comment > .avatar { |
|||
display: block; |
|||
} |
|||
.ui.comments .comment .avatar ~ .content { |
|||
padding: 0em 1em; |
|||
} |
|||
|
|||
/* If there is an avatar move content over */ |
|||
.ui.comments .comment > .avatar ~ .content { |
|||
padding-top: 0.25em; |
|||
margin-left: 3.5em; |
|||
} |
|||
|
|||
.ui.comments .comment .metadata { |
|||
display: inline-block; |
|||
margin-left: 0.3em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.comments .comment .metadata > * { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Comment Text |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .text { |
|||
margin: 0.25em 0em 0.5em; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/*-------------------- |
|||
User Actions |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .actions { |
|||
font-size: 0.9em; |
|||
} |
|||
.ui.comments .comment .actions a { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.comments .comment .actions a.active, |
|||
.ui.comments .comment .actions a:hover { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Reply Form |
|||
---------------------*/ |
|||
|
|||
.ui.comments .reply.form { |
|||
margin-top: 0.75em; |
|||
width: 100%; |
|||
max-width: 30em; |
|||
} |
|||
.ui.comments .comment .reply.form { |
|||
margin-left: 2em; |
|||
} |
|||
.ui.comments > .reply.form { |
|||
margin-top: 1.5em; |
|||
max-width: 40em; |
|||
} |
|||
.ui.comments .reply.form textarea { |
|||
height: 12em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Nested Comments |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .comments { |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
padding-bottom: 1em; |
|||
} |
|||
.ui.comments .comment .comments:before{ |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
} |
|||
/* One Deep */ |
|||
.ui.comments > .comment .comments { |
|||
margin-left: 2em; |
|||
|
|||
} |
|||
/* Two Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.75em; |
|||
} |
|||
/* Three Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.5em; |
|||
} |
|||
/* Four Deep or more */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Threaded |
|||
---------------------*/ |
|||
|
|||
.ui.threaded.comments .comment .comments { |
|||
margin-left: 2em !important; |
|||
padding-left: 2em !important; |
|||
|
|||
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Minimal |
|||
---------------------*/ |
|||
|
|||
.ui.minimal.comments .comment .actions { |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.1s ease-out; |
|||
-moz-transition: opacity 0.1s ease-out; |
|||
-o-transition: opacity 0.1s ease-out; |
|||
-ms-transition: opacity 0.1s ease-out; |
|||
transition: opacity 0.1s ease-out; |
|||
|
|||
-webkit-transition-delay: 0.1s; |
|||
-moz-transition-delay: 0.1s; |
|||
-o-transition-delay: 0.1s; |
|||
-ms-transition-delay: 0.1s; |
|||
transition-delay: 0.1s; |
|||
} |
|||
.ui.minimal.comments .comment > .content:hover > .actions { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
.ui.small.comments { |
|||
font-size: 0.875em; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
/* |
|||
* # Activity Feed View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 22, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Activity Feed |
|||
*******************************/ |
|||
|
|||
.ui.feed { |
|||
|
|||
} |
|||
|
|||
.ui.feed a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.feed, |
|||
.ui.feed .event, |
|||
.ui.feed .label, |
|||
.ui.feed .content, |
|||
.ui.feed .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* Event */ |
|||
.ui.feed .event { |
|||
width: 100%; |
|||
display: table; |
|||
padding: 1em; |
|||
} |
|||
.ui.feed .event:first-child { |
|||
border-top: 0px; |
|||
} |
|||
.ui.feed .event:last-child { |
|||
margin-bottom: 1em; |
|||
} |
|||
|
|||
/* Event Label */ |
|||
.ui.feed .label { |
|||
width: 3em; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
} |
|||
.ui.feed .label .icon { |
|||
font-size: 1.5em; |
|||
margin: 0em; |
|||
} |
|||
.ui.feed .label img { |
|||
width: 3em; |
|||
margin: 0em; |
|||
border-radius: 50em; |
|||
} |
|||
.ui.feed .label + .content { |
|||
padding: 0.75em 1em 0em; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.feed .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/* Date */ |
|||
.ui.feed .content .date { |
|||
float: right; |
|||
padding-left: 1em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/* Summary */ |
|||
.ui.feed .content .summary { |
|||
color: rgba(0, 0, 0, 0.75); |
|||
} |
|||
.ui.feed .content .summary img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 4em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/* Additional Information */ |
|||
.ui.feed .content .extra { |
|||
margin: 1em 0em 0em; |
|||
padding: 0.5em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.feed .content .extra.images { |
|||
|
|||
} |
|||
.ui.feed .content .extra.images img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 6em; |
|||
} |
|||
|
|||
.ui.feed .content .extra.text { |
|||
padding: 0.5em 1em; |
|||
border-left: 0.2em solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.feed { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.small.feed .label img { |
|||
width: 2.5em; |
|||
} |
|||
.ui.small.feed .label .icon { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.feed .event { |
|||
padding: 0.75em 0em; |
|||
} |
|||
.ui.small.feed .label + .content { |
|||
padding: 0.5em 0.5em 0; |
|||
} |
|||
.ui.small.feed .content .extra.images img { |
|||
width: 5em; |
|||
} |
|||
.ui.small.feed .content .extra { |
|||
margin: 0.5em 0em 0em; |
|||
} |
|||
.ui.small.feed .content .extra.text { |
|||
padding: 0.25em 0.5em; |
|||
} |
|||
@ -0,0 +1,641 @@ |
|||
/* |
|||
* # Semantic Item View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.items { |
|||
margin: 1em 0em 0em; |
|||
} |
|||
.ui.items:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.items:last-child { |
|||
margin-bottom: -1em; |
|||
} |
|||
|
|||
/* Force Clearing */ |
|||
.ui.items:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.items > .row > .item, |
|||
.ui.items > .item { |
|||
display: block; |
|||
float: left; |
|||
position: relative; |
|||
top: 0px; |
|||
|
|||
width: 316px; |
|||
min-height: 375px; |
|||
margin: 0em 0.5em 2.5em; |
|||
padding: 0em; |
|||
|
|||
background-color: #FFFFFF; |
|||
line-height: 1.2; |
|||
font-size: 1em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-border-radius: 0.33em; |
|||
-webkit-border-radius: 0.33em; |
|||
border-radius: 0.33em; |
|||
|
|||
-webkit-transition: all 0.2s ease; |
|||
-moz-transition: all 0.2s ease; |
|||
-o-transition: all 0.2s ease; |
|||
-ms-transition: all 0.2s ease; |
|||
transition: all 0.2s ease; |
|||
|
|||
padding: 0.5em; |
|||
} |
|||
|
|||
.ui.items a.item, |
|||
.ui.items .item a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.items .item, |
|||
.ui.items .item > .image, |
|||
.ui.items .item > .image .overlay, |
|||
.ui.items .item > .content, |
|||
.ui.items .item > .content > .meta, |
|||
.ui.items .item > .content > .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.items .item > .image { |
|||
display: block; |
|||
position: relative; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.items .item > .image > img { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 0.22em; |
|||
-moz-border-radius: 0.22em; |
|||
border-radius: 0.22em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
.ui.items .item > .content { |
|||
padding: 0.75em 0.5em; |
|||
} |
|||
.ui.items .item > .content > .name { |
|||
display: block; |
|||
|
|||
font-size: 1.25em; |
|||
font-weight: bold; |
|||
margin-bottom: 0.2em; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.items .item > .content > .description { |
|||
clear: both; |
|||
margin: 0em 0em; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
.ui.items .item > .content > .description p { |
|||
margin: 0em 0em 0.2em; |
|||
} |
|||
.ui.items .item > .content > .description p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.items .item .meta { |
|||
float: right; |
|||
color: rgba(0, 0, 0, 0.35); |
|||
} |
|||
.ui.items .item > .content > .meta + .name { |
|||
float: left; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
/*-----star----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .star.label:hover::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/* active */ |
|||
.ui.items .item .star.label.active::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/*-----like----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .like.label:hover::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label:hover .icon { |
|||
color: #EF404A |
|||
} |
|||
/* active */ |
|||
.ui.items .item .like.label.active::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active .icon { |
|||
color: #EF404A |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Extra |
|||
---------------*/ |
|||
|
|||
.ui.items .item .extra { |
|||
position: absolute; |
|||
width: 100%; |
|||
padding: 0em 0.5em; |
|||
bottom: -2em; |
|||
left: 0em; |
|||
height: 1.5em; |
|||
color: rgba(0, 0, 0, 0.25); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.items .item .extra > img { |
|||
display: inline-block; |
|||
border-radius: 500px 500px 500px 500px; |
|||
margin-right: 0.25em; |
|||
vertical-align: middle; |
|||
width: 2em; |
|||
} |
|||
.ui.items .item .extra .left { |
|||
float: left; |
|||
} |
|||
.ui.items .item .extra .right { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.items .item:hover { |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
|
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.items .item:hover .extra { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.items .item:nth-of-type(n+1):hover { |
|||
border-bottom-color: #6ECFF5 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+2):hover { |
|||
border-bottom-color: #5C6166 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+3):hover { |
|||
border-bottom-color: #A1CF64 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+4):hover { |
|||
border-bottom-color: #D95C5C !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+5):hover { |
|||
border-bottom-color: #564F8A !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+6):hover { |
|||
border-bottom-color: #00B5AD !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Connected |
|||
---------------*/ |
|||
|
|||
.ui.connected.items { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0em !important; |
|||
margin-right: 0em !important; |
|||
} |
|||
.ui.connected.items > .row > .item, |
|||
.ui.connected.items > .item { |
|||
float: none; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
height: auto; |
|||
border-radius: 0px; |
|||
margin: 0em; |
|||
width: 33.33%; |
|||
} |
|||
.ui.connected.items > .row { |
|||
display: table; |
|||
margin: 0.5em 0em; |
|||
} |
|||
.ui.connected.items > .row:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* Borders */ |
|||
.ui.connected.items > .item, |
|||
.ui.connected.items > .row:last-child > .item { |
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:first-child, |
|||
.ui.connected.items > .item:first-child { |
|||
border-radius: 0em 0em 0em 0.33em; |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:last-child, |
|||
.ui.connected.items > .item:last-child { |
|||
border-radius: 0em 0em 0.33em 0em; |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.connected.items .item:hover { |
|||
border-bottom-width: 0.2em; |
|||
} |
|||
|
|||
|
|||
/* Item Count */ |
|||
.ui.one.connected.items > .row > .item, |
|||
.ui.one.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 2%; |
|||
padding-right: 2%; |
|||
} |
|||
.ui.two.connected.items > .row > .item, |
|||
.ui.two.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.three.connected.items > .row > .item, |
|||
.ui.three.connected.items > .item { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.four.connected.items > .row > .item, |
|||
.ui.four.connected.items > .item { |
|||
width: 25%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.five.connected.items > .row > .item, |
|||
.ui.five.connected.items > .item { |
|||
width: 20%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.six.connected.items > .row > .item, |
|||
.ui.six.connected.items > .item { |
|||
width: 16.66%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.seven.connected.items > .row > .item, |
|||
.ui.seven.connected.items > .item { |
|||
width: 14.28%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.eight.connected.items > .row > .item, |
|||
.ui.eight.connected.items > .item { |
|||
width: 12.5%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.nine.connected.items > .row > .item, |
|||
.ui.nine.connected.items > .item { |
|||
width: 11.11%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.ten.connected.items > .row > .item, |
|||
.ui.ten.connected.items > .item { |
|||
width: 10%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.eleven.connected.items > .row > .item, |
|||
.ui.eleven.connected.items > .item { |
|||
width: 9.09%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.twelve.connected.items > .row > .item, |
|||
.ui.twelve.connected.items > .item { |
|||
width: 8.3333%; |
|||
padding-left: 0.1%; |
|||
padding-right: 0.1%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 600px) { |
|||
.ui.stackable.items { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.items .item { |
|||
margin: 0em 2em 1em !important; |
|||
display: block !important; |
|||
width: auto !important; |
|||
padding: 0% !important; |
|||
} |
|||
} |
|||
|
|||
/*-------------------- |
|||
Horizontal |
|||
---------------------*/ |
|||
.ui.horizontal.items > .item, |
|||
.ui.items > .horizontal.item { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .image |
|||
.ui.items > .horizontal.item > .image { |
|||
display: table-cell; |
|||
width: 50%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content, |
|||
.ui.items > .horizontal.item > .image + .content { |
|||
width: 50%; |
|||
display: table-cell; |
|||
} |
|||
.ui.horizontal.items > .item > .content, |
|||
.ui.items > .horizontal.item > .content { |
|||
padding: 1% 1.7% 11% 3%; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .meta, |
|||
.ui.items > .horizontal.item > .meta { |
|||
position: absolute; |
|||
padding: 0%; |
|||
bottom: 7%; |
|||
left: 3%; |
|||
width: 94%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content + .meta, |
|||
.ui.items > .horizontal.item > .image + .content + .meta { |
|||
bottom: 7%; |
|||
left: 53%; |
|||
width: 44%; |
|||
} |
|||
|
|||
|
|||
.ui.horizontal.items > .item .avatar, |
|||
.ui.items > .horizontal.item .avatar { |
|||
width: 11.5%; |
|||
} |
|||
|
|||
.ui.items > .item .avatar { |
|||
max-width: 25px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item Count |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.one.items { |
|||
margin-left: -2%; |
|||
margin-right: -2%; |
|||
} |
|||
.ui.one.items > .item { |
|||
width: 100%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
.ui.two.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.items > .item { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.two.items > .item:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.three.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.items > .item { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.three.items > .item:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.four.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.items > .item { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.four.items > .item:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.five.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.items > .item { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.five.items > .item:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.six.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.items > .item { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.six.items > .item:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.seven.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.items > .item { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.items > .item:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eight.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.items > .item { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.items > .item:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.nine.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.items > .item { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.items > .item:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.ten.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.items > .item { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.items > .item:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eleven.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.items > .item { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.items > .item:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.twelve.items { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.items > .item { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.items > .item:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
@ -0,0 +1,508 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
|
|||
ul.ui.list, |
|||
ol.ui.list, |
|||
.ui.list { |
|||
list-style-type: none; |
|||
margin: 1em 0em; |
|||
padding: 0em; |
|||
} |
|||
ul.ui.list ul, |
|||
ol.ui.list ol, |
|||
.ui.list .list { |
|||
margin: 0em; |
|||
padding: 0.5em 0em 0.5em 1em; |
|||
} |
|||
|
|||
ul.ui.list:first-child, |
|||
ol.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
ul.ui.list:last-child, |
|||
ol.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* List Item */ |
|||
ul.ui.list li, |
|||
ol.ui.list li, |
|||
.ui.list .item { |
|||
display: list-item; |
|||
list-style-type: none; |
|||
list-style-position: inside; |
|||
|
|||
padding: 0.3em 0em; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.list .item > .icon { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
.ui.list .item > .icon + .content { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.list .item > img { |
|||
display: inline-block; |
|||
width: 2em; |
|||
margin-right: 0.5em; |
|||
|
|||
vertical-align: middle; |
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.list .item > .content { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
/* Link */ |
|||
.ui.list a { |
|||
cursor: pointer; |
|||
} |
|||
.ui.list a .icon { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.list .header { |
|||
font-weight: bold; |
|||
} |
|||
.ui.list .description { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
/* Floated Content */ |
|||
.ui.list .item > .left.floated { |
|||
float: left; |
|||
} |
|||
.ui.list .item > .right.floated { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.list { |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
} |
|||
.ui.horizontal.list .item { |
|||
display: inline-block; |
|||
margin-left: 1em; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
.ui.horizontal.list .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.link.list a { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.link.list a:hover { |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.link.list a:active { |
|||
color: rgba(0, 0, 0, 0.9); |
|||
} |
|||
.ui.link.list .active { |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
/*------------------- |
|||
Selection |
|||
--------------------*/ |
|||
|
|||
.ui.selection.list .item { |
|||
cursor: pointer; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
padding: 0.5em; |
|||
|
|||
-webkit-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-moz-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-o-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-ms-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
} |
|||
.ui.selection.list .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list:not(.horizontal, .ordered) .item:hover { |
|||
padding-left: 1em; |
|||
} |
|||
.ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { |
|||
padding-left: 0.5em; |
|||
} |
|||
|
|||
.ui.selection.list .item:active { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list .item.active { |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
|
|||
ul.ui.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1em; |
|||
} |
|||
ul.ui.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
left: -1em; |
|||
content: '•'; |
|||
|
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
ul.ui.list ul, |
|||
.ui.bulleted.list .list { |
|||
padding-left: 1.2em; |
|||
} |
|||
|
|||
/* Horizontal Bulleted */ |
|||
ul.ui.horizontal.bulleted.list, |
|||
.ui.horizontal.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li, |
|||
.ui.horizontal.bulleted.list .item { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:before, |
|||
.ui.horizontal.bulleted.list .item:before { |
|||
left: -0.9em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child, |
|||
.ui.horizontal.bulleted.list .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child::before, |
|||
.ui.horizontal.bulleted.list .item:first-child::before { |
|||
display: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordered |
|||
--------------------*/ |
|||
|
|||
ol.ui.list, |
|||
.ui.ordered.list { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
list-style-type: none; |
|||
} |
|||
ol.ui.list li, |
|||
.ui.ordered.list .item { |
|||
list-style-type: none; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
left: -2em; |
|||
|
|||
counter-increment: ordered; |
|||
content: counters(ordered, "."); |
|||
|
|||
text-align: right; |
|||
vertical-align: top; |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
ol.ui.list ol, |
|||
.ui.ordered.list .list { |
|||
counter-reset: ordered; |
|||
padding-left: 3em; |
|||
} |
|||
|
|||
ol.ui.list ol li:before, |
|||
.ui.ordered.list .list .item:before { |
|||
left: -2.5em; |
|||
} |
|||
|
|||
/* Horizontal Ordered */ |
|||
ol.ui.horizontal.list, |
|||
.ui.ordered.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.horizontal.list li:before, |
|||
.ui.ordered.horizontal.list .item:before { |
|||
position: static; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
|
|||
.ui.divided.list > .item, |
|||
.ui.divided.list > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.divided.list .item .menu .item { |
|||
border-width: 0px; |
|||
} |
|||
.ui.divided.list .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.divided.list .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.divided.list .list .item { |
|||
padding-left: 1em; |
|||
padding-right: 1em; |
|||
} |
|||
.ui.divided.list .list .item:first-child { |
|||
border-top-width: 1px; |
|||
} |
|||
|
|||
/* Divided bulleted */ |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Divided ordered */ |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.ordered.list > .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.divided.ordered.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.divided.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
|
|||
/* Divided horizontal */ |
|||
.ui.divided.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.horizontal.list .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6; |
|||
} |
|||
.ui.horizontal.divided.list .item:first-child { |
|||
border-left: none; |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
|
|||
.ui.celled.list > .item, |
|||
.ui.celled.list > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.celled.list > .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.celled.list .item .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.celled.list .item .list .item { |
|||
border-width: 0px; |
|||
} |
|||
.ui.celled.list .list .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Celled Bulleted */ |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.bulleted.list > .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.celled.bulleted.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Celled Ordered */ |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.celled.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
/* Celled Horizontal */ |
|||
.ui.horizontal.celled.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.horizontal.celled.list .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6; |
|||
} |
|||
.ui.horizontal.celled.list .item:last-child { |
|||
border-bottom: none; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.mini.list .item { |
|||
font-size: 0.8125rem; |
|||
} |
|||
.ui.tiny.list .item { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.small.list .item { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.large.list .item { |
|||
font-size: 1.125rem; |
|||
} |
|||
.ui.big.list .item { |
|||
font-size: 1.25rem; |
|||
} |
|||
.ui.huge.list .item { |
|||
font-size: 1.375rem; |
|||
} |
|||
.ui.massive.list .item { |
|||
font-size: 1.5rem; |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
/* |
|||
* # Statistic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Aug 20, 2013 |
|||
*/ |
|||
/******************************* |
|||
Statistic |
|||
*******************************/ |
|||
.ui.statistic { |
|||
text-align: center; |
|||
} |
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
.ui.statistic > .number { |
|||
font-size: 4em; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.statistic > .description { |
|||
opacity: 0.8; |
|||
} |
|||
@ -1 +1 @@ |
|||
a202f18a1902f23596a8105dc4e148e7a0de32fd |
|||
55d6eb893b1dca66b6860e0eda6366514f7ea5a4 |
|||
@ -0,0 +1,79 @@ |
|||
/* |
|||
* # Semantic Breadcrumb |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Breadcrumb |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb { |
|||
margin: 1em 0em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.breadcrumb:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.breadcrumb:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .divider { |
|||
display: inline-block; |
|||
opacity: 0.5; |
|||
margin: 0em 0.15em 0em; |
|||
|
|||
font-size: 1em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.ui.breadcrumb a.section { |
|||
cursor: pointer; |
|||
} |
|||
.ui.breadcrumb .section { |
|||
display: inline-block; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/* Loose Coupling */ |
|||
.ui.breadcrumb.segment { |
|||
display: inline-block; |
|||
padding: 0.5em 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .active.section { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.breadcrumb { |
|||
font-size: 0.75em; |
|||
} |
|||
.ui.large.breadcrumb { |
|||
font-size: 1.1em; |
|||
} |
|||
.ui.huge.breadcrumb { |
|||
font-size: 1.3em; |
|||
} |
|||
@ -0,0 +1,536 @@ |
|||
/* |
|||
* # Semantic Form |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 22 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Form |
|||
---------------------*/ |
|||
|
|||
.ui.form { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
.ui.form :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.form :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Content |
|||
---------------------*/ |
|||
|
|||
.ui.form > p { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field |
|||
---------------------*/ |
|||
|
|||
.ui.form .field { |
|||
clear: both; |
|||
margin: 0em 0em 1em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labels |
|||
---------------------*/ |
|||
|
|||
.ui.form .field > label { |
|||
margin: 0em 0em 0.3em; |
|||
display: block; |
|||
|
|||
color: #555555; |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Standard Inputs |
|||
---------------------*/ |
|||
|
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="text"], |
|||
.ui.form input[type="date"], |
|||
.ui.form input[type="password"], |
|||
.ui.form .ui.input { |
|||
width: 100%; |
|||
} |
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="text"], |
|||
.ui.form input[type="date"], |
|||
.ui.form input[type="password"] { |
|||
|
|||
margin: 0em; |
|||
padding: 0.85em 1.2em; |
|||
font-size: 0.875em; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
outline: none; |
|||
|
|||
|
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-o-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
|||
|
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.textarea, |
|||
.ui.form textarea { |
|||
line-height: 1.33; |
|||
min-height: 8em; |
|||
height: 12em; |
|||
max-height: 24em; |
|||
resize: vertical; |
|||
} |
|||
.ui.form select { |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.ui.form textarea, |
|||
.ui.form input[type="checkbox"] { |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Dividers |
|||
---------------------*/ |
|||
|
|||
.ui.form .divider { |
|||
clear: both; |
|||
margin: 1em 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Types of Messages |
|||
---------------------*/ |
|||
|
|||
.ui.form .info.message, |
|||
.ui.form .warning.message, |
|||
.ui.form .error.message { |
|||
display: none; |
|||
} |
|||
|
|||
/* Assumptions */ |
|||
.ui.form .message:first-child { |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Validation Prompt |
|||
---------------------*/ |
|||
|
|||
.ui.form .field .prompt.label { |
|||
white-space: nowrap; |
|||
} |
|||
.ui.form .inline.field .prompt { |
|||
margin-top: 0em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.form .inline.field .prompt:before { |
|||
margin-top: -0.3em; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.form input[type="text"]:focus, |
|||
.ui.form input[type="password"]:focus, |
|||
.ui.form textarea:focus { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
border-color: rgba(0, 0, 0, 0.2); |
|||
border-bottom-left-radius: 0; |
|||
border-top-left-radius: 0; |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.warning .warning.message { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Warning |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.error .error.message { |
|||
display: block; |
|||
} |
|||
|
|||
/* On Field(s) */ |
|||
.ui.form .fields.error .field label, |
|||
.ui.form .field.error label { |
|||
color: #D95C5C; |
|||
} |
|||
.ui.form .fields.error .field textarea, |
|||
.ui.form .fields.error .field input[type="text"], |
|||
.ui.form .fields.error .field input[type="date"], |
|||
.ui.form .fields.error .field input[type="password"], |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="text"], |
|||
.ui.form .field.error input[type="date"], |
|||
.ui.form .field.error input[type="password"] { |
|||
background-color: #FFFAFA; |
|||
border-color: #E7BEBE; |
|||
border-left: none; |
|||
|
|||
color: #D95C5C; |
|||
padding-left: 1.2em; |
|||
|
|||
border-bottom-left-radius: 0; |
|||
border-top-left-radius: 0; |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
|||
|
|||
} |
|||
.ui.form .field.error textarea:focus, |
|||
.ui.form .field.error input[type="text"]:focus, |
|||
.ui.form .field.error input[type="password"]:focus { |
|||
border-color: rgba(255, 80, 80, 1); |
|||
color: rgba(255, 80, 80, 1); |
|||
|
|||
-webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
-moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Empty (Placeholder) |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.form ::-webkit-input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.form ::-moz-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.form :focus::-webkit-input-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
.ui.form :focus::-moz-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.form .error ::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.form .error ::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.form .error :focus::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
.ui.form .error :focus::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Disabled |
|||
---------------------*/ |
|||
|
|||
.ui.form .field :disabled, |
|||
.ui.form .field.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled label { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled :disabled { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Loading State |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.loading { |
|||
position: relative; |
|||
} |
|||
.ui.form.loading:after { |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
content: ''; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; |
|||
visibility: visible; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Fluid Width |
|||
---------------------*/ |
|||
|
|||
.ui.form.fluid { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/*-------------------------- |
|||
Input w/ attached Button |
|||
---------------------------*/ |
|||
|
|||
.ui.form input.attached { |
|||
width: auto; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Date Input |
|||
---------------------*/ |
|||
|
|||
.ui.form .date.field > label { |
|||
position: relative; |
|||
} |
|||
.ui.form .date.field > label:after { |
|||
position: absolute; |
|||
top: 1.4em; |
|||
right: 0.5em; |
|||
|
|||
font-family: 'Icons'; |
|||
content: '📅'; /* '\1f4c5' */ |
|||
font-size: 1.5em; |
|||
font-weight: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inverted Colors |
|||
---------------------*/ |
|||
.ui.inverted.form label { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.form .field.error textarea, |
|||
.ui.inverted.form .field.error input[type="text"] { |
|||
background-color: #FFCCCC; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field Groups |
|||
---------------------*/ |
|||
|
|||
/* Grouped Vertically */ |
|||
.ui.form .grouped.fields { |
|||
margin: 0em 0em 1em; |
|||
} |
|||
.ui.form .grouped.fields .field { |
|||
display: block; |
|||
float: none; |
|||
margin: 0.5em 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Fields |
|||
---------------------*/ |
|||
|
|||
/* Split fields */ |
|||
.ui.form .fields { |
|||
clear: both; |
|||
} |
|||
.ui.form .fields:after { |
|||
content: ' '; |
|||
display: block; |
|||
clear: both; |
|||
visibility: hidden; |
|||
line-height: 0; |
|||
height: 0; |
|||
} |
|||
.ui.form .fields .field { |
|||
clear: none; |
|||
float: left; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.form .fields .field:first-child { |
|||
border-left: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Other Combinations */ |
|||
.ui.form .two.fields .field { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
.ui.form .three.fields .field { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .four.fields .field { |
|||
width: 25%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .five.fields .field { |
|||
width: 20%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
/* override sides, ie8 no last-child */ |
|||
.ui.form .fields .field:first-child { |
|||
padding-left: 0%; |
|||
} |
|||
.ui.form .fields .field:last-child { |
|||
padding-right: 0%; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inline Fields |
|||
---------------------*/ |
|||
|
|||
.ui.form .inline.fields .field { |
|||
min-height: 1.3em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui.form .inline.fields .field > label, |
|||
.ui.form .inline.fields .field > p, |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.fields .field > select, |
|||
.ui.form .inline.field > label, |
|||
.ui.form .inline.field > p, |
|||
.ui.form .inline.field > input, |
|||
.ui.form .inline.field > select { |
|||
|
|||
display: inline-block; |
|||
width: auto; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
vertical-align: middle; |
|||
font-size: 1em; |
|||
} |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.field > input { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
.ui.form .inline.fields .field > :first-child, |
|||
.ui.form .inline.field > :first-child { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
.ui.form .inline.fields .field > :only-child, |
|||
.ui.form .inline.field > :only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.small.form { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.small.form textarea, |
|||
.ui.small.form input[type="text"], |
|||
.ui.small.form input[type="password"], |
|||
.ui.small.form label { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.form { |
|||
font-size: 1.125em; |
|||
} |
|||
|
|||
@ -0,0 +1,655 @@ |
|||
/* |
|||
* # Semantic Grid |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 6 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Grid |
|||
*******************************/ |
|||
|
|||
.ui.grid { |
|||
display: block; |
|||
text-align: left; |
|||
|
|||
font-size: 0em; |
|||
margin: 0% -1.5%; |
|||
padding: 0%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.grid:after, |
|||
.ui.row:after { |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*------------------- |
|||
Columns |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .column, |
|||
.ui.grid > .row > .column { |
|||
|
|||
display: inline-block; |
|||
text-align: left; |
|||
font-size: 1rem; |
|||
|
|||
padding-left: 1.5%; |
|||
padding-right: 1.5%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*------------------- |
|||
Rows |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .row { |
|||
display: block; |
|||
width: 100% !important; |
|||
margin-top: 1.5%; |
|||
padding: 1.5% 0% 0%; |
|||
font-size: 0rem; |
|||
} |
|||
.ui.grid > .row:first-child { |
|||
padding-top: 0rem; |
|||
margin-top: 0rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .row > img, |
|||
.ui.grid > .row > .column > img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.ui.grid .column > .ui.segment:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Page |
|||
--------------------*/ |
|||
|
|||
.ui.page.grid { |
|||
margin: 0%; |
|||
padding: 0% 2%; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
.ui.responsive.grid { |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
min-width: 320px; |
|||
} |
|||
|
|||
@media only screen and (max-width : 1000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 5.55%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 8%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1500px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 13%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1750px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 18%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
@media only screen and (min-width : 2000px) { |
|||
.ui.responsive.grid { |
|||
padding: 0% 23%; |
|||
} |
|||
.ui.responsive.grid > .column, |
|||
.ui.responsive.grid > .row > .column { |
|||
} |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Width |
|||
--------------------*/ |
|||
|
|||
/* Sizing Combinations */ |
|||
.ui.grid .one.wide.column { |
|||
width: 6.25%; |
|||
} |
|||
.ui.grid .two.wide.column { |
|||
width: 12.5%; |
|||
} |
|||
.ui.grid .three.wide.column { |
|||
width: 18.75%; |
|||
} |
|||
.ui.grid .four.wide.column { |
|||
width: 25%; |
|||
} |
|||
.ui.grid .five.wide.column { |
|||
width: 31.25%; |
|||
} |
|||
.ui.grid .six.wide.column { |
|||
width: 37.5%; |
|||
} |
|||
.ui.grid .seven.wide.column { |
|||
width: 43.75%; |
|||
} |
|||
.ui.grid .eight.wide.column { |
|||
width: 50%; |
|||
} |
|||
.ui.grid .nine.wide.column { |
|||
width: 56.25%; |
|||
} |
|||
.ui.grid .ten.wide.column { |
|||
width: 62.5%; |
|||
} |
|||
.ui.grid .eleven.wide.column { |
|||
width: 68.75%; |
|||
} |
|||
.ui.grid .twelve.wide.column { |
|||
width: 75%; |
|||
} |
|||
.ui.grid .thirteen.wide.column { |
|||
width: 81.25%; |
|||
} |
|||
.ui.grid .fourteen.wide.column { |
|||
width: 87.5%; |
|||
} |
|||
.ui.grid .fifteen.wide.column { |
|||
width: 93.75%; |
|||
} |
|||
.ui.grid .sixteen.wide.column { |
|||
width: 100%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Count |
|||
--------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.grid > .column, |
|||
.ui.grid > .row > .column { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.one.column.grid > .row > .column, |
|||
.ui.one.column.grid > .column, |
|||
.ui.grid > .one.column.row > .column { |
|||
width: 100%; |
|||
} |
|||
.ui.two.column.grid > .row > .column, |
|||
.ui.two.column.grid > .column, |
|||
.ui.grid > .two.column.row > .column { |
|||
width: 50%; |
|||
} |
|||
.ui.three.column.grid > .row > .column, |
|||
.ui.three.column.grid > .column, |
|||
.ui.grid > .three.column.row > .column { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.four.column.grid > .row > .column, |
|||
.ui.four.column.grid > .column, |
|||
.ui.grid > .four.column.row > .column { |
|||
width: 25%; |
|||
} |
|||
.ui.five.column.grid > .row > .column, |
|||
.ui.five.column.grid > .column, |
|||
.ui.grid > .five.column.row > .column { |
|||
width: 20%; |
|||
} |
|||
.ui.six.column.grid > .row > .column, |
|||
.ui.six.column.grid > .column, |
|||
.ui.grid > .six.column.row > .column { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.seven.column.grid > .row > .column, |
|||
.ui.seven.column.grid > .column, |
|||
.ui.grid > .seven.column.row > .column { |
|||
width: 14.2857%; |
|||
} |
|||
.ui.eight.column.grid > .row > .column, |
|||
.ui.eight.column.grid > .column, |
|||
.ui.grid > .eight.column.row > .column { |
|||
width: 12.5%; |
|||
} |
|||
.ui.nine.column.grid > .row > .column, |
|||
.ui.nine.column.grid > .column, |
|||
.ui.grid > .nine.column.row > .column { |
|||
width: 11.1111%; |
|||
} |
|||
.ui.ten.column.grid > .row > .column, |
|||
.ui.ten.column.grid > .column, |
|||
.ui.grid > .ten.column.row > .column { |
|||
width: 10%; |
|||
} |
|||
.ui.eleven.column.grid > .row > .column, |
|||
.ui.eleven.column.grid > .column, |
|||
.ui.grid > .eleven.column.row > .column { |
|||
width: 9.0909%; |
|||
} |
|||
.ui.twelve.column.grid > .row > .column, |
|||
.ui.twelve.column.grid > .column, |
|||
.ui.grid > .twelve.column.row > .column { |
|||
width: 8.3333%; |
|||
} |
|||
.ui.thirteen.column.grid > .row > .column, |
|||
.ui.thirteen.column.grid > .column, |
|||
.ui.grid > .thirteen.column.row > .column { |
|||
width: 7.6923%; |
|||
} |
|||
.ui.fourteen.column.grid > .row > .column, |
|||
.ui.fourteen.column.grid > .column, |
|||
.ui.grid > .fourteen.column.row > .column { |
|||
width: 7.1428%; |
|||
} |
|||
.ui.fifteen.column.grid > .row > .column, |
|||
.ui.fifteen.column.grid > .column, |
|||
.ui.grid > .fifteen.column.row > .column { |
|||
width: 6.6666%; |
|||
} |
|||
.ui.sixteen.column.grid > .row > .column, |
|||
.ui.sixteen.column.grid > .column, |
|||
.ui.grid > .sixteen.column.row > .column { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.grid > .column:only-child, |
|||
.ui.grid > .row > .column:only-child { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
"Floated" |
|||
-----------------------*/ |
|||
|
|||
.ui.grid .left.floated.column { |
|||
float: left; |
|||
} |
|||
.ui.grid .right.floated.column { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Divided |
|||
-----------------------*/ |
|||
|
|||
.ui.divided.grid, |
|||
.ui.divided.grid > .row { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
} |
|||
.ui.divided.grid > .column:not(.row), |
|||
.ui.divided.grid > .row > .column { |
|||
display: table-cell; |
|||
-webkit-box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
-moz-box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
box-shadow: |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
|||
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
|||
; |
|||
} |
|||
.ui.divided.grid > .column.row { |
|||
display: table; |
|||
} |
|||
.ui.divided.grid > .column:first-child, |
|||
.ui.divided.grid > .row > .column:first-child { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Vertically Divided */ |
|||
.ui.vertically.divided.grid > .row { |
|||
-webkit-box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
-moz-box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
box-shadow: |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
|||
; |
|||
} |
|||
.ui.vertically.divided.grid > .row > .column, |
|||
.ui.vertically.divided.grid > .column:not(.row), |
|||
.ui.vertically.divided.grid > .row:first-child { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Celled |
|||
-----------------------*/ |
|||
|
|||
.ui.celled.grid { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
-webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
-moz-box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
box-shadow: 0px 0px 0px 1px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .row, |
|||
.ui.celled.grid > .column.row, |
|||
.ui.celled.grid > .column.row:first-child { |
|||
display: table; |
|||
width: 100%; |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
-webkit-box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
-moz-box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
box-shadow: 0px -1px 0px 0px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .column:not(.row), |
|||
.ui.celled.grid > .row > .column { |
|||
display: table-cell; |
|||
padding: 0.75em; |
|||
-webkit-box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
-moz-box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
box-shadow: -1px 0px 0px 0px #DFDFDF; |
|||
} |
|||
.ui.celled.grid > .column:first-child, |
|||
.ui.celled.grid > .row > .column:first-child { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.ui.celled.responsive.grid { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Horizontally Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.left.aligned.grid, |
|||
.ui.left.aligned.grid > .row > .column, |
|||
.ui.left.aligned.grid > .column, |
|||
.ui.grid .left.aligned.column, |
|||
.ui.grid > .left.aligned.row > .column { |
|||
text-align: left; |
|||
} |
|||
.ui.center.aligned.grid, |
|||
.ui.center.aligned.grid > .row > .column, |
|||
.ui.center.aligned.grid > .column, |
|||
.ui.grid .center.aligned.column, |
|||
.ui.grid > .center.aligned.row > .column { |
|||
text-align: center; |
|||
} |
|||
.ui.right.aligned.grid, |
|||
.ui.right.aligned.grid > .row > .column, |
|||
.ui.right.aligned.grid > .column, |
|||
.ui.grid .right.aligned.column, |
|||
.ui.grid > .right.aligned.row > .column { |
|||
text-align: right; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Vertically Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.top.aligned.grid, |
|||
.ui.top.aligned.grid > .row > .column, |
|||
.ui.top.aligned.grid > .column, |
|||
.ui.grid .top.aligned.column, |
|||
.ui.grid > .top.aligned.row > .column { |
|||
vertical-align: top; |
|||
} |
|||
.ui.middle.aligned.grid, |
|||
.ui.middle.aligned.grid > .row > .column, |
|||
.ui.middle.aligned.grid > .column, |
|||
.ui.grid .middle.aligned.column, |
|||
.ui.grid > .middle.aligned.row > .column { |
|||
vertical-align: middle; |
|||
} |
|||
.ui.bottom.aligned.grid, |
|||
.ui.bottom.aligned.grid > .row > .column, |
|||
.ui.bottom.aligned.grid > .column, |
|||
.ui.grid .bottom.aligned.column, |
|||
.ui.grid > .bottom.aligned.row > .column { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Equal Height Columns |
|||
-----------------------*/ |
|||
|
|||
.ui.grid > .equal.height.row { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.grid > .equal.height.row > .column { |
|||
display: table-cell; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Only (Device) |
|||
-----------------------*/ |
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width : 768px) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.mobile.only.grid, |
|||
.ui.celled.mobile.only.grid, |
|||
.ui.divided.mobile.only.grid .row, |
|||
.ui.celled.mobile.only.grid .row, |
|||
.ui.divided.grid .mobile.only.row, |
|||
.ui.celled.grid .mobile.only.row, |
|||
.ui.grid .mobile.only.equal.height.row, |
|||
.ui.mobile.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .mobile.only.column, |
|||
.ui.celled.grid > .row > .mobile.only.column, |
|||
.ui.divided.mobile.only.grid > .row > .column, |
|||
.ui.celled.mobile.only.grid > .row > .column, |
|||
.ui.divided.mobile.only.grid > .column, |
|||
.ui.celled.mobile.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 768px) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row, |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Tablet Only */ |
|||
@media only screen and (min-width : 768px) and (max-width : 998px) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.tablet.only.grid, |
|||
.ui.celled.tablet.only.grid, |
|||
.ui.divided.tablet.only.grid .row, |
|||
.ui.celled.tablet.only.grid .row, |
|||
.ui.divided.grid .tablet.only.row, |
|||
.ui.celled.grid .tablet.only.row, |
|||
.ui.grid .tablet.only.equal.height.row, |
|||
.ui.tablet.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .tablet.only.column, |
|||
.ui.celled.grid > .row > .tablet.only.column, |
|||
.ui.divided.tablet.only.grid > .row > .column, |
|||
.ui.celled.tablet.only.grid > .row > .column, |
|||
.ui.divided.tablet.only.grid > .column, |
|||
.ui.celled.tablet.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : 768px), (min-width: 998px) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row, |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Computer Only */ |
|||
@media only screen and (min-width : 998px) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.computer.only.grid, |
|||
.ui.celled.computer.only.grid, |
|||
.ui.divided.computer.only.grid .row, |
|||
.ui.celled.computer.only.grid .row, |
|||
.ui.divided.grid .computer.only.row, |
|||
.ui.celled.grid .computer.only.row, |
|||
.ui.grid .computer.only.equal.height.row, |
|||
.ui.computer.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .computer.only.column, |
|||
.ui.celled.grid > .row > .computer.only.column, |
|||
.ui.divided.computer.only.grid > .row > .column, |
|||
.ui.celled.computer.only.grid > .row > .column, |
|||
.ui.divided.computer.only.grid > .column, |
|||
.ui.celled.computer.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : 998px) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row, |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Padded |
|||
--------------------*/ |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Stackable |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 768px) { |
|||
.ui.stackable.grid { |
|||
display: block !important; |
|||
padding: 0em; |
|||
} |
|||
.ui.stackable.grid .row > .column, |
|||
.ui.stackable.grid > .column { |
|||
display: block !important; |
|||
width: auto !important; |
|||
|
|||
margin: 1.5em 5% 0em !important; |
|||
padding: 1.5em 0em 0em !important; |
|||
|
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
} |
|||
.ui.stackable.divided.grid .column, |
|||
.ui.stackable.celled.grid .column { |
|||
border-top: 1px dotted rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.stackable.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.grid > .column:first-child { |
|||
margin-top: 0em !important; |
|||
padding-top: 0em !important; |
|||
} |
|||
.ui.stackable.divided.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.celled.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.divided.grid > .column:first-child, |
|||
.ui.stackable.celled.grid > .column:first-child { |
|||
border-top: none !important; |
|||
} |
|||
|
|||
/* Remove pointers from vertical menus */ |
|||
.ui.stackable.grid .vertical.pointing.menu .item:after { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,337 @@ |
|||
/* |
|||
* # Semantic Text Block - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 29 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Text Block |
|||
*******************************/ |
|||
|
|||
.ui.message { |
|||
position: relative; |
|||
min-height: 18px; |
|||
margin: 1em 0em; |
|||
|
|||
height: auto; |
|||
background-color: #EFEFEF; |
|||
padding: 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
-moz-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
} |
|||
|
|||
.ui.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* block with headers */ |
|||
.ui.message .header { |
|||
margin: 0em; |
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* block with paragraphs */ |
|||
.ui.message p { |
|||
opacity: 0.85; |
|||
margin: 0.3em 0em; |
|||
} |
|||
.ui.message > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* block with child list */ |
|||
.ui.message ul.list { |
|||
opacity: 0.85; |
|||
list-style-position: inside; |
|||
margin: 0.2em 0em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li { |
|||
position: relative; |
|||
list-style-type: none; |
|||
margin: 0em 0em 0em 1em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li:before { |
|||
position: absolute; |
|||
content: '\2022'; |
|||
top: -0.05em; |
|||
left: -0.8em; |
|||
|
|||
height: 100%; |
|||
vertical-align: baseline; |
|||
opacity: 0.5; |
|||
} |
|||
.ui.message ul.list li:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* dismissable block */ |
|||
.ui.message > .icon.close { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 1em; |
|||
right: 0.5em; |
|||
opacity: 0.7; |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
transition: |
|||
opacity 0.1s linear |
|||
; |
|||
} |
|||
.ui.message > .icon.close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.message.visible, |
|||
.ui.header.visible { |
|||
display: block !important; |
|||
} |
|||
.ui.message.hidden, |
|||
.ui.header.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Compact |
|||
---------------*/ |
|||
|
|||
.ui.compact.message { |
|||
display: inline-block; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
.ui.attached.message { |
|||
margin-left: -1px; |
|||
margin-right: -1px; |
|||
margin-bottom: -1px; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0em 0em; |
|||
-moz-border-radius: 0.325em 0.325em 0em 0em; |
|||
border-radius: 0.325em 0.325em 0em 0em; |
|||
|
|||
-webkit-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.bottom.attached.message { |
|||
margin-top: -1px; |
|||
|
|||
-webkit-border-radius: 0em 0em 0.325em 0.325em; |
|||
-moz-border-radius: 0em 0em 0.325em 0.325em; |
|||
border-radius: 0em 0em 0.325em 0.325em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.icon.message { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.icon.message > .icon { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
font-size: 3.8em; |
|||
padding-right: 0.4em; |
|||
opacity: 0.2; |
|||
} |
|||
.ui.icon.message > .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.message { |
|||
background-color: rgba(255, 255, 255, 0.05); |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.message { |
|||
-webkit-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.message { |
|||
background-color: #333333; |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Types |
|||
---------------*/ |
|||
.ui.blue.message, |
|||
.ui.info.message { |
|||
background-color: #E6F4F9; |
|||
color: #4D8796; |
|||
} |
|||
|
|||
/* Green Text Block */ |
|||
.ui.green.message { |
|||
background-color: #DEFCD5; |
|||
color: #52A954; |
|||
} |
|||
|
|||
/* Yellow Text Block */ |
|||
.ui.yellow.message, |
|||
.ui.warning.message { |
|||
background-color: #F6F3D5; |
|||
color: #96904D; |
|||
} |
|||
/* Red Text Block */ |
|||
.ui.red.message { |
|||
background-color: #F1D7D7; |
|||
|
|||
color: #A95252; |
|||
} |
|||
|
|||
/* Success Text Block */ |
|||
.ui.success.message, |
|||
.ui.positive.message { |
|||
background-color: #5BBD72; |
|||
color: #FFFFFF; |
|||
} |
|||
/* Error Text Block */ |
|||
.ui.error.message, |
|||
.ui.negative.message { |
|||
background-color: #D95C5C; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.message { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.message { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.message { |
|||
font-size: 1.125em; |
|||
} |
|||
.ui.huge.message { |
|||
font-size: 1.5em; |
|||
} |
|||
.ui.massive.message { |
|||
font-size: 2em; |
|||
} |
|||
@ -0,0 +1,526 @@ |
|||
/* |
|||
* # Semantic Table |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 24 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Table |
|||
*******************************/ |
|||
|
|||
/* Prototype */ |
|||
.ui.table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
/* Table Content */ |
|||
.ui.table th, |
|||
.ui.table tr, |
|||
.ui.table td { |
|||
border-collapse: collapse; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: all 0.1s ease-out; |
|||
-moz-transition: all 0.1s ease-out; |
|||
-o-transition: all 0.1s ease-out; |
|||
-ms-transition: all 0.1s ease-out; |
|||
transition: all 0.1s ease-out; |
|||
} |
|||
|
|||
/* Headers */ |
|||
.ui.table thead { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table th { |
|||
cursor: auto; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.03); |
|||
|
|||
text-align: left; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
padding: 0.5em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.table thead th:first-child { |
|||
border-radius: 5px 0px 0px 0px; |
|||
} |
|||
.ui.table thead th:last-child { |
|||
border-radius: 0px 5px 0px 0px; |
|||
} |
|||
.ui.table tfoot th:first-child { |
|||
border-radius: 0px 0px 0px 5px; |
|||
} |
|||
.ui.table tfoot th:last-child { |
|||
border-radius: 0px 0px 5px 0px; |
|||
} |
|||
|
|||
/* Table Cells */ |
|||
.ui.table td { |
|||
padding: 0.40em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* Footer */ |
|||
.ui.table tfoot { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table tfoot th { |
|||
font-weight: normal; |
|||
font-style: italic; |
|||
} |
|||
|
|||
/* Table Striping */ |
|||
.ui.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(0, 0, 50, 0.02); |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.table > .icon { |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.table > .icon:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* Table Segment */ |
|||
.ui.table.segment:after { |
|||
display: none; |
|||
} |
|||
.ui.table.segment.stacked:after { |
|||
display: block; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
/* Sortable */ |
|||
.ui.sortable.table thead th:hover { |
|||
background-image: none; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.sortable.table th.disabled:hover { |
|||
cursor: auto; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
|
|||
text-align: left; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Positive |
|||
---------------*/ |
|||
|
|||
.ui.table tr.positive, |
|||
.ui.table td.positive { |
|||
-webkit-box-shadow: 2px 0px 0px #119000 inset; |
|||
-moz-box-shadow: 2px 0px 0px #119000 inset; |
|||
box-shadow: 2px 0px 0px #119000 inset; |
|||
} |
|||
.ui.table tr.positive td, |
|||
.ui.table td.positive { |
|||
background-color: #F2F8F0 !important; |
|||
color: #119000 !important; |
|||
} |
|||
.ui.celled.table tr.positive:hover td, |
|||
.ui.celled.table tr:hover td.positive, |
|||
.ui.table tr.positive:hover td, |
|||
.ui.table td:hover.positive, |
|||
.ui.table th:hover.positive { |
|||
background-color: #ECF5E9 !important; |
|||
color: #119000 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Negative |
|||
---------------*/ |
|||
|
|||
.ui.table tr.negative, |
|||
.ui.table td.negative { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.negative td, |
|||
.ui.table td.negative { |
|||
background-color: #F9F4F4; |
|||
color: #CD2929 !important; |
|||
} |
|||
.ui.celled.table tr.negative:hover td, |
|||
.ui.celled.table tr:hover td.negative, |
|||
.ui.table tr.negative:hover td, |
|||
.ui.table td:hover.negative, |
|||
.ui.table th:hover.negative { |
|||
background-color: #F2E8E8 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Error |
|||
---------------*/ |
|||
|
|||
.ui.table tr.error, |
|||
.ui.table td.error { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.error td, |
|||
.ui.table td.error, |
|||
.ui.table th.error { |
|||
background-color: #F9F4F4 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
.ui.celled.table tr.error:hover td, |
|||
.ui.celled.table tr:hover td.error, |
|||
.ui.table tr.error:hover td, |
|||
.ui.table td:hover.error, |
|||
.ui.table th:hover.error { |
|||
background-color: #F2E8E8 !important; |
|||
color: #CD2929 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Warning |
|||
---------------*/ |
|||
|
|||
.ui.table tr.warning, |
|||
.ui.table td.warning { |
|||
-webkit-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
-moz-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
} |
|||
.ui.table tr.warning td, |
|||
.ui.table td.warning, |
|||
.ui.table th.warning { |
|||
background-color: #FBF6E9; |
|||
color: #7D6C00 !important; |
|||
} |
|||
.ui.celled.table tr.warning:hover td, |
|||
.ui.celled.table tr:hover td.warning, |
|||
.ui.table tr.warning:hover td, |
|||
.ui.table td:hover.warning, |
|||
.ui.table th:hover.warning { |
|||
background-color: #F3EDDC !important; |
|||
color: #7D6C00 !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.table tr.active, |
|||
.ui.table td.active { |
|||
-webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
-moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
} |
|||
|
|||
.ui.table tr.active td, |
|||
.ui.table tr td.active { |
|||
background-color: #E0E0E0 !important; |
|||
color: rgba(50, 50, 50, 0.9); |
|||
/* border-color: rgba(0, 0, 0, 0.15) !important; */ |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.table tr.disabled td, |
|||
.ui.table tr td.disabled, |
|||
.ui.table tr.disabled:hover td, |
|||
.ui.table tr:hover td.disabled { |
|||
color: rgba(150, 150, 150, 0.3); |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Column Count |
|||
---------------*/ |
|||
|
|||
.ui.two.column.table td { |
|||
width: 50%; |
|||
} |
|||
.ui.three.column.table td { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.four.column.table td { |
|||
width: 25%; |
|||
} |
|||
.ui.five.column.table td { |
|||
width: 20%; |
|||
} |
|||
.ui.six.column.table td { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.seven.column.table td { |
|||
width: 14.2857%; |
|||
} |
|||
.ui.eight.column.table td { |
|||
width: 12.5%; |
|||
} |
|||
.ui.nine.column.table td { |
|||
width: 11.1111%; |
|||
} |
|||
.ui.ten.column.table td { |
|||
width: 10%; |
|||
} |
|||
.ui.eleven.column.table td { |
|||
width: 9.0909%; |
|||
} |
|||
.ui.twelve.column.table td { |
|||
width: 8.3333%; |
|||
} |
|||
.ui.thirteen.column.table td { |
|||
width: 7.6923%; |
|||
} |
|||
.ui.fourteen.column.table td { |
|||
width: 7.1428%; |
|||
} |
|||
.ui.fifteen.column.table td { |
|||
width: 6.6666%; |
|||
} |
|||
.ui.sixteen.column.table td { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Column Width */ |
|||
.ui.table th.one.wide, |
|||
.ui.table td.one.wide { |
|||
width: 6.25%; |
|||
} |
|||
.ui.table th.two.wide, |
|||
.ui.table td.two.wide { |
|||
width: 12.5%; |
|||
} |
|||
.ui.table th.three.wide, |
|||
.ui.table td.three.wide { |
|||
width: 18.75%; |
|||
} |
|||
.ui.table th.four.wide, |
|||
.ui.table td.four.wide { |
|||
width: 25%; |
|||
} |
|||
.ui.table th.five.wide, |
|||
.ui.table td.five.wide { |
|||
width: 31.25%; |
|||
} |
|||
.ui.table th.six.wide, |
|||
.ui.table td.six.wide { |
|||
width: 37.5%; |
|||
} |
|||
.ui.table th.seven.wide, |
|||
.ui.table td.seven.wide { |
|||
width: 43.75%; |
|||
} |
|||
.ui.table th.eight.wide, |
|||
.ui.table td.eight.wide { |
|||
width: 50%; |
|||
} |
|||
.ui.table th.nine.wide, |
|||
.ui.table td.nine.wide { |
|||
width: 56.25%; |
|||
} |
|||
.ui.table th.ten.wide, |
|||
.ui.table td.ten.wide { |
|||
width: 62.5%; |
|||
} |
|||
.ui.table th.eleven.wide, |
|||
.ui.table td.eleven.wide { |
|||
width: 68.75%; |
|||
} |
|||
.ui.table th.twelve.wide, |
|||
.ui.table td.twelve.wide { |
|||
width: 75%; |
|||
} |
|||
.ui.table th.thirteen.wide, |
|||
.ui.table td.thirteen.wide { |
|||
width: 81.25%; |
|||
} |
|||
.ui.table th.fourteen.wide, |
|||
.ui.table td.fourteen.wide { |
|||
width: 87.5%; |
|||
} |
|||
.ui.table th.fifteen.wide, |
|||
.ui.table td.fifteen.wide { |
|||
width: 93.75%; |
|||
} |
|||
.ui.table th.sixteen.wide, |
|||
.ui.table td.sixteen.wide { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Celled |
|||
---------------*/ |
|||
|
|||
.ui.celled.table { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.celled.table tbody tr, |
|||
.ui.celled.table tfoot tr { |
|||
border: none; |
|||
} |
|||
.ui.celled.table th { |
|||
border: 1px solid #E0E0E0; |
|||
} |
|||
.ui.celled.table tbody td { |
|||
border: 1px solid #E0E0E0; |
|||
} |
|||
.ui.celled.table.segment th { |
|||
border: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sortable |
|||
---------------*/ |
|||
|
|||
.ui.sortable.table thead th { |
|||
cursor: pointer; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.sortable.table thead th.sorted, |
|||
.ui.sortable.table thead th.sorted:hover { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.ui.sortable.table thead th:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 1em; |
|||
opacity: 0.8; |
|||
|
|||
margin: 0em 0em 0em 0.5em; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
} |
|||
.ui.sortable.table thead th.ascending:after { |
|||
content: '\25b4'; |
|||
} |
|||
.ui.sortable.table thead th.descending:after { |
|||
content: '\25be'; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
/* Text Color */ |
|||
.ui.inverted.table td { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.inverted.table th { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/* Stripes */ |
|||
.ui.inverted.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(255, 255, 255, 0.06); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Definition |
|||
---------------*/ |
|||
|
|||
.ui.definition.table { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.definition.table tr { |
|||
border-top: 1px solid rgba(0, 0, 0 ,0.1); |
|||
} |
|||
.ui.definition.table td:first-child { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Collapsing |
|||
---------------*/ |
|||
|
|||
.ui.collapsing.table { |
|||
width: auto; |
|||
} |
|||
|
|||
/*-------------- |
|||
Basic |
|||
---------------*/ |
|||
|
|||
.ui.basic.table th { |
|||
background-color: transparent; |
|||
padding: 0.5em; |
|||
} |
|||
.ui.basic.table tbody tr { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.basic.table td { |
|||
padding: 0.8em 0.5em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Padded |
|||
---------------*/ |
|||
|
|||
.ui.padded.table th, |
|||
.ui.padded.table td { |
|||
padding: 0.8em 1em; |
|||
} |
|||
|
|||
.ui.compact.table th { |
|||
padding: 0.3em 0.5em; |
|||
} |
|||
.ui.compact.table td { |
|||
padding: 0.2em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
/* Small */ |
|||
.ui.small.table { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
/* Standard */ |
|||
.ui.table { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.table { |
|||
font-size: 1.1em; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,200 @@ |
|||
/* |
|||
* # Dividers |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Divider |
|||
*******************************/ |
|||
|
|||
.ui.divider { |
|||
margin: 1rem 0rem; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
|||
|
|||
line-height: 1; |
|||
height: 0em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.ui.vertical.divider, |
|||
.ui.horizontal.divider { |
|||
position: absolute; |
|||
|
|||
border: none; |
|||
height: 0em; |
|||
margin: 0em; |
|||
background-color: transparent; |
|||
|
|||
font-size: 0.875rem; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
|
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Vertical |
|||
---------------*/ |
|||
|
|||
.ui.vertical.divider { |
|||
position: absolute; |
|||
z-index: 2; |
|||
top: 50%; |
|||
left: 50%; |
|||
|
|||
margin: 0% 0% 0% -3%; |
|||
|
|||
width: 6%; |
|||
height: 50%; |
|||
|
|||
line-height: 0; |
|||
padding: 0em; |
|||
} |
|||
|
|||
.ui.vertical.divider:before, |
|||
.ui.vertical.divider:after { |
|||
position: absolute; |
|||
left: 50%; |
|||
content: " "; |
|||
z-index: 3; |
|||
|
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-right: 1px solid rgba(255, 255, 255, 0.8); |
|||
|
|||
width: 0%; |
|||
height: 80%; |
|||
} |
|||
|
|||
.ui.vertical.divider:before { |
|||
top: -100%; |
|||
} |
|||
|
|||
.ui.vertical.divider:after { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Horizontal |
|||
---------------*/ |
|||
|
|||
.ui.horizontal.divider { |
|||
position: relative; |
|||
top: 0%; |
|||
left: 0%; |
|||
|
|||
margin: 1rem 1.5rem; |
|||
height: auto; |
|||
padding: 0em; |
|||
|
|||
line-height: 1; |
|||
} |
|||
|
|||
.ui.horizontal.divider:before, |
|||
.ui.horizontal.divider:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
content: " "; |
|||
z-index: 3; |
|||
|
|||
width: 50%; |
|||
top: 50%; |
|||
height: 0%; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.ui.horizontal.divider:before { |
|||
left: 0%; |
|||
margin-left: -1.5rem; |
|||
} |
|||
.ui.horizontal.divider:after { |
|||
left: auto; |
|||
right: 0%; |
|||
margin-right: -1.5rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.divider > .icon { |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.divider.inverted { |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
.ui.vertical.inverted.divider, |
|||
.ui.horizontal.inverted.divider { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.divider.inverted, |
|||
.ui.divider.inverted:after, |
|||
.ui.divider.inverted:before { |
|||
border-top-color: rgba(0, 0, 0, 0.15); |
|||
border-bottom-color: rgba(255, 255, 255, 0.15); |
|||
|
|||
border-left-color: rgba(0, 0, 0, 0.15); |
|||
border-right-color: rgba(255, 255, 255, 0.15); |
|||
} |
|||
|
|||
/*-------------- |
|||
Fitted |
|||
---------------*/ |
|||
|
|||
.ui.fitted.divider { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Clearing |
|||
---------------*/ |
|||
|
|||
.ui.clearing.divider { |
|||
clear: both; |
|||
} |
|||
|
|||
/*-------------- |
|||
Section |
|||
---------------*/ |
|||
|
|||
.ui.section.divider { |
|||
margin-top: 2rem; |
|||
margin-bottom: 2rem; |
|||
} |
|||
@ -0,0 +1,325 @@ |
|||
/* |
|||
* # Semantic Headers - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 29 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Header |
|||
*******************************/ |
|||
|
|||
/* Standard */ |
|||
.ui.header { |
|||
border: none; |
|||
margin: 1em 0em 1rem; |
|||
padding: 0em; |
|||
|
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
line-height: 1.33; |
|||
} |
|||
|
|||
|
|||
.ui.header .sub.header { |
|||
font-size: 1rem; |
|||
font-weight: normal; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
|
|||
line-height: 1.2; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.header .content { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
.ui.header .icon { |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* Positioning */ |
|||
.ui.header:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.header:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.header + p { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Page Heading |
|||
---------------*/ |
|||
|
|||
h1.ui.header { |
|||
min-height: 1rem; |
|||
line-height: 1.33; |
|||
font-size: 2rem; |
|||
} |
|||
h2.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.75rem; |
|||
} |
|||
h3.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.33rem; |
|||
} |
|||
h4.ui.header { |
|||
line-height: 1.33; |
|||
font-size: 1.1rem; |
|||
} |
|||
h5.ui.header { |
|||
line-height: 1.2; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content Heading |
|||
---------------*/ |
|||
|
|||
.ui.huge.header { |
|||
min-height: 1em; |
|||
font-size: 2em; |
|||
} |
|||
.ui.large.header { |
|||
font-size: 1.75em; |
|||
} |
|||
.ui.medium.header { |
|||
font-size: 1.33em; |
|||
} |
|||
.ui.small.header { |
|||
font-size: 1.1em; |
|||
} |
|||
.ui.tiny.header { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.header { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.blue.header { |
|||
color: #6ECFF5 !important; |
|||
} |
|||
.ui.black.header { |
|||
color: #5C6166 !important; |
|||
} |
|||
.ui.green.header { |
|||
color: #A1CF64 !important; |
|||
} |
|||
.ui.red.header { |
|||
color: #D95C5C !important; |
|||
} |
|||
.ui.purple.header { |
|||
color: #564F8A !important; |
|||
} |
|||
.ui.teal.header { |
|||
color: #00B5AD !important; |
|||
} |
|||
|
|||
.ui.blue.dividing.header { |
|||
border-bottom: 3px solid #6ECFF5; |
|||
} |
|||
.ui.black.dividing.header { |
|||
border-bottom: 3px solid #5C6166; |
|||
} |
|||
.ui.green.dividing.header { |
|||
border-bottom: 3px solid #A1CF64; |
|||
} |
|||
.ui.red.dividing.header { |
|||
border-bottom: 3px solid #D95C5C; |
|||
} |
|||
.ui.purple.dividing.header { |
|||
border-bottom: 3px solid #564F8A; |
|||
} |
|||
.ui.teal.dividing.header { |
|||
border-bottom: 3px solid #00B5AD; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.header { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.header .sub.header { |
|||
color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.black.header { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.blue.header { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.green.header { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.red.header { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.purple.header { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.teal.header { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
.ui.inverted.block.header { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.header { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.header { |
|||
text-align: right; |
|||
} |
|||
.ui.center.aligned.header { |
|||
text-align: center; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.header, |
|||
.ui.left.floated.header { |
|||
float: left; |
|||
margin-top: 0em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui.right.floated.header { |
|||
float: right; |
|||
margin-top: 0em; |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.header { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Dividing |
|||
--------------------*/ |
|||
|
|||
.ui.dividing.header { |
|||
padding-bottom: 0.2rem; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.dividing.header .sub.header { |
|||
padding-bottom: 0.5em; |
|||
} |
|||
.ui.dividing.header .icon { |
|||
margin-bottom: 0.2em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Block |
|||
--------------------*/ |
|||
|
|||
.ui.block.header { |
|||
background-color: #F5F5F5; |
|||
padding: 0.5em 1em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.attached.header { |
|||
background-color: #E0E0E0; |
|||
padding: 0.5em 1rem; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.top.attached.header { |
|||
margin-bottom: 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; |
|||
} |
|||
.ui.bottom.attached.header { |
|||
margin-top: 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; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Icon |
|||
--------------------*/ |
|||
|
|||
.ui.icon.header { |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
.ui.icon.header .icon { |
|||
float: none; |
|||
display: block; |
|||
font-size: 3em; |
|||
margin: 0em auto 0.2em; |
|||
} |
|||
.ui.icon.header .circular.icon, |
|||
.ui.icon.header .square.icon { |
|||
font-size: 2em; |
|||
} |
|||
.ui.block.icon.header .icon { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.icon.header.aligned { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,487 @@ |
|||
/* |
|||
* # Semantic Icons - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Icon |
|||
*******************************/ |
|||
|
|||
@font-face { |
|||
font-family: 'Icons'; |
|||
src: url(../fonts/icons.eot); |
|||
src: |
|||
url(../fonts/icons.eot?#iefix) format('embedded-opentype'), |
|||
url(../fonts/icons.woff) format('woff'), |
|||
url(../fonts/icons.ttf) format('truetype'), |
|||
url(../fonts/icons.svg#icons) format('svg') |
|||
; |
|||
|
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-decoration: inherit; |
|||
text-transform: none; |
|||
} |
|||
|
|||
i.icon { |
|||
display: inline-block; |
|||
opacity: 0.75; |
|||
|
|||
margin: 0em 0.25em 0em 0em; |
|||
|
|||
width: 1.23em; |
|||
height: 1em; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
text-align: center; |
|||
|
|||
speak: none; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-font-smoothing: antialiased; |
|||
font-smoothing: antialiased; |
|||
} |
|||
|
|||
/* icons available */ |
|||
i.icon.circle.attention:before { content: '\2757'; } /* '❗' */ |
|||
i.icon.circle.help:before { content: '\e704'; } /* '' */ |
|||
i.icon.circle.info:before { content: '\e705'; } /* '' */ |
|||
i.icon.add:before { content: '\2795'; } /* '➕' */ |
|||
|
|||
i.icon.chart:before { content: '📈'; } /* '\1f4c8' */ |
|||
i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */ |
|||
i.icon.chart.pie:before { content: '\e7a2'; } /* '' */ |
|||
|
|||
i.icon.resize.full:before { content: '\e744'; } /* '' */ |
|||
i.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */ |
|||
i.icon.resize.small:before { content: '\e746'; } /* '' */ |
|||
i.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */ |
|||
|
|||
i.icon.down:before { content: '\2193'; } /* '↓' */ |
|||
i.icon.down.triangle:before { content: '\25be'; } /* '▾' */ |
|||
i.icon.down.arrow:before { content: '\e75c'; } /* '' */ |
|||
|
|||
i.icon.left:before { content: '\2190'; } /* '←' */ |
|||
i.icon.left.triangle:before { content: '\25c2'; } /* '◂' */ |
|||
i.icon.left.arrow:before { content: '\e75d'; } /* '' */ |
|||
|
|||
i.icon.right:before { content: '\2192'; } /* '→' */ |
|||
i.icon.right.triangle:before { content: '\25b8'; } /* '▸' */ |
|||
i.icon.right.arrow:before { content: '\e75e'; } /* '' */ |
|||
|
|||
i.icon.up:before { content: '\2191'; } /* '↑' */ |
|||
i.icon.up.triangle:before { content: '\25b4'; } /* '▴' */ |
|||
i.icon.up.arrow:before { content: '\e75f'; } /* '' */ |
|||
|
|||
i.icon.folder:before { content: '\e810'; } /* '' */ |
|||
i.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */ |
|||
|
|||
i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */ |
|||
i.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */ |
|||
|
|||
i.icon.star:before { content: '\e801'; } /* '' */ |
|||
i.icon.star.empty:before { content: '\e800'; } /* '' */ |
|||
i.icon.star.half:before { content: '\e701'; } /* '' */ |
|||
|
|||
i.icon.lock:before { content: '🔒'; } /* '\1f512' */ |
|||
i.icon.unlock:before { content: '🔓'; } /* '\1f513' */ |
|||
|
|||
i.icon.layout.grid:before { content: '\e80c'; } /* '' */ |
|||
i.icon.layout.block:before { content: '\e708'; } /* '' */ |
|||
i.icon.layout.list:before { content: '\e80b'; } /* '' */ |
|||
|
|||
i.icon.heart.empty:before { content: '\2661'; } /* '♡' */ |
|||
i.icon.heart:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
|
|||
i.icon.asterisk:before { content: '\2731'; } /* '✱' */ |
|||
i.icon.attachment:before { content: '📎'; } /* '\1f4ce' */ |
|||
i.icon.attention:before { content: '\26a0'; } /* '⚠' */ |
|||
i.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */ |
|||
i.icon.barcode:before { content: '\e792'; } /* '' */ |
|||
i.icon.cart:before { content: '\e813'; } /* '' */ |
|||
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */ |
|||
i.icon.book:before { content: '\f4d6'; } |
|||
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */ |
|||
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */ |
|||
i.icon.cancel:before { content: '\2716'; } /* '✖' */ |
|||
i.icon.close:before { content: '\e80d'; } /* '' */ |
|||
i.icon.color:before { content: '\e794'; } /* '' */ |
|||
i.icon.chat:before { content: '\e720'; } /* '' */ |
|||
i.icon.check:before { content: '\2611'; } /* '☑' */ |
|||
i.icon.time:before { content: '🕔'; } /* '\1f554' */ |
|||
i.icon.cloud:before { content: '\2601'; } /* '☁' */ |
|||
i.icon.code:before { content: '\e714'; } /* '' */ |
|||
i.icon.email:before { content: '\40'; } /* '@' */ |
|||
i.icon.settings:before { content: '\26ef'; } /* '⛯' */ |
|||
i.icon.setting:before { content: '\2699'; } /* '⚙' */ |
|||
i.icon.comment:before { content: '\e802'; } /* '' */ |
|||
i.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */ |
|||
i.icon.clockwise:before { content: '\27f3'; } /* '⟳' */ |
|||
i.icon.cube:before { content: '\e807'; } /* '' */ |
|||
i.icon.direction:before { content: '\27a2'; } /* '➢' */ |
|||
i.icon.doc:before { content: '📄'; } /* '\1f4c4' */ |
|||
i.icon.docs:before { content: '\e736'; } /* '' */ |
|||
i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */ |
|||
i.icon.paint:before { content: '\e7b5'; } /* '' */ |
|||
i.icon.edit:before { content: '\270d'; } /* '✍' */ |
|||
i.icon.eject:before { content: '\2ecf'; } /* '⻏' */ |
|||
i.icon.export:before { content: '\e715'; } /* '' */ |
|||
i.icon.hide:before { content: '\e80f'; } /* '' */ |
|||
i.icon.unhide:before { content: '\e70b'; } /* '' */ |
|||
i.icon.facebook:before { content: '\f301'; } /* '' */ |
|||
i.icon.fast-forward:before { content: '\e804'; } /* '' */ |
|||
i.icon.fire:before { content: '🔥'; } /* '\1f525' */ |
|||
i.icon.flag:before { content: '\2691'; } /* '⚑' */ |
|||
i.icon.lightning:before { content: '\26a1'; } /* '⚡' */ |
|||
i.icon.lab:before { content: '\68'; } /* 'h' */ |
|||
i.icon.flight:before { content: '\2708'; } /* '✈' */ |
|||
i.icon.forward:before { content: '\27a6'; } /* '➦' */ |
|||
i.icon.gift:before { content: '🎁'; } /* '\1f381' */ |
|||
i.icon.github:before { content: '\f308'; } /* '' */ |
|||
i.icon.globe:before { content: '\e817'; } /* '' */ |
|||
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */ |
|||
i.icon.question:before { content: '\2753'; } /* '❓' */ |
|||
i.icon.home:before { content: '\2302'; } /* '⌂' */ |
|||
i.icon.i:before { content: '\2139'; } /* 'ℹ' */ |
|||
i.icon.idea:before { content: '💡'; } /* '\1f4a1' */ |
|||
i.icon.open:before { content: '🔗'; } /* '\1f517' */ |
|||
i.icon.content:before { content: '\e782'; } /* '' */ |
|||
i.icon.location:before { content: '\e724'; } /* '' */ |
|||
i.icon.mail:before { content: '\2709'; } /* '✉' */ |
|||
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ |
|||
i.icon.minus:before { content: '\2d'; } /* '-' */ |
|||
i.icon.money:before { content: '💰'; } /* '\1f4b0' */ |
|||
i.icon.off:before { content: '\e78e'; } /* '' */ |
|||
i.icon.pause:before { content: '\e808'; } /* '' */ |
|||
i.icon.photos:before { content: '\e812'; } /* '' */ |
|||
i.icon.photo:before { content: '🌄'; } /* '\1f304' */ |
|||
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ |
|||
i.icon.play:before { content: '\e809'; } /* '' */ |
|||
i.icon.plus:before { content: '\2b'; } /* '+' */ |
|||
i.icon.print:before { content: '\e716'; } /* '' */ |
|||
i.icon.rss:before { content: '\e73a'; } /* '' */ |
|||
i.icon.search:before { content: '🔍'; } /* '\1f50d' */ |
|||
i.icon.shuffle:before { content: '\e803'; } /* '' */ |
|||
i.icon.tag:before { content: '\e80a'; } /* '' */ |
|||
i.icon.tags:before { content: '\e70d'; } /* '' */ |
|||
i.icon.terminal:before { content: '\e7ac'; } /* '' */ |
|||
i.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */ |
|||
i.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */ |
|||
i.icon.to-end:before { content: '\e806'; } /* '' */ |
|||
i.icon.to-start:before { content: '\e805'; } /* '' */ |
|||
i.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */ |
|||
i.icon.trash:before { content: '\e729'; } /* '' */ |
|||
i.icon.twitter:before { content: '\f303'; } /* '' */ |
|||
i.icon.upload:before { content: '\e711'; } /* '' */ |
|||
i.icon.user.add:before { content: '\e700'; } /* '' */ |
|||
i.icon.user:before { content: '👤'; } /* '\1f464' */ |
|||
i.icon.community:before { content: '\e814'; } /* '' */ |
|||
i.icon.users:before { content: '👥'; } /* '\1f465' */ |
|||
i.icon.id:before { content: '\e722'; } /* '' */ |
|||
i.icon.url:before { content: '🔗'; } /* '\1f517' */ |
|||
i.icon.zoom.in:before { content: '\e750'; } /* '' */ |
|||
i.icon.zoom.out:before { content: '\e751'; } /* '' */ |
|||
|
|||
/*-------------- |
|||
Spacing Fix |
|||
---------------*/ |
|||
|
|||
/* dropdown arrows are to the right */ |
|||
i.dropdown.icon { |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/* stars are usually consecutive */ |
|||
i.icon.star { |
|||
width: auto; |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* left side icons */ |
|||
i.icon.left, |
|||
i.icon.left, |
|||
i.icon.left { |
|||
width: auto; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
/* right side icons */ |
|||
i.icon.search, |
|||
i.icon.up, |
|||
i.icon.down, |
|||
i.icon.right { |
|||
width: auto; |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Aliases |
|||
---------------*/ |
|||
|
|||
/* aliases for convenience */ |
|||
i.icon.delete:before { content: '\e80d'; } /* '' */ |
|||
i.icon.dropdown:before { content: '\25be'; } /* '▾' */ |
|||
|
|||
i.icon.help:before { content: '\e704'; } /* '' */ |
|||
i.icon.info:before { content: '\e705'; } /* '' */ |
|||
i.icon.error:before { content: '\e80d'; } /* '' */ |
|||
|
|||
i.icon.dislike:before { content: '\2661'; } /* '♡' */ |
|||
i.icon.like:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
i.icon.eye:before { content: '\e80f'; } /* '' */ |
|||
i.icon.eye.hidden:before { content: '\e70b'; } /* '' */ |
|||
i.icon.date:before { content: '📅'; } /* '\1f4c5' */ |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
i.icon.hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.emphasized.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.disabled { |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
i.link.icon { |
|||
cursor: pointer; |
|||
opacity: 0.7; |
|||
-webkit-transition: opacity 0.3s ease-out; |
|||
-moz-transition: opacity 0.3s ease-out; |
|||
-o-transition: opacity 0.3s ease-out; |
|||
-ms-transition: opacity 0.3s ease-out; |
|||
transition: opacity 0.3s ease-out; |
|||
} |
|||
.link.icon:hover { |
|||
opacity: 1 !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
i.circular.icon { |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
|
|||
padding: 0.5em 0.35em !important; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
line-height: 1 !important; |
|||
width: 2em !important; |
|||
height: 2em !important; |
|||
} |
|||
i.circular.icon:before { |
|||
vertical-align: middle; |
|||
} |
|||
i.circular.inverted.icon { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Flipped |
|||
--------------------*/ |
|||
|
|||
i.vertically.flipped.icon { |
|||
-webkit-transform: scale(1, -1); |
|||
-moz-transform: scale(1, -1); |
|||
-o-transform: scale(1, -1); |
|||
-ms-transform: scale(1, -1); |
|||
transform: scale(1, -1); |
|||
} |
|||
i.horizontally.flipped.icon { |
|||
-webkit-transform: scale(-1, 1); |
|||
-moz-transform: scale(-1, 1); |
|||
-o-transform: scale(-1, 1); |
|||
-ms-transform: scale(-1, 1); |
|||
transform: scale(-1, 1); |
|||
} |
|||
|
|||
/*------------------- |
|||
Rotated |
|||
--------------------*/ |
|||
|
|||
i.left.rotated.icon { |
|||
-webkit-transform: rotate(-90deg); |
|||
-moz-transform: rotate(-90deg); |
|||
-o-transform: rotate(-90deg); |
|||
-ms-transform: rotate(-90deg); |
|||
transform: rotate(-90deg); |
|||
} |
|||
i.right.rotated.icon { |
|||
-webkit-transform: rotate(90deg); |
|||
-moz-transform: rotate(90deg); |
|||
-o-transform: rotate(90deg); |
|||
-ms-transform: rotate(90deg); |
|||
transform: rotate(90deg); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Square |
|||
--------------------*/ |
|||
|
|||
i.square.icon { |
|||
width: 2em; |
|||
height: 2em; |
|||
padding: 0.5em 0.35em !important; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
vertical-align: baseline; |
|||
} |
|||
i.square.icon:before { |
|||
vertical-align: middle; |
|||
} |
|||
i.square.inverted.icon { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
i.inverted.icon { |
|||
background-color: #222222; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
i.blue.icon { |
|||
color: #6ECFF5 !important; |
|||
} |
|||
i.black.icon { |
|||
color: #5C6166 !important; |
|||
} |
|||
i.green.icon { |
|||
color: #A1CF64 !important; |
|||
} |
|||
i.red.icon { |
|||
color: #D95C5C !important; |
|||
} |
|||
i.purple.icon { |
|||
color: #564F8A !important; |
|||
} |
|||
i.teal.icon { |
|||
color: #00B5AD !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
i.inverted.black.icon { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.blue.icon { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.green.icon { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.red.icon { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.purple.icon { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.inverted.teal.icon { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
i.small.icon { |
|||
font-size: 0.875em; |
|||
} |
|||
i.icon { |
|||
font-size: 1em; |
|||
} |
|||
i.large.icon { |
|||
font-size: 2em; |
|||
margin-right: 0.5em; |
|||
vertical-align: middle; |
|||
} |
|||
i.huge.icon { |
|||
font-size: 4em; |
|||
margin-right: 0.75em; |
|||
vertical-align: middle; |
|||
} |
|||
i.massive.icon { |
|||
font-size: 8em; |
|||
margin-right: 1em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sketchy Sizing |
|||
---------------*/ |
|||
|
|||
i.sketchy.circular.icon, |
|||
i.sketchy.square.icon { |
|||
padding: 0.35em !important; |
|||
} |
|||
@ -0,0 +1,170 @@ |
|||
/* |
|||
* # Semantic Image |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Image |
|||
*******************************/ |
|||
|
|||
.ui.image { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
} |
|||
img.ui.image { |
|||
display: block; |
|||
background: none; |
|||
} |
|||
.ui.image img { |
|||
display: block; |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
.ui.disabled.image { |
|||
cursor: default; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Rounded |
|||
---------------*/ |
|||
|
|||
.ui.rounded.images .image, |
|||
.ui.rounded.images img, |
|||
.ui.rounded.image img, |
|||
.ui.rounded.image { |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Circular |
|||
---------------*/ |
|||
|
|||
.ui.circular.images .image, |
|||
.ui.circular.images img, |
|||
.ui.circular.image img, |
|||
.ui.circular.image { |
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Avatar |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.avatar.images .image, |
|||
.ui.avatar.images img, |
|||
.ui.avatar.image img, |
|||
.ui.avatar.image { |
|||
margin-right: 0.5em; |
|||
|
|||
display: inline-block; |
|||
width: 2em; |
|||
height: 2em; |
|||
|
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.image, |
|||
.ui.floated.images { |
|||
float: left; |
|||
margin-right: 1em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.right.floated.images, |
|||
.ui.right.floated.image { |
|||
float: right; |
|||
margin-bottom: 1em; |
|||
margin-left: 1em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.tiny.images .image, |
|||
.ui.tiny.images img, |
|||
.ui.tiny.image { |
|||
width: 20px; |
|||
font-size: 0.7rem; |
|||
} |
|||
.ui.mini.images .image, |
|||
.ui.mini.images img, |
|||
.ui.mini.image { |
|||
width: 35px; |
|||
font-size: 0.8rem; |
|||
} |
|||
.ui.small.images .image, |
|||
.ui.small.images img, |
|||
.ui.small.image { |
|||
width: 80px; |
|||
font-size: 0.9rem; |
|||
} |
|||
.ui.medium.images .image, |
|||
.ui.medium.images img, |
|||
.ui.medium.image { |
|||
width: 300px; |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.images .image, |
|||
.ui.large.images img, |
|||
.ui.large.image { |
|||
width: 450px; |
|||
font-size: 1.1rem; |
|||
} |
|||
.ui.huge.images .image, |
|||
.ui.huge.images img, |
|||
.ui.huge.image { |
|||
width: 600px; |
|||
font-size: 1.2rem; |
|||
} |
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.images { |
|||
font-size: 0em; |
|||
margin: 0em -0.25rem 0rem; |
|||
} |
|||
|
|||
.ui.images .image, |
|||
.ui.images img { |
|||
display: inline-block; |
|||
margin: 0em 0.25em 0.5em; |
|||
} |
|||
@ -0,0 +1,287 @@ |
|||
/* |
|||
* # Semantic Input |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 29 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Inputs |
|||
---------------------*/ |
|||
|
|||
.ui.input { |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
.ui.input input { |
|||
width: 100%; |
|||
font-family: "Helvetica Neue", "Helvetica", Arial; |
|||
|
|||
margin: 0em; |
|||
padding: 0.85em 1.2em; |
|||
font-size: 0.875em; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
outline: none; |
|||
|
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-o-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
transition: |
|||
background-color 0.3s ease-out, |
|||
box-shadow 0.2s ease, |
|||
border-color 0.2s ease |
|||
; |
|||
|
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Placeholder |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.input::-web inputkit-input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
.ui.input::-moz input-placeholder { |
|||
color: #E0E0E0; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Active |
|||
---------------------*/ |
|||
|
|||
.ui.input input:active, |
|||
.ui.input.down input { |
|||
border-color: rgba(0, 0, 0, 0.3); |
|||
background-color: #FAFAFA; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.loading.input .icon { |
|||
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
|||
} |
|||
.ui.loading.input .icon:before, |
|||
.ui.loading.input .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.input.focus input, |
|||
.ui.input input:focus { |
|||
border-color: rgba(0, 0, 0, 0.2); |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
.ui.input.focus input input::-webkit-input-placeholder, |
|||
.ui.input input:focus input::-webkit-input-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
.ui.input.focus input input::-moz-placeholder, |
|||
.ui.input input:focus input::-moz-placeholder { |
|||
color: #AAAAAA; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
.ui.input.error input { |
|||
background-color: #FFFAFA; |
|||
border-color: #E7BEBE; |
|||
color: #D95C5C; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.input.error input ::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.input.error input ::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.4); |
|||
} |
|||
.ui.input.error input :focus::-webkit-input-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
.ui.input.error input :focus::-moz-placeholder { |
|||
color: rgba(255, 80, 80, 0.7); |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Transparent |
|||
---------------------*/ |
|||
|
|||
.ui.transparent.input input { |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Icon |
|||
---------------------*/ |
|||
|
|||
.ui.icon.input > .icon { |
|||
position: absolute; |
|||
opacity: 0.5; |
|||
top: 1px; |
|||
right: 1px; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 2.5em; |
|||
height: 2.5em; |
|||
padding-top: 0.75em; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-border-radius: 0.2em 0em 0em 0.2em; |
|||
-moz-border-radius: 0.2em 0em 0em 0.2em; |
|||
border-radius: 0.2em 0em 0em 0.2em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: opacity 0.3s ease-out; |
|||
-moz-transition: opacity 0.3s ease-out; |
|||
-o-transition: opacity 0.3s ease-out; |
|||
-ms-transition: opacity 0.3s ease-out; |
|||
transition: opacity 0.3s ease-out; |
|||
} |
|||
.ui.icon.input input { |
|||
padding-right: 3em !important; |
|||
} |
|||
|
|||
.ui.left.icon.input .icon { |
|||
right: auto; |
|||
left: 1px; |
|||
} |
|||
.ui.left.icon.input input { |
|||
padding-left: 3em !important; |
|||
padding-right: 1.2em !important; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.icon.input input:focus ~ .icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labeled |
|||
---------------------*/ |
|||
|
|||
.ui.labeled.input .corner.label { |
|||
top: 1px; |
|||
right: 1px; |
|||
|
|||
font-size: 0.7em; |
|||
|
|||
-webkit-border-top-right-radius: 0.3125em; |
|||
-moz-border-top-right-radius: 0.3125em; |
|||
border-top-right-radius: 0.3125em; |
|||
} |
|||
.ui.labeled.input input { |
|||
padding-right: 2.5em !important; |
|||
} |
|||
|
|||
/* Spacing with corner label */ |
|||
.ui.labeled.icon.input:not(.left) input { |
|||
padding-right: 3.25em !important; |
|||
} |
|||
.ui.labeled.icon.input:not(.left) .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Action |
|||
---------------------*/ |
|||
|
|||
.ui.action.input { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.action.input > input { |
|||
display: table-cell; |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-right: none; |
|||
} |
|||
.ui.action.input > .button { |
|||
display: table-cell; |
|||
opacity: 0.9; |
|||
|
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ui.action.input > input:focus ~ .button { |
|||
opacity: 1; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
|||
} |
|||
@ -0,0 +1,824 @@ |
|||
/* |
|||
* # Semantic Label - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Label |
|||
*******************************/ |
|||
|
|||
.ui.label { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
|
|||
margin: -0.25em 0.25em 0em; |
|||
|
|||
background-color: #E8E8E8; |
|||
border-color: #E8E8E8; |
|||
|
|||
padding: 0.5em 0.8em; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
|
|||
text-transform: uppercase; |
|||
font-weight: normal; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
.ui.label:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.label:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
|
|||
/* Link */ |
|||
a.ui.label { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Detail */ |
|||
.ui.label .detail { |
|||
display: inline-block; |
|||
margin-left: 0.5em; |
|||
font-weight: bold; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.label .icon { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Removable label */ |
|||
.ui.label .delete.icon { |
|||
cursor: pointer; |
|||
margin: 0em 0em 0em 0.5em; |
|||
opacity: 0.7; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
.ui.label .delete.icon:hover { |
|||
opacity: 0.99; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.image.label { |
|||
width: auto !important; |
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
padding-top: 0.4em; |
|||
padding-bottom: 0.4em; |
|||
|
|||
line-height: 1.5em; |
|||
vertical-align: baseline; |
|||
text-transform: none; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
.ui.image.label img { |
|||
display: inline-block; |
|||
height: 2.5em; |
|||
margin: -0.4em 0.8em -0.4em -0.8em; |
|||
vertical-align: top; |
|||
|
|||
-moz-border-radius: 0.325em 0em 0em 0.325em; |
|||
-webkit-border-radius: 0.325em 0em 0em 0.325em; |
|||
border-radius: 0.325em 0em 0em 0.325em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Disabled |
|||
--------------------*/ |
|||
|
|||
.ui.label.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
a.ui.labels .label:hover, |
|||
a.ui.label:hover { |
|||
background-color: #E0E0E0; |
|||
border-color: #E0E0E0; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.labels a.label:hover:before, |
|||
a.ui.label:hover:before { |
|||
background-color: #E0E0E0; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
/*------------------- |
|||
Visible |
|||
--------------------*/ |
|||
|
|||
.ui.labels.visible .label, |
|||
.ui.label.visible { |
|||
display: inline-block !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Hidden |
|||
--------------------*/ |
|||
|
|||
.ui.labels.hidden .label, |
|||
.ui.label.hidden { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Tag |
|||
--------------------*/ |
|||
|
|||
.ui.tag.labels .label, |
|||
.ui.tag.label { |
|||
margin-left: 1em; |
|||
position: relative; |
|||
padding: 0.33em 1.3em 0.33em 1.4em; |
|||
|
|||
-webkit-border-radius: 0px 3px 3px 0px; |
|||
-moz-border-radius: 0px 3px 3px 0px; |
|||
border-radius: 0px 3px 3px 0px; |
|||
} |
|||
.ui.tag.labels .label:before, |
|||
.ui.tag.label:before { |
|||
position: absolute; |
|||
top: 0.3em; |
|||
left: 0.3em; |
|||
content: ''; |
|||
|
|||
margin-left: -1em; |
|||
background-image: none; |
|||
|
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
|
|||
.ui.tag.labels .label:after, |
|||
.ui.tag.label:after { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 50%; |
|||
left: -0.25em; |
|||
|
|||
margin-top: -0.3em; |
|||
background-color: #FFFFFF; |
|||
width: 0.55em; |
|||
height: 0.55em; |
|||
|
|||
-webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
-moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
|||
|
|||
-moz-border-radius: 100px 100px 100px 100px; |
|||
-webkit-border-radius: 100px 100px 100px 100px; |
|||
border-radius: 100px 100px 100px 100px; |
|||
} |
|||
/*------------------- |
|||
Ribbon |
|||
--------------------*/ |
|||
|
|||
.ui.ribbon.label { |
|||
position: relative; |
|||
left: -2rem; |
|||
padding-left: 2rem; |
|||
-webkit-border-radius: 0px 4px 4px 0px; |
|||
-moz-border-radius: 0px 4px 4px 0px; |
|||
border-radius: 0px 4px 4px 0px; |
|||
} |
|||
|
|||
.ui.ribbon.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
|
|||
top: 100%; |
|||
left: 0%; |
|||
|
|||
border-top: 0em solid transparent; |
|||
border-right-width: 1em; |
|||
border-right-color: inherit; |
|||
border-right-style: solid; |
|||
border-bottom: 1em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.top.attached.label, |
|||
.ui.attached.label { |
|||
width: 100%; |
|||
position: absolute; |
|||
margin: 0em; |
|||
top: 0em; |
|||
left: 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 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: 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 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: 4px 0em 0em 4px; |
|||
-moz-border-radius: 4px 0em 0em 4px; |
|||
border-radius: 4px 0em 0em 4px; |
|||
} |
|||
.ui.bottom.right.attached.label { |
|||
top: auto; |
|||
bottom: 0em; |
|||
left: auto; |
|||
right: 0em; |
|||
width: auto; |
|||
-webkit-border-radius: 4px 0em 4px 0em; |
|||
-moz-border-radius: 4px 0em 4px 0em; |
|||
border-radius: 4px 0em 4px 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Corner Label |
|||
--------------------*/ |
|||
|
|||
.ui.corner.label { |
|||
background-color: transparent; |
|||
position: absolute; |
|||
top: 0em; |
|||
right: 0em; |
|||
z-index: 10; |
|||
margin: 0em; |
|||
|
|||
font-size: 0.9em; |
|||
width: 1.75em; |
|||
height: 1.75em; |
|||
padding: 0em; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.corner.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0em; |
|||
top: 0em; |
|||
z-index: -1; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
|
|||
border-top: 0em solid transparent; |
|||
border-right: 2.75em solid transparent; |
|||
border-bottom: 2.75em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
border-right-color: inherit; |
|||
|
|||
-webkit-transition: border-color 0.2s ease; |
|||
-moz-transition: border-color 0.2s ease; |
|||
-o-transition: border-color 0.2s ease; |
|||
-ms-transition: border-color 0.2s ease; |
|||
transition: border-color 0.2s ease; |
|||
} |
|||
|
|||
.ui.corner.label .icon { |
|||
margin: 0.35em 0em; |
|||
vertical-align: top; |
|||
} |
|||
.ui.corner.label .text { |
|||
display: inline-block; |
|||
margin: 0.7em 0em 0em 0em; |
|||
width: 2.5em; |
|||
|
|||
font-size: 0.7em; |
|||
text-align: center; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
-o-transform: rotate(45deg); |
|||
-ms-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
/* Left Corner */ |
|||
.ui.left.corner.label, |
|||
.ui.left.corner.label:after { |
|||
right: auto; |
|||
left: 0em; |
|||
} |
|||
.ui.left.corner.label:after { |
|||
border-top: 2.75em solid transparent; |
|||
border-right: 2.75em solid transparent; |
|||
border-bottom: 0em solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
border-top-color: inherit; |
|||
} |
|||
.ui.left.corner.label .text { |
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.corner.label:hover { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Fluid |
|||
--------------------*/ |
|||
|
|||
.ui.label.fluid, |
|||
.ui.fluid.labels > .label { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.labels .label, |
|||
.ui.inverted.label { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
/*--- Black ---*/ |
|||
.ui.black.labels .label, |
|||
.ui.black.label { |
|||
background-color: #5C6166 !important; |
|||
border-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .black.label:before, |
|||
.ui.black.labels .label:before, |
|||
.ui.black.label:before { |
|||
background-color: #5C6166 !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.black.labels .label:hover, |
|||
a.ui.black.label:hover { |
|||
background-color: #888888 !important; |
|||
border-color: #888888 !important; |
|||
} |
|||
.ui.labels a.black.label:hover:before, |
|||
.ui.black.labels a.label:hover:before, |
|||
a.ui.black.label:hover:before { |
|||
background-color: #888888 !important; |
|||
} |
|||
|
|||
/* Corner */ |
|||
.ui.black.corner.label, |
|||
.ui.black.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Green ---*/ |
|||
.ui.green.labels .label, |
|||
.ui.green.label { |
|||
background-color: #A1CF64 !important; |
|||
border-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .green.label:before, |
|||
.ui.green.labels .label:before, |
|||
.ui.green.label:before { |
|||
background-color: #A1CF64 !important; |
|||
} |
|||
|
|||
/* Hover */ |
|||
a.ui.green.labels .label:hover, |
|||
a.ui.green.label:hover { |
|||
background-color: #89B84C !important; |
|||
border-color: #89B84C !important; |
|||
} |
|||
.ui.labels a.green.label:hover:before, |
|||
.ui.green.labels a.label:hover:before, |
|||
a.ui.green.label:hover:before { |
|||
background-color: #89B84C !important; |
|||
} |
|||
|
|||
/* Corner */ |
|||
.ui.green.corner.label, |
|||
.ui.green.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Red ---*/ |
|||
.ui.red.labels .label, |
|||
.ui.red.label { |
|||
background-color: #D95C5C !important; |
|||
border-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .red.label:before, |
|||
.ui.red.labels .label:before, |
|||
.ui.red.label:before { |
|||
background-color: #D95C5C !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.red.corner.label, |
|||
.ui.red.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/* Hover */ |
|||
a.ui.red.labels .label:hover, |
|||
a.ui.red.label:hover{ |
|||
background-color: #DE3859 !important; |
|||
border-color: #DE3859 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.red.label:hover:before, |
|||
.ui.red.labels a.label:hover:before, |
|||
a.ui.red.label:hover:before { |
|||
background-color: #DE3859 !important; |
|||
} |
|||
|
|||
|
|||
/*--- Blue ---*/ |
|||
.ui.blue.labels .label, |
|||
.ui.blue.label { |
|||
background-color: #6ECFF5 !important; |
|||
border-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .blue.label:before, |
|||
.ui.blue.labels .label:before, |
|||
.ui.blue.label:before { |
|||
background-color: #6ECFF5 !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.blue.labels .label:hover, |
|||
.ui.blue.labels a.label:hover, |
|||
a.ui.blue.label:hover { |
|||
background-color: #1AB8F3 !important; |
|||
border-color: #1AB8F3 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.blue.label:hover:before, |
|||
.ui.blue.labels a.label:hover:before, |
|||
a.ui.blue.label:hover:before { |
|||
background-color: #1AB8F3 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.blue.corner.label, |
|||
.ui.blue.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/*--- Purple ---*/ |
|||
.ui.purple.labels .label, |
|||
.ui.purple.label { |
|||
background-color: #564F8A !important; |
|||
border-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .purple.label:before, |
|||
.ui.purple.labels .label:before, |
|||
.ui.purple.label:before { |
|||
background-color: #564F8A !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.purple.labels .label:hover, |
|||
.ui.purple.labels a.label:hover, |
|||
a.ui.purple.label:hover { |
|||
background-color: #3E3773 !important; |
|||
border-color: #3E3773 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.purple.label:hover:before, |
|||
.ui.purple.labels a.label:hover:before, |
|||
a.ui.purple.label:hover:before { |
|||
background-color: #3E3773 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.purple.corner.label, |
|||
.ui.purple.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*--- Pink ---*/ |
|||
.ui.teal.labels .label, |
|||
.ui.teal.label { |
|||
background-color: #00B5AD !important; |
|||
border-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels .teal.label:before, |
|||
.ui.teal.labels .label:before, |
|||
.ui.teal.label:before { |
|||
background-color: #00B5AD !important; |
|||
} |
|||
/* Hover */ |
|||
a.ui.teal.labels .label:hover, |
|||
.ui.teal.labels a.label:hover, |
|||
a.ui.teal.label:hover { |
|||
background-color: #009A93 !important; |
|||
border-color: #009A93 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.labels a.teal.label:hover:before, |
|||
.ui.teal.labels a.label:hover:before, |
|||
a.ui.teal.label:hover:before { |
|||
background-color: #009A93 !important; |
|||
} |
|||
/* Corner */ |
|||
.ui.teal.corner.label, |
|||
.ui.teal.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.labels .label, |
|||
.ui.horizontal.label { |
|||
margin: -0.125em 0.5em -0.125em 0em; |
|||
|
|||
padding: 0.35em 1em; |
|||
min-width: 6em; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
.ui.circular.labels .label, |
|||
.ui.circular.label { |
|||
min-height: 1em; |
|||
max-height: 2em; |
|||
|
|||
padding: 0.5em !important; |
|||
|
|||
line-height: 1em; |
|||
text-align: center; |
|||
|
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Pointing |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.label { |
|||
position: relative; |
|||
} |
|||
.ui.attached.pointing.label { |
|||
position: absolute; |
|||
} |
|||
|
|||
.ui.pointing.label:before { |
|||
position: absolute; |
|||
content: ""; |
|||
|
|||
width: 0.6em; |
|||
height: 0.6em; |
|||
|
|||
background-image: none; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
|
|||
-webkit-transition: |
|||
background 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
background 0.1s linear |
|||
; |
|||
-o-transition: |
|||
background 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
background 0.1s linear |
|||
; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
/*--- Above ---*/ |
|||
.ui.pointing.label:before { |
|||
background-color: #E8E8E8; |
|||
} |
|||
.ui.pointing.label, |
|||
.ui.pointing.above.label { |
|||
margin-top: 1em; |
|||
} |
|||
.ui.pointing.label:before, |
|||
.ui.pointing.above.label:before { |
|||
margin-left: -0.3em; |
|||
top: -0.3em; |
|||
left: 50%; |
|||
} |
|||
/*--- Below ---*/ |
|||
.ui.pointing.below.label { |
|||
margin-top: 0em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.pointing.below.label:before { |
|||
margin-left: -0.3em; |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -0.3em; |
|||
left: 50%; |
|||
} |
|||
/*--- Left ---*/ |
|||
.ui.pointing.left.label { |
|||
margin-top: 0em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.pointing.left.label:before { |
|||
margin-top: -0.3em; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
/*--- Right ---*/ |
|||
.ui.pointing.right.label { |
|||
margin-top: 0em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.pointing.right.label:before { |
|||
margin-top: -0.3em; |
|||
right: -0.3em; |
|||
top: 50%; |
|||
bottom: auto; |
|||
left: auto; |
|||
} |
|||
|
|||
/*------------------ |
|||
Floating Label |
|||
-------------------*/ |
|||
|
|||
.ui.floating.label { |
|||
position: absolute; |
|||
z-index: 100; |
|||
top: -1em; |
|||
left: 100%; |
|||
margin: 0em 0em 0em -1.5em !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.small.labels .label, |
|||
.ui.small.label { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.label { |
|||
font-size: 0.8125rem; |
|||
} |
|||
.ui.large.labels .label, |
|||
.ui.large.label { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.huge.labels .label, |
|||
.ui.huge.label { |
|||
font-size: 1rem; |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
/* |
|||
* # Semantic Loader |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Loader |
|||
*******************************/ |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.loader { |
|||
display: none; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -16px 0px 0px -16px; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.ui.dimmer .loader { |
|||
display: block; |
|||
} |
|||
|
|||
/*------------------- |
|||
Text |
|||
--------------------*/ |
|||
|
|||
/* Text Styles */ |
|||
.ui.loader.text { |
|||
width: auto !important; |
|||
height: auto !important; |
|||
text-align: center; |
|||
font-style: normal; |
|||
|
|||
margin-top: -28px; |
|||
min-width: 32px; |
|||
padding-top: 40px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.mini { |
|||
margin-top: -16px; |
|||
min-width: 16px; |
|||
padding-top: 20px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.small { |
|||
margin-top: -23px; |
|||
min-width: 24px; |
|||
padding-top: 32px; |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.loader.text.large { |
|||
margin-top: -46px; |
|||
min-width: 64px; |
|||
padding-top: 80px; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
.ui.loader.active, |
|||
.ui.loader.visible { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.loader.disabled, |
|||
.ui.loader.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.dimmer .ui.text.loader, |
|||
.ui.inverted.text.loader { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.dimmer .ui.text.loader { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/* Tiny Size */ |
|||
.ui.dimmer .mini.ui.loader, |
|||
.ui.inverted .mini.ui.loader { |
|||
background-image: url(../images/loader-mini-inverted.gif); |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.dimmer .small.ui.loader, |
|||
.ui.inverted .small.ui.loader { |
|||
background-image: url(../images/loader-small-inverted.gif); |
|||
} |
|||
|
|||
/* Standard Size */ |
|||
.ui.dimmer .ui.loader, |
|||
.ui.inverted.loader { |
|||
background-image: url(../images/loader-medium-inverted.gif); |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.dimmer .large.ui.loader, |
|||
.ui.inverted .large.ui.loader { |
|||
background-image: url(../images/loader-large-inverted.gif); |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
/* Tiny Size */ |
|||
.ui.inverted.dimmer .ui.loader.mini, |
|||
.ui.loader.mini { |
|||
width: 16px; |
|||
height: 16px; |
|||
background-image: url(../images/loader-mini.gif); |
|||
margin: -8px 0px 0px -8px; |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.inverted.dimmer .ui.loader.small, |
|||
.ui.loader.small { |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url(../images/loader-small.gif); |
|||
margin: -12px 0px 0px -12px; |
|||
} |
|||
|
|||
.ui.inverted.dimmer .ui.loader, |
|||
.ui.loader { |
|||
width: 32px; |
|||
height: 32px; |
|||
background: url(../images/loader-medium.gif) no-repeat; |
|||
background-position: 48% 0px; |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.inverted.dimmer .ui.loader.large, |
|||
.ui.loader.large { |
|||
width: 64px; |
|||
height: 64px; |
|||
background-image: url(../images/loader-large.gif); |
|||
margin: -32px 0px 0px -32px; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inline |
|||
--------------------*/ |
|||
|
|||
.ui.inline.loader { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin: 0em; |
|||
} |
|||
|
|||
.ui.inline.loader.active, |
|||
.ui.inline.loader.visible { |
|||
display: inline-block; |
|||
} |
|||
@ -0,0 +1,353 @@ |
|||
/* |
|||
* # Semantic Progress Bar |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Nay 14, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Progress Bar |
|||
*******************************/ |
|||
|
|||
.ui.progress { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Successful |
|||
---------------*/ |
|||
|
|||
.ui.successful.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.successful.progress .bar, |
|||
.ui.successful.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Failed |
|||
---------------*/ |
|||
|
|||
.ui.failed.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.failed.progress .bar, |
|||
.ui.failed.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.active.progress .bar { |
|||
position: relative; |
|||
} |
|||
.ui.active.progress .bar::after { |
|||
content: ''; |
|||
opacity: 0; |
|||
|
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
bottom: 0px; |
|||
background: #FFFFFF; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-animation: progress-active 2s ease-out infinite; |
|||
-moz-animation: progress-active 2s ease-out infinite; |
|||
animation: progress-active 2s ease-out infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 95%; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
@keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.disabled.progress { |
|||
opacity: 0.35; |
|||
} |
|||
.ui.disabled.progress .bar, |
|||
.ui.disabled.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
/* bottom attached */ |
|||
.ui.progress.attached { |
|||
position: relative; |
|||
border: none; |
|||
} |
|||
.ui.progress.attached, |
|||
.ui.progress.attached .bar { |
|||
display: block; |
|||
height: 3px; |
|||
padding: 0px; |
|||
overflow: hidden; |
|||
-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; |
|||
} |
|||
.ui.progress.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
/* top attached */ |
|||
.ui.progress.top.attached, |
|||
.ui.progress.top.attached .bar { |
|||
top: -2px; |
|||
-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; |
|||
} |
|||
.ui.progress.top.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
.ui.black.progress .bar { |
|||
background-color: #5C6166; |
|||
} |
|||
.ui.green.progress .bar { |
|||
background-color: #A1CF64; |
|||
} |
|||
.ui.red.progress .bar { |
|||
background-color: #EF4D6D; |
|||
} |
|||
.ui.purple.progress .bar { |
|||
background-color: #564F8A; |
|||
} |
|||
.ui.teal.progress .bar { |
|||
background-color: #00B5AD; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Striped |
|||
---------------*/ |
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
} |
|||
|
|||
.ui.progress.active.striped .bar:after { |
|||
-webkit-animation: none; |
|||
-moz-animation: none; |
|||
-ms-animation: none; |
|||
-o-animation: none; |
|||
animation: none; |
|||
} |
|||
.ui.progress.active.striped .bar { |
|||
-webkit-animation: progress-striped 3s linear infinite; |
|||
-moz-animation: progress-striped 3s linear infinite; |
|||
animation: progress-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.progress .bar { |
|||
height: 14px; |
|||
} |
|||
@ -0,0 +1,465 @@ |
|||
/* |
|||
* # Semantic Segment - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Segment |
|||
*******************************/ |
|||
|
|||
.ui.segment { |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
margin: 1em 0em; |
|||
padding: 1em; |
|||
|
|||
-webkit-border-radius: 5px 5px 5px 5px; |
|||
-moz-border-radius: 5px 5px 5px 5px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
|
|||
.ui.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
.ui.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.segment:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.vertical.segment { |
|||
margin: 0em; |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
|
|||
background-color: transparent; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.vertical.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
.ui.horizontal.segment { |
|||
margin: 0em; |
|||
padding-top: 0em; |
|||
padding-bottom: 0em; |
|||
|
|||
background-color: transparent; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
-webkit-box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
1px 0px 0px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.horizontal.segment:first-child { |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Loose Coupling |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.menu + .ui.attached.segment { |
|||
top: 1px; |
|||
} |
|||
|
|||
/* No padding on edge content */ |
|||
.ui.segment > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* Padding on next content after a label */ |
|||
.ui.segment > .attached.label:first-child + * { |
|||
margin-top: 2em; |
|||
} |
|||
.ui.segment > .bottom.attached.label:first-child ~ :last-child { |
|||
margin-top: 0em; |
|||
margin-bottom: 2em; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Piled |
|||
--------------------*/ |
|||
|
|||
.ui.piled.segment { |
|||
margin: 2em 0em; |
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-ms-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
-o-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
|||
; |
|||
} |
|||
.ui.piled.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.piled.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.piled.segment:after, |
|||
.ui.piled.segment:before { |
|||
background-color: #FFFFFF; |
|||
visibility: visible; |
|||
content: ""; |
|||
display: block; |
|||
height: 100%; |
|||
left: -1px; |
|||
position: absolute; |
|||
width: 100%; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
|||
; |
|||
} |
|||
.ui.piled.segment:after { |
|||
-webkit-transform: rotate(1.2deg); |
|||
-moz-transform: rotate(1.2deg); |
|||
-ms-transform: rotate(1.2deg); |
|||
-o-transform: rotate(1.2deg); |
|||
transform: rotate(1.2deg); |
|||
top: 0; |
|||
z-index: -1; |
|||
} |
|||
.ui.piled.segment:before { |
|||
-webkit-transform: rotate(-1.2deg); |
|||
-moz-transform: rotate(-1.2deg); |
|||
-ms-transform: rotate(-1.2deg); |
|||
-o-transform: rotate(-1.2deg); |
|||
transform: rotate(-1.2deg); |
|||
top: 0; |
|||
z-index: -2; |
|||
} |
|||
|
|||
/*------------------- |
|||
Stacked |
|||
--------------------*/ |
|||
|
|||
.ui.stacked.segment { |
|||
padding-bottom: 1.7em; |
|||
} |
|||
.ui.stacked.segment:after, |
|||
.ui.stacked.segment:before { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -3px; |
|||
left: 0%; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
|
|||
width: 100%; |
|||
height: 5px; |
|||
visibility: visible; |
|||
} |
|||
.ui.stacked.segment:before { |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.stacked.inverted.segment:after, |
|||
.ui.stacked.inverted.segment:before { |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
border-top: 1px solid rgba(255, 255, 255, 0.35); |
|||
} |
|||
|
|||
/*------------------- |
|||
Raised |
|||
--------------------*/ |
|||
|
|||
.ui.raised.segment { |
|||
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.segment { |
|||
opacity: 0.8; |
|||
color: #DDDDDD; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Basic |
|||
--------------------*/ |
|||
|
|||
.ui.basic.segment { |
|||
position: relative; |
|||
background-color: transparent; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
|
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.ui.basic.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
.ui.basic.segment:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.segment { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.blue.segment { |
|||
border-top: 0.2em solid #6ECFF5; |
|||
} |
|||
.ui.green.segment { |
|||
border-top: 0.2em solid #A1CF64; |
|||
} |
|||
.ui.red.segment { |
|||
border-top: 0.2em solid #D95C5C; |
|||
} |
|||
.ui.purple.segment { |
|||
border-top: 0.2em solid #564F8A; |
|||
} |
|||
.ui.teal.segment { |
|||
border-top: 0.2em solid #00B5AD; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.black.segment { |
|||
background-color: #5C6166 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.blue.segment { |
|||
background-color: #6ECFF5 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.green.segment { |
|||
background-color: #A1CF64 !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.red.segment { |
|||
background-color: #D95C5C !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.purple.segment { |
|||
background-color: #564F8A !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
.ui.inverted.teal.segment { |
|||
background-color: #00B5AD !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.segment { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.segment { |
|||
text-align: right; |
|||
} |
|||
.ui.center.aligned.segment { |
|||
text-align: center; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.segment, |
|||
.ui.left.floated.segment { |
|||
float: left; |
|||
} |
|||
.ui.right.floated.segment { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.segment { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.segment, |
|||
.ui.primary.inverted.segment { |
|||
background-color: #222222; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordinality |
|||
--------------------*/ |
|||
|
|||
.ui.primary.segment { |
|||
background-color: #FFFFFF; |
|||
color: #555555; |
|||
} |
|||
|
|||
.ui.secondary.segment { |
|||
background-color: #FAF9FA; |
|||
color: #777777; |
|||
} |
|||
|
|||
.ui.tertiary.segment { |
|||
background-color: #EBEBEB; |
|||
color: #B0B0B0; |
|||
} |
|||
|
|||
.ui.secondary.inverted.segment { |
|||
background-color: #555555; |
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); |
|||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
|||
color: #FAFAFA; |
|||
} |
|||
.ui.tertiary.inverted.segment { |
|||
background-color: #555555; |
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); |
|||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
|||
color: #EEEEEE; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.segment.attached { |
|||
top: -1px; |
|||
bottom: -1px; |
|||
|
|||
-moz-border-radius: 0px; |
|||
-webkit-border-radius: 0px; |
|||
border-radius: 0px; |
|||
|
|||
margin: 0em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
} |
|||
.ui.top.attached.segment { |
|||
top: 0px; |
|||
bottom: -1px; |
|||
|
|||
margin-top: 1em; |
|||
margin-bottom: 0em; |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.segment.bottom.attached { |
|||
top: -1px; |
|||
bottom: 0px; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: 1em; |
|||
|
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
@ -0,0 +1,294 @@ |
|||
/* |
|||
* # Semantic Steps |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Step |
|||
*******************************/ |
|||
|
|||
.ui.step, |
|||
.ui.steps .step { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 1em 2em 1em 3em; |
|||
|
|||
vertical-align: top; |
|||
background-color: #FFFFFF; |
|||
color: #888888; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.step:after, |
|||
.ui.steps .step:after { |
|||
position: absolute; |
|||
z-index: 2; |
|||
content: ''; |
|||
top: 0em; |
|||
right: -1.45em; |
|||
|
|||
border-bottom: 1.5em solid transparent; |
|||
border-left: 1.5em solid #FFFFFF; |
|||
border-top: 1.5em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
.ui.step, |
|||
.ui.steps .step, |
|||
.ui.steps .step:after { |
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Group |
|||
*******************************/ |
|||
|
|||
.ui.steps { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-moz-border-radius: 0.3125rem; |
|||
-webkit-border-radius: 0.3125rem; |
|||
border-radius: 0.3125rem; |
|||
} |
|||
|
|||
.ui.steps .step:first-child { |
|||
padding-left: 1.35em; |
|||
-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; |
|||
} |
|||
.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
border-radius: 0em 0.3125em 0.3125em 0em; |
|||
} |
|||
.ui.steps .step:only-child { |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
|
|||
.ui.steps .step:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.steps .step:last-child:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.step:hover, |
|||
.ui.step.hover { |
|||
background-color: #F7F7F7; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.steps .step.hover:after, |
|||
.ui.steps .step:hover:after, |
|||
.ui.step:hover, |
|||
.ui.step.hover::after { |
|||
border-left-color: #F7F7F7; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.steps .step.down, |
|||
.ui.steps .step:active, |
|||
.ui.step.down, |
|||
.ui.step:active { |
|||
background-color: #F0F0F0; |
|||
} |
|||
.ui.steps .step.down:after, |
|||
.ui.steps .step:active:after, |
|||
.ui.steps.down::after, |
|||
.ui.steps:active::after { |
|||
border-left-color: #F0F0F0; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.steps .step.active, |
|||
.ui.active.step { |
|||
cursor: auto; |
|||
background-color: #555555; |
|||
|
|||
color: #FFFFFF; |
|||
font-weight: bold; |
|||
} |
|||
.ui.steps .step.active:after, |
|||
.ui.active.steps:after { |
|||
border-left-color: #555555; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.steps .disabled.step, |
|||
.ui.disabled.step { |
|||
cursor: auto; |
|||
background-color: #FFFFFF; |
|||
color: #CBCBCB; |
|||
} |
|||
.ui.disabled.step:after { |
|||
border: none; |
|||
background-color: #FFFFFF; |
|||
top: 0.42em; |
|||
right: -1em; |
|||
|
|||
width: 2.15em; |
|||
height: 2.15em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
|
|||
-webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* Attached */ |
|||
.attached.ui.steps { |
|||
margin: 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; |
|||
} |
|||
.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0.3125em 0em 0em 0em; |
|||
-moz-border-radius: 0.3125em 0em 0em 0em; |
|||
border-radius: 0.3125em 0em 0em 0em; |
|||
} |
|||
.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0em 0em; |
|||
border-radius: 0em 0.3125em 0em 0em; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.steps { |
|||
margin-top: -1px; |
|||
-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; |
|||
} |
|||
.bottom.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0em 0em 0em 0.3125em; |
|||
-moz-border-radius: 0em 0em 0em 0.3125em; |
|||
border-radius: 0em 0em 0em 0.3125em; |
|||
} |
|||
.bottom.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0em 0.3125em 0em; |
|||
border-radius: 0em 0em 0.3125em 0em; |
|||
} |
|||
|
|||
|
|||
/* Evenly divided */ |
|||
.ui.one.steps, |
|||
.ui.two.steps, |
|||
.ui.three.steps, |
|||
.ui.four.steps, |
|||
.ui.five.steps, |
|||
.ui.six.steps, |
|||
.ui.seven.steps, |
|||
.ui.eight.steps { |
|||
display: block; |
|||
} |
|||
.ui.one.steps > .step { |
|||
width: 100%; |
|||
} |
|||
.ui.two.steps > .step { |
|||
width: 50%; |
|||
} |
|||
.ui.three.steps > .step { |
|||
width: 33.333%; |
|||
} |
|||
.ui.four.steps > .step { |
|||
width: 25%; |
|||
} |
|||
.ui.five.steps > .step { |
|||
width: 20%; |
|||
} |
|||
.ui.six.steps > .step { |
|||
width: 16.666%; |
|||
} |
|||
.ui.seven.steps > .step { |
|||
width: 14.285%; |
|||
} |
|||
.ui.eight.steps > .step { |
|||
width: 12.500%; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Sizes |
|||
*******************************/ |
|||
|
|||
.ui.small.step, |
|||
.ui.small.steps .step { |
|||
font-size: 0.8rem; |
|||
} |
|||
.ui.step, |
|||
.ui.steps .step { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.step, |
|||
.ui.large.steps .step { |
|||
font-size: 1.25rem; |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* # Semantic Accordion |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Button |
|||
*******************************/ |
|||
|
|||
.ui.accordion { |
|||
width: 600px; |
|||
max-width: 100%; |
|||
overflow: hidden; |
|||
|
|||
font-size: 1rem; |
|||
border-radius: 0.3125em; |
|||
|
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.accordion .title { |
|||
cursor: pointer; |
|||
|
|||
margin: 0em; |
|||
padding: 0.75em 1em; |
|||
|
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-moz-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-o-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-ms-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
} |
|||
.ui.accordion .title:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/* Content */ |
|||
.ui.accordion .content { |
|||
display: none; |
|||
margin: 0em; |
|||
padding: 1.3em 1em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Loose Coupling |
|||
---------------*/ |
|||
|
|||
.ui.basic.accordion.menu { |
|||
background-color: #FFFFFF; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.basic.accordion.menu .title, |
|||
.ui.basic.accordion.menu .content { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.accordion .title:hover, |
|||
.ui.accordion .title.active { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
.ui.accordion .title.active { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.accordion .content.active { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.basic.accordion { |
|||
background-color: transparent; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.basic.accordion .title { |
|||
background-color: transparent; |
|||
border-top: none; |
|||
} |
|||
|
|||
.ui.basic.accordion .title, |
|||
.ui.basic.accordion .content { |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
} |
|||
@ -0,0 +1,271 @@ |
|||
|
|||
/******************************* |
|||
Chat Room |
|||
*******************************/ |
|||
|
|||
.ui.chatroom { |
|||
background-color: #F8F8F8; |
|||
width: 330px; |
|||
height: 370px; |
|||
padding: 0px; |
|||
} |
|||
.ui.chatroom .room { |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
height: 286px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-top: none; |
|||
border-bottom: none; |
|||
} |
|||
.ui.chatroom .room .loader { |
|||
display: none; |
|||
margin: -25px 0px 0px -25px; |
|||
} |
|||
/* Chat Room Actions */ |
|||
.ui.chatroom .actions { |
|||
overflow: hidden; |
|||
background-color: #EEEEEE; |
|||
padding: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.chatroom .actions .button { |
|||
float: right; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
/* Online User Count */ |
|||
.ui.chatroom .actions .message { |
|||
float: left; |
|||
margin-left: 6px; |
|||
font-size: 11px; |
|||
color: #AAAAAA; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
line-height: 28px; |
|||
} |
|||
.ui.chatroom .actions .message .loader { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
|
|||
/* Chat Room Text Log */ |
|||
.ui.chatroom .log { |
|||
float: left; |
|||
|
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.ui.chatroom .log .message { |
|||
padding: 3px 0px; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .message:first-child { |
|||
border-top: none; |
|||
} |
|||
/* status event */ |
|||
.ui.chatroom .status { |
|||
padding: 5px 0px; |
|||
color: #AAAAAA; |
|||
|
|||
font-size: 12px; |
|||
font-style: italic; |
|||
line-height: 1.33; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .status:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.ui.chatroom .log .flag { |
|||
float: left; |
|||
} |
|||
.ui.chatroom .log p { |
|||
margin-left: 0px; |
|||
} |
|||
.ui.chatroom .log .author { |
|||
font-weight: bold; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
transition: color 0.3s ease-out; |
|||
} |
|||
.ui.chatroom .log a.author:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.ui.chatroom .log .message.admin p { |
|||
font-weight: bold; |
|||
margin: 1px 0px 0px 23px; |
|||
} |
|||
.ui.chatroom .log .divider { |
|||
margin: -1px 0px; |
|||
font-size: 11px; |
|||
padding: 10px 0px; |
|||
border-top: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid #F8F8F8; |
|||
} |
|||
.ui.chatroom .log .divider .rule { |
|||
top: 50%; |
|||
width: 15%; |
|||
} |
|||
|
|||
.ui.chatroom .log .divider .label { |
|||
color: #777777; |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* Chat Room User List */ |
|||
.ui.chatroom .room .list { |
|||
position: relative; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
float: left; |
|||
background-color: #EEEEEE; |
|||
border-left: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
display: table; |
|||
padding: 3px 7px; |
|||
border-bottom: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.chatroom .room .list .image { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
} |
|||
.ui.chatroom .room .list .image img { |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.chatroom .room .list p { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
padding-left: 7px; |
|||
padding-right: 14px; |
|||
font-size: 11px; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
.ui.chatroom .room .list a:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* User List Loading */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
|
|||
/* Chat Room Talk Input */ |
|||
.ui.chatroom .talk { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 5px 0px 0px; |
|||
|
|||
background-color: #EEEEEE; |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
.ui.chatroom .talk .avatar, |
|||
.ui.chatroom .talk input, |
|||
.ui.chatroom .talk .button { |
|||
float: left; |
|||
} |
|||
|
|||
.ui.chatroom .talk .avatar img { |
|||
display: block; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 4px; |
|||
border-radius: 500rem; |
|||
} |
|||
.ui.chatroom .talk input { |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0px; |
|||
width: 196px; |
|||
height: 14px; |
|||
padding: 8px 5px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.chatroom .talk input.focus { |
|||
border: 1px solid #AAAAAA; |
|||
} |
|||
.ui.chatroom .send { |
|||
width: 80px; |
|||
height: 32px; |
|||
|
|||
margin-left: -1px; |
|||
padding: 4px 12px; |
|||
font-size: 12px; |
|||
line-height: 23px; |
|||
|
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 0 5px 5px 0; |
|||
} |
|||
.ui.chatroom .talk .log-in.button { |
|||
display: block; |
|||
float: none; |
|||
margin-top: -6px; |
|||
height: 22px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.chatroom .talk .log-in.button i { |
|||
vertical-align: text-top; |
|||
} |
|||
|
|||
/* Quirky Flags */ |
|||
.ui.chatroom .log .team.flag { |
|||
width: 18px; |
|||
} |
|||
|
|||
/* Chat room Loaded */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.chatroom { |
|||
width: 330px; |
|||
height: 370px; |
|||
} |
|||
.ui.chatroom .room .container { |
|||
width: 3000px; |
|||
} |
|||
.ui.chatroom .log { |
|||
width: 314px; |
|||
height: 278px; |
|||
padding: 4px 7px; |
|||
} |
|||
.ui.chatroom .room .list { |
|||
width: 124px; |
|||
height: 278px; |
|||
padding: 4px 0px; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
width: 110px; |
|||
} |
|||
.ui.chatroom .talk { |
|||
height: 40px; |
|||
} |
|||
@ -0,0 +1,378 @@ |
|||
/******************************* |
|||
UI Checkbox |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Standard |
|||
---------------*/ |
|||
|
|||
|
|||
/*--- Content ---*/ |
|||
.ui.checkbox { |
|||
position: relative; |
|||
display: inline-block; |
|||
outline: none; |
|||
|
|||
margin-right: 0.5em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.checkbox input { |
|||
visibility: hidden; |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
/*--- Box ---*/ |
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
outline: none; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
|
|||
line-height: 1; |
|||
width: 1em; |
|||
height: 1em; |
|||
bottom: 0em; |
|||
left: 0em; |
|||
border-radius: 4px; |
|||
|
|||
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
background: #FFFFFF; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-moz-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-o-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
-ms-transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
transition: |
|||
background-color 0.1s ease-out, |
|||
box-shadow 0.1s ease-out |
|||
; |
|||
} |
|||
|
|||
/*--- Checkbox ---*/ |
|||
.ui.checkbox .box:after, |
|||
.ui.checkbox label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
opacity: 0; |
|||
content: ''; |
|||
position: absolute; |
|||
background: transparent; |
|||
border: 0.2em solid #333333; |
|||
border-top: none; |
|||
border-right: none; |
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
.ui.checkbox .box:after, |
|||
.ui.checkbox label:after { |
|||
top: 0.3em; |
|||
left: 0.2em; |
|||
width: 0.45em; |
|||
height: 0.15em; |
|||
} |
|||
|
|||
/*--- Label ---*/ |
|||
.ui.checkbox + label { |
|||
cursor: pointer; |
|||
opacity: 0.85; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.checkbox + label:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*--- Hover ---*/ |
|||
.ui.checkbox .box:hover, |
|||
.ui.checkbox label:hover { |
|||
background-color: #FAFAFA; |
|||
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
|
|||
/*--- Down ---*/ |
|||
.ui.checkbox .box:active, |
|||
.ui.checkbox label:active { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
|
|||
/*--- Active ---*/ |
|||
.ui.checkbox input:checked + .box:after, |
|||
.ui.checkbox input:checked + label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|||
filter: alpha(opacity=100); |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*--- Disabled ---*/ |
|||
.ui.disabled.checkbox + .box:after, |
|||
.ui.checkbox input[disabled] + .box:after, |
|||
.ui.disabled.checkbox label, |
|||
.ui.checkbox input[disabled] + label { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Radio |
|||
---------------*/ |
|||
|
|||
.ui.radio.checkbox { |
|||
width: 14px; |
|||
height: 16px; |
|||
} |
|||
.ui.radio.checkbox .box, |
|||
.ui.radio.checkbox label { |
|||
width: 14px; |
|||
height: 14px; |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
.ui.radio.checkbox .box:after, |
|||
.ui.radio.checkbox label:after { |
|||
top: 3px; |
|||
left: 3px; |
|||
|
|||
border: none; |
|||
width: 8px; |
|||
height: 8px; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Slider |
|||
---------------*/ |
|||
|
|||
.ui.slider.checkbox { |
|||
width: 3em; |
|||
height: 2em; |
|||
} |
|||
/* Line */ |
|||
.ui.slider.checkbox:after { |
|||
position: absolute; |
|||
top: 1em; |
|||
left: 0em; |
|||
content: ''; |
|||
|
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
/* Button */ |
|||
.ui.slider.checkbox .box, |
|||
.ui.slider.checkbox label { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
top: 0.25em; |
|||
left: 0; |
|||
z-index: 1; |
|||
|
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: left 0.3s ease 0s; |
|||
-moz-transition: left 0.3s ease 0s; |
|||
-o-transition: left 0.3s ease 0s; |
|||
-ms-transition: left 0.3s ease 0s; |
|||
transition: left 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Button Activation Light */ |
|||
.ui.slider.checkbox .box:after, |
|||
.ui.slider.checkbox label:after { |
|||
opacity: 1; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
top: 0.375em; |
|||
left: 0.375em; |
|||
|
|||
border: none; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
|
|||
background-color: #D95C5C; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: background 0.3s ease 0s; |
|||
-moz-transition: background 0.3s ease 0s; |
|||
-o-transition: background 0.3s ease 0s; |
|||
-ms-transition: background 0.3s ease 0s; |
|||
transition: background 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Active Slider Toggle */ |
|||
.ui.slider.checkbox input:checked + .box, |
|||
.ui.slider.checkbox input:checked + label { |
|||
left: 1.75em; |
|||
} |
|||
.ui.slider.checkbox input:checked + .box:after, |
|||
.ui.slider.checkbox input:checked + label:after { |
|||
background-color: #89B84C; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Toggle |
|||
---------------*/ |
|||
|
|||
.ui.toggle.checkbox { |
|||
width: 3em; |
|||
height: 2em; |
|||
} |
|||
/* Line */ |
|||
.ui.toggle.checkbox:after { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
top: 0.25em; |
|||
left: 0em; |
|||
z-index: 1; |
|||
|
|||
background-color: #FFFFFF; |
|||
width: 100%; |
|||
height: 1.5em; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 50rem; |
|||
} |
|||
.ui.toggle.checkbox .box, |
|||
.ui.toggle.checkbox label { |
|||
position: absolute; |
|||
top: 0.65em; |
|||
left: 0.5em; |
|||
|
|||
-webkit-transition: left 0.3s ease 0s; |
|||
-moz-transition: left 0.3s ease 0s; |
|||
-o-transition: left 0.3s ease 0s; |
|||
-ms-transition: left 0.3s ease 0s; |
|||
transition: left 0.3s ease 0s; |
|||
|
|||
background-color: transparent; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
/* Button Activation Light */ |
|||
.ui.toggle.checkbox .box:after, |
|||
.ui.toggle.checkbox label:after { |
|||
opacity: 1; |
|||
|
|||
content: ''; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
|
|||
border: none; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
|
|||
background-color: #D95C5C; |
|||
|
|||
border-radius: 50rem; |
|||
|
|||
-webkit-transition: background 0.3s ease 0s; |
|||
-moz-transition: background 0.3s ease 0s; |
|||
-o-transition: background 0.3s ease 0s; |
|||
-ms-transition: background 0.3s ease 0s; |
|||
transition: background 0.3s ease 0s; |
|||
} |
|||
|
|||
/* Active toggle Toggle */ |
|||
.ui.toggle.checkbox input:checked + .box, |
|||
.ui.toggle.checkbox input:checked + label { |
|||
left: 1.75em; |
|||
} |
|||
.ui.toggle.checkbox input:checked + .box:after, |
|||
.ui.toggle.checkbox input:checked + label:after { |
|||
background-color: #89B84C; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.checkbox { |
|||
width: 1em; |
|||
height: 1em; |
|||
} |
|||
.ui.checkbox, |
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.ui.large.checkbox { |
|||
width: 1.25em; |
|||
height: 1.25em; |
|||
} |
|||
.ui.large.checkbox, |
|||
.ui.large.checkbox .box, |
|||
.ui.large.checkbox label { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.huge.checkbox { |
|||
width: 1.5em; |
|||
height: 1.5em; |
|||
} |
|||
.ui.huge.checkbox, |
|||
.ui.huge.checkbox .box, |
|||
.ui.huge.checkbox label { |
|||
font-size: 1.5em; |
|||
} |
|||
@ -0,0 +1,230 @@ |
|||
/* |
|||
* # Semantic Dimmer |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dimmer |
|||
*******************************/ |
|||
|
|||
.ui.dimmable { |
|||
position: relative; |
|||
} |
|||
|
|||
.ui.dimmer { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
|
|||
width: 0%; |
|||
height: 0%; |
|||
|
|||
text-align: center; |
|||
vertical-align: middle; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
opacity: 0; |
|||
line-height: 1; |
|||
|
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
|
|||
-webkit-animation-duration: 0.5s; |
|||
-moz-animation-duration: 0.5s; |
|||
-o-animation-duration: 0.5s; |
|||
-ms-animation-duration: 0.5s; |
|||
animation-duration: 0.5s; |
|||
|
|||
-webkit-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-moz-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-o-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
-ms-transition: |
|||
background-color 0.5s linear |
|||
; |
|||
transition: |
|||
background-color 0.5s linear |
|||
; |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* |
|||
.ui.dimmed.dimmable > :not(.dimmer) { |
|||
-webkit-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-moz-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-o-transition: |
|||
filter 0.5s ease |
|||
; |
|||
-ms-transition: |
|||
filter 0.5s ease |
|||
; |
|||
transition: |
|||
filter 0.5s ease |
|||
; |
|||
} |
|||
*/ |
|||
|
|||
|
|||
/* Dimmer Content */; |
|||
.ui.dimmer > .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: table; |
|||
|
|||
-webkit-user-select: text; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
} |
|||
.ui.dimmer > .content > div { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
/* Loose Coupling */ |
|||
.ui.segment > .ui.dimmer { |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
.ui.horizontal.segment > .ui.dimmer, |
|||
.ui.vertical.segment > .ui.dimmer { |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/* |
|||
.ui.dimmed.dimmable > :not(.dimmer) { |
|||
-webkit-filter: ~"blur(5px) grayscale(0.7)"; |
|||
-moz-filter: ~"blur(5px) grayscale(0.7)"; |
|||
} |
|||
*/ |
|||
.ui.dimmed.dimmable > .ui.dimmer, |
|||
.ui.active.dimmer { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.disabled.dimmer { |
|||
width: 0em !important; |
|||
height: 0em !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Page |
|||
---------------*/ |
|||
|
|||
.ui.page.dimmer { |
|||
position: fixed; |
|||
|
|||
-webkit-perspective: 2000px; |
|||
-moz-perspective: 2000px; |
|||
perspective: 2000px; |
|||
|
|||
-webkit-transform-origin: top center; |
|||
-moz-transform-origin: top center; |
|||
-o-transform-origin: top center; |
|||
-ms-transform-origin: top center; |
|||
transform-origin: top center; |
|||
} |
|||
/* |
|||
body.ui.dimmed.dimmable > :not(.dimmer){ |
|||
-webkit-filter: ~"blur(15px) grayscale(0.7)"; |
|||
-moz-filter: ~"blur(15px) grayscale(0.7)"; |
|||
} |
|||
*/ |
|||
|
|||
/*-------------- |
|||
Aligned |
|||
---------------*/ |
|||
|
|||
.ui.dimmer > .top.aligned.content > * { |
|||
vertical-align: top; |
|||
} |
|||
.ui.dimmer > .bottom.aligned.content > * { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
.ui.inverted.dimmer > .content > * { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dimmer { |
|||
display: block; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
z-index: -100; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.dimmer { |
|||
overflow: visible; |
|||
opacity: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
z-index: 1; |
|||
} |
|||
|
|||
.ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85) |
|||
} |
|||
@ -0,0 +1,506 @@ |
|||
/* |
|||
* # Semantic Dropdown |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
|
|||
.ui.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-o-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
} |
|||
|
|||
.ui.dropdown .menu { |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
|
|||
margin: 0em; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
|
|||
white-space: nowrap; |
|||
font-size: 0.875em; |
|||
text-shadow: none; |
|||
|
|||
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease; |
|||
-moz-transition: opacity 0.2s ease; |
|||
-o-transition: opacity 0.2s ease; |
|||
-ms-transition: opacity 0.2s ease; |
|||
transition: opacity 0.2s ease; |
|||
z-index: 11; |
|||
} |
|||
|
|||
/* Dropdown Icon */ |
|||
.ui.dropdown > .dropdown.icon { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Dropdown Text */ |
|||
.ui.dropdown > .text { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 0px; |
|||
} |
|||
.ui.menu .dropdown:last-child .menu, |
|||
.ui > .ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 0px; |
|||
} |
|||
|
|||
/* Sub Menu Position */ |
|||
.ui.dropdown .menu .menu { |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
margin: 0em !important; |
|||
border-radius: 0 0.325em 0.325em 0em !important; |
|||
} |
|||
.ui.dropdown .menu .menu:after { |
|||
display: none; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
font-size: 0.875em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
|
|||
padding: 0.85em 1em !important; |
|||
font-size: 0.875rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
|
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item:before { |
|||
display: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Dropdown Visible */ |
|||
.ui.visible.dropdown { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
.ui.visible.dropdown > .menu { |
|||
display: block; |
|||
} |
|||
|
|||
/* Menu Item Hover */ |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
z-index: 12; |
|||
} |
|||
|
|||
/* Menu Item Active */ |
|||
.ui.dropdown .menu .active.item { |
|||
box-shadow: none; |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
border-left: none; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-shadow: none; |
|||
box-shadow: none; |
|||
z-index: 12; |
|||
} |
|||
|
|||
/* Default Text */ |
|||
.ui.dropdown > .default.text, |
|||
.ui.default.dropdown > .text { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.dropdown:hover > .default.text, |
|||
.ui.default.dropdown:hover > .text { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dropdown .menu:before, |
|||
.ui.simple.dropdown .menu:after { |
|||
display: none; |
|||
} |
|||
.ui.simple.dropdown .menu { |
|||
display: block; |
|||
overflow: hidden; |
|||
top: -9999px !important; |
|||
position: absolute; |
|||
opacity: 0; |
|||
width: 0; |
|||
height: 0; |
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown, |
|||
.ui.simple.dropdown:hover { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown > .menu, |
|||
.ui.simple.dropdown:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.dropdown > .menu .item:active > .menu, |
|||
.ui.simple.dropdown:hover > .menu .item:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.disabled.dropdown:hover .menu { |
|||
display: none; |
|||
height: 0px; |
|||
width: 0px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
/* Displays like a select box */ |
|||
|
|||
.ui.selection.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
|
|||
background-color: #FFFFFF; |
|||
padding: 0.5em 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-border-radius: 0.3125em !important; |
|||
-moz-border-radius: 0.3125em !important; |
|||
border-radius: 0.3125em !important; |
|||
} |
|||
.ui.selection.dropdown > .dropdown.icon { |
|||
float: right; |
|||
|
|||
opacity: 0.7; |
|||
margin: 0.2em 0em 0.2em 1.25em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown, |
|||
.ui.selection.dropdown .menu { |
|||
top: 100%; |
|||
-webkit-transition: box-shadow 0.2s ease-out; |
|||
-moz-transition: box-shadow 0.2s ease-out; |
|||
-o-transition: box-shadow 0.2s ease-out; |
|||
-ms-transition: box-shadow 0.2s ease-out; |
|||
transition: box-shadow 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown .menu { |
|||
max-height: 312px; |
|||
|
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
box-shadow: 0px 1px 0px 1px #EEEEEE; |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
} |
|||
.ui.selection.dropdown .menu:after, |
|||
.ui.selection.dropdown .menu:before { |
|||
display: none; |
|||
} |
|||
.ui.selection.dropdown .menu img { |
|||
height: 2.5em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.selection.dropdown:hover, |
|||
.ui.selection.dropdown.hover { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.selection.dropdown:hover > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.selection.active.dropdown { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
} |
|||
.ui.selection.active.dropdown > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
.ui.selection.active.dropdown .menu { |
|||
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fluid |
|||
---------------*/ |
|||
|
|||
.ui.fluid.dropdown { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inline |
|||
---------------*/ |
|||
|
|||
.ui.inline.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
color: inherit; |
|||
} |
|||
.ui.inline.dropdown .dropdown.icon { |
|||
margin: 0em 0.5em 0em 0.25em; |
|||
} |
|||
.ui.inline.dropdown .text { |
|||
font-weight: bold; |
|||
} |
|||
.ui.inline.dropdown .menu { |
|||
cursor: auto; |
|||
margin-top: 0.25em; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.dropdown .menu { |
|||
left: 0; |
|||
right: auto; |
|||
|
|||
margin-top: 0.5em; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointing |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.pointing.dropdown .menu { |
|||
top: 100%; |
|||
margin-top: 0.75em; |
|||
-moz-border-radius: 0.325em; |
|||
-webkit-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
display: block; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
content: " "; |
|||
visibility: visible; |
|||
|
|||
width: 0.5em; |
|||
height: 0.5em; |
|||
|
|||
-moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu .item.active:first-child { |
|||
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
} |
|||
|
|||
/* Directions */ |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 50%; |
|||
margin: 0em 0em 0em -0.25em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
left: 0%; |
|||
right: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 1.25em; |
|||
right: auto; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
right: 0%; |
|||
left: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: auto; |
|||
right: 1.25em; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.ui.left.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: 100%; |
|||
right: auto; |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.left.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
.ui.right.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: auto; |
|||
right: 100%; |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.right.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: auto; |
|||
right: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(135deg); |
|||
-moz-transform: rotate(135deg); |
|||
transform: rotate(135deg); |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
/* |
|||
* # Semantic Modal |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Aug 05, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Modal |
|||
*******************************/ |
|||
|
|||
.ui.modal { |
|||
display: none; |
|||
position: fixed; |
|||
z-index: 1001; |
|||
|
|||
top: 50%; |
|||
left: 50%; |
|||
text-align: left; |
|||
|
|||
width: 800px; |
|||
margin-left: -400px; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Close |
|||
---------------*/ |
|||
|
|||
.ui.modal > .close { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
|
|||
opacity: 0.8; |
|||
|
|||
font-size: 1.25em; |
|||
top: -1.75em; |
|||
right: -1.75em; |
|||
|
|||
color: #FFFFFF; |
|||
} |
|||
.ui.modal > .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Header |
|||
---------------*/ |
|||
|
|||
.ui.modal > .header { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
margin: 0em; |
|||
padding: 1.5rem 2rem; |
|||
|
|||
font-size: 1.6em; |
|||
font-weight: bold; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0px 0px; |
|||
-moz-border-radius: 0.325em 0.325em 0px 0px; |
|||
border-radius: 0.325em 0.325em 0px 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.modal > .content { |
|||
display: table; |
|||
position: relative; |
|||
padding: 2em; |
|||
background-color: #F4F4F4; |
|||
} |
|||
.ui.modal > .content > .left { |
|||
display: table-cell; |
|||
padding-right: 5%; |
|||
} |
|||
.ui.modal > .content > .right { |
|||
display: table-cell; |
|||
padding-left: 5%; |
|||
vertical-align: middle; |
|||
|
|||
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.modal > .content p { |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
/*-------------- |
|||
Actions |
|||
---------------*/ |
|||
|
|||
.ui.modal .actions { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
padding: 1rem 2rem; |
|||
text-align: right; |
|||
} |
|||
.ui.modal .actions > .button { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.basic.modal { |
|||
background-color: transparent; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.basic.modal .content { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* A modal that cannot fit on the page */ |
|||
.ui.modal.scrolling { |
|||
position: absolute; |
|||
margin-top: 100px; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.modal { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
/* |
|||
* # Semantic Nag |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Nag |
|||
*******************************/ |
|||
|
|||
.ui.nag { |
|||
display: none; |
|||
opacity: 0.95; |
|||
|
|||
position: relative; |
|||
top: 0px; |
|||
left: 0%; |
|||
z-index: 101; |
|||
|
|||
min-height: 0; |
|||
width: 100%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
line-height: 3em; |
|||
padding: 0em 1em; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
|
|||
font-size: 1em; |
|||
text-align: center; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
|
|||
-webkit-transition: 0.2s background; |
|||
-moz-transition: 0.2s background; |
|||
-o-transition: 0.2s background; |
|||
-ms-transition: 0.2s background; |
|||
transition: 0.2s background; |
|||
} |
|||
|
|||
a.ui.nag { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.nag > .title { |
|||
display: inline-block; |
|||
margin: 0em 0.5em; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.ui.nag > .close.icon { |
|||
cursor: pointer; |
|||
opacity: 0.4; |
|||
|
|||
position: absolute; |
|||
top: 50%; |
|||
right: 1em; |
|||
|
|||
margin-top: -0.5em; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-transition: 0.1s opacity; |
|||
-moz-transition: 0.1s opacity; |
|||
-o-transition: 0.1s opacity; |
|||
-ms-transition: 0.1s opacity; |
|||
transition: 0.1s opacity; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.nag:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.nag .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Static |
|||
---------------*/ |
|||
|
|||
.ui.overlay.nag { |
|||
position: absolute; |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fixed |
|||
---------------*/ |
|||
|
|||
.ui.fixed.nag { |
|||
position: fixed; |
|||
} |
|||
|
|||
/*-------------- |
|||
Bottom |
|||
---------------*/ |
|||
|
|||
.ui.botton.nag { |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.fixed.bottom.nags, |
|||
.ui.fixed.bottom.nag { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
White |
|||
---------------*/ |
|||
|
|||
.ui.white.nags .nag, |
|||
.ui.white.nag { |
|||
background-color: #F1F1F1; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
color: #ACACAC; |
|||
} |
|||
.ui.white.nags .nag .close, |
|||
.ui.white.nags .nag .title, |
|||
.ui.white.nag .close, |
|||
.ui.white.nag .title { |
|||
color: #333333; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.nags .nag { |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
@ -0,0 +1,238 @@ |
|||
/* |
|||
* # Semantic Popup |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
Popup |
|||
*******************************/ |
|||
|
|||
.ui.popup { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
z-index: 900; |
|||
|
|||
border: 1px solid #DCDDDE; |
|||
max-width: 250px; |
|||
background-color: #FFFFFF; |
|||
|
|||
padding: 0.8em 1.2em; |
|||
font-size: 0.875rem; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
|
|||
-webkit-box-shadow: 0px 1px 1px #DCDDDE; |
|||
-moz-box-shadow: 0px 1px 1px #DCDDDE; |
|||
box-shadow: 0px 1px 1px #DCDDDE; |
|||
} |
|||
.ui.popup .header { |
|||
padding: 0em 0em 0.5em; |
|||
|
|||
font-size: 1.125em; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.ui.popup:before { |
|||
position: absolute; |
|||
content: ""; |
|||
width: 0.75em; |
|||
height: 0.75rem; |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
z-index: 2; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-box-shadow: 1px 1px 1px #DCDDDE; |
|||
-moz-box-shadow: 1px 1px 1px #DCDDDE; |
|||
box-shadow: 1px 1px 1px #DCDDDE; |
|||
} |
|||
|
|||
.ui.popup .ui.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Spacing |
|||
---------------*/ |
|||
.ui.popup { |
|||
margin: 0em; |
|||
} |
|||
.ui.popup.bottom { |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.top { |
|||
margin: 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.left.center { |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.right.center { |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.center { |
|||
margin-left: -1.25em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointer |
|||
---------------*/ |
|||
|
|||
/*--- Below ---*/ |
|||
.ui.bottom.center.popup:before { |
|||
margin-left: -0.4em; |
|||
top: -0.4em; |
|||
left: 50%; |
|||
right: auto; |
|||
bottom: auto; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
.ui.bottom.left.popup:before { |
|||
top: -0.4em; |
|||
left: 1em; |
|||
right: auto; |
|||
bottom: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
.ui.bottom.right.popup:before { |
|||
top: -0.4em; |
|||
right: 1em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|||
-moz-box-shadow: -1px -1px 1px #dcddde; |
|||
box-shadow: -1px -1px 1px #dcddde; |
|||
} |
|||
/*--- Above ---*/ |
|||
.ui.top.center.popup:before { |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -0.4em; |
|||
left: 50%; |
|||
margin-left: -0.4em; |
|||
} |
|||
.ui.top.left.popup:before { |
|||
bottom: -0.4em; |
|||
left: 1em; |
|||
top: auto; |
|||
right: auto; |
|||
margin-left: 0em; |
|||
} |
|||
.ui.top.right.popup:before { |
|||
bottom: -0.4em; |
|||
right: 1em; |
|||
top: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
} |
|||
/*--- Left ---*/ |
|||
.ui.left.center.popup:before { |
|||
top: 50%; |
|||
right: -0.35em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: 1px -1px 1px #dcddde; |
|||
-webkit-box-shadow: 1px -1px 1px #dcddde; |
|||
box-shadow: 1px -1px 1px #dcddde; |
|||
} |
|||
/*--- Right ---*/ |
|||
.ui.right.center.popup:before { |
|||
top: 50%; |
|||
left: -0.35em; |
|||
bottom: auto; |
|||
right: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: -1px 1px 1px #dcddde; |
|||
-webkit-box-shadow: -1px 1px 1px #dcddde; |
|||
box-shadow: -1px 1px 1px #dcddde; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.loading.popup { |
|||
display: block; |
|||
visibility: hidden; |
|||
} |
|||
.ui.active.popup { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.small.popup { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.large.popup { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
/* Inverted colors */ |
|||
.ui.inverted.popup { |
|||
background-color: #333333; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.popup .header { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.popup:before { |
|||
background-color: #333333; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
|
|||
.ui.rating { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5em; |
|||
} |
|||
.ui.rating:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
.ui.rating:after { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: default; |
|||
float: left; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:after { |
|||
content: "\2605"; |
|||
color: rgba(0, 0, 0, 0.15); |
|||
|
|||
-webkit-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
|
|||
.ui.star.rating .icon:after { |
|||
content: '\e800'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.star.rating .active.icon:after { |
|||
content: '\e801'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
|
|||
.ui.heart.rating .icon:after { |
|||
content: '\2661'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.heart.rating .active.icon:after { |
|||
content: '\2665'; |
|||
font-family: 'Icons'; |
|||
color: #EF404A; |
|||
} |
|||
.ui.heart.rating .hover.icon:after, |
|||
.ui.heart.rating .active.hover.icon:after { |
|||
color: #FF2733; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
|
|||
/* active rating */ |
|||
.ui.active.rating .icon { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* active icons */ |
|||
.ui.rating .active.icon:after { |
|||
color: #FFCB08; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
/* rating */ |
|||
.ui.rating.hover .active.icon:after { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* icon */ |
|||
.ui.rating .icon.hover:after, |
|||
.ui.rating .icon.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.rating { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.rating { |
|||
font-size: 1.5rem; |
|||
} |
|||
.ui.large.rating { |
|||
font-size: 2rem; |
|||
} |
|||
@ -0,0 +1,367 @@ |
|||
/* |
|||
* # Semantic Reveal |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: June 28, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Reveal |
|||
*******************************/ |
|||
|
|||
.ui.reveal { |
|||
display: inline-block; |
|||
position: relative !important; |
|||
z-index: 2 !important; |
|||
font-size: 0em !important; |
|||
} |
|||
|
|||
.ui.reveal > .content { |
|||
font-size: 1em !important; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
position: absolute !important; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
z-index: 4 !important; |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.reveal > .hidden.content { |
|||
position: relative !important; |
|||
z-index: 3 !important; |
|||
} |
|||
|
|||
/*------------------ |
|||
Loose Coupling |
|||
-------------------*/ |
|||
|
|||
.ui.reveal.button { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.reveal { |
|||
position: relative !important; |
|||
display: block; |
|||
overflow: hidden !important; |
|||
|
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ui.slide.reveal > .content { |
|||
display: block; |
|||
float: left; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
-webkit-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.slide.reveal > .visible.content { |
|||
position: relative !important; |
|||
} |
|||
.ui.slide.reveal > .hidden.content { |
|||
position: absolute !important; |
|||
left: 100% !important; |
|||
width: 100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .visible.content { |
|||
left: -100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.right.slide.reveal > .visible.content { |
|||
left: 0%; |
|||
} |
|||
.ui.right.slide.reveal > .hidden.content { |
|||
left: auto !important; |
|||
right: 100% !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
right: auto !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .hidden.content { |
|||
left: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
|
|||
.ui.up.slide.reveal > .visible.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.up.slide.reveal > .hidden.content { |
|||
top: 100% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .visible.content { |
|||
top: -100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .hidden.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.down.slide.reveal > .visible.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
bottom: 0% !important; |
|||
} |
|||
.ui.down.slide.reveal > .hidden.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: 100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .visible.content { |
|||
left: 0% !important; |
|||
bottom: -100% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
bottom: 0% !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Fade |
|||
---------------*/ |
|||
|
|||
.ui.fade.reveal > .visible.content { |
|||
opacity: 1; |
|||
} |
|||
.ui.fade.reveal:hover > .visible.content { |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Move |
|||
---------------*/ |
|||
|
|||
.ui.move.reveal > .visible.content, |
|||
.ui.move.left.reveal > .visible.content { |
|||
left: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
.ui.move.reveal:hover > .visible.content, |
|||
.ui.move.left.reveal:hover > .visible.content { |
|||
right: 100% !important; |
|||
} |
|||
|
|||
.ui.move.right.reveal > .visible.content { |
|||
right: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.move.right.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
} |
|||
|
|||
.ui.move.up.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
top: auto !important; |
|||
|
|||
bottom: 0% !important; |
|||
} |
|||
.ui.move.up.reveal:hover > .visible.content { |
|||
bottom: 100% !important; |
|||
} |
|||
|
|||
.ui.move.down.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
bottom: auto !important; |
|||
|
|||
top: 0% !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.move.down.reveal:hover > .visible.content { |
|||
top: 100% !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Rotate |
|||
---------------*/ |
|||
|
|||
.ui.rotate.reveal > .visible.content { |
|||
-webkit-transition-duration: 0.8s; |
|||
-moz-transition-duration: 0.8s; |
|||
-o-transition-duration: 0.8s; |
|||
-ms-transition-duration: 0.8s; |
|||
transition-duration: 0.8s; |
|||
|
|||
-webkit-transform: rotate(0deg); |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-ms-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
.ui.rotate.reveal > .visible.content, |
|||
.ui.rotate.right.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom right; |
|||
-moz-transform-origin: bottom right; |
|||
-o-transform-origin: bottom right; |
|||
-ms-transform-origin: bottom right; |
|||
transform-origin: bottom right; |
|||
} |
|||
.ui.rotate.reveal:hover > .visible.content, |
|||
.ui.rotate.right.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(110deg); |
|||
-moz-transform: rotate(110deg); |
|||
-o-transform: rotate(110deg); |
|||
-ms-transform: rotate(110deg); |
|||
transform: rotate(110deg); |
|||
} |
|||
|
|||
.ui.rotate.left.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom left; |
|||
-moz-transform-origin: bottom left; |
|||
-o-transform-origin: bottom left; |
|||
-ms-transform-origin: bottom left; |
|||
transform-origin: bottom left; |
|||
} |
|||
.ui.rotate.left.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(-110deg); |
|||
-moz-transform: rotate(-110deg); |
|||
-o-transform: rotate(-110deg); |
|||
-ms-transform: rotate(-110deg); |
|||
transform: rotate(-110deg); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.reveal { |
|||
opacity: 1 !important; |
|||
} |
|||
.ui.disabled.reveal > .content { |
|||
-webkit-transition: none !important; |
|||
-moz-transition: none !important; |
|||
-o-transition: none !important; |
|||
-ms-transition: none !important; |
|||
transition: none !important; |
|||
} |
|||
.ui.disabled.reveal:hover > .visible.content { |
|||
position: static !important; |
|||
display: block !important; |
|||
opacity: 1 !important; |
|||
top: 0 !important; |
|||
left: 0 !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
transform: none !important; |
|||
} |
|||
.ui.disabled.reveal:hover > .hidden.content { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Masked |
|||
---------------*/ |
|||
|
|||
.ui.masked.reveal { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Instant |
|||
---------------*/ |
|||
|
|||
.ui.instant.reveal > .content { |
|||
-webkit-transition-delay: 0s !important; |
|||
-moz-transition-delay: 0s !important; |
|||
-o-transition-delay: 0s !important; |
|||
-ms-transition-delay: 0s !important; |
|||
transition-delay: 0s !important; |
|||
} |
|||
@ -0,0 +1,275 @@ |
|||
/* |
|||
* # Semantic Search |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Search |
|||
*******************************/ |
|||
|
|||
.ui.search { |
|||
position: relative; |
|||
|
|||
text-shadow: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.ui.search input { |
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Button |
|||
---------------*/ |
|||
|
|||
.ui.search > .button { |
|||
position: relative; |
|||
z-index: 2; |
|||
float: right; |
|||
margin: 0px 0px 0px -15px; |
|||
padding: 6px 15px 7px; |
|||
-webkit-border-radius: 0px 15px 15px 0px; |
|||
-moz-border-radius: 0px 15px 15px 0px; |
|||
border-radius: 0px 15px 15px 0px; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Results |
|||
---------------*/ |
|||
|
|||
.ui.search .results { |
|||
display: none; |
|||
|
|||
position: absolute; |
|||
z-index: 999; |
|||
top: 100%; |
|||
left: 0px; |
|||
|
|||
overflow: hidden; |
|||
background-color: #FFFFFF; |
|||
|
|||
margin-top: 0.5em; |
|||
width: 380px; |
|||
font-size: 0.875em; |
|||
line-height: 1.2; |
|||
color: #555555; |
|||
|
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.search .result { |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
padding: 0.5em 1em; |
|||
} |
|||
.ui.search .result:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.search .result .image { |
|||
background: #F0F0F0; |
|||
margin-right: 10px; |
|||
float: left; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
width: 38px; |
|||
height: 38px; |
|||
} |
|||
.ui.search .result .image img { |
|||
display: block; |
|||
width: 38px; |
|||
height: 38px; |
|||
} |
|||
.ui.search .result .image ~ .info { |
|||
float: none; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.ui.search .result .info { |
|||
float: left; |
|||
} |
|||
.ui.search .result .title { |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .result .description { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.ui.search .result .price { |
|||
float: right; |
|||
color: #5BBD72; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*-------------- |
|||
Message |
|||
---------------*/ |
|||
|
|||
.ui.search .message { |
|||
padding: 1em; |
|||
} |
|||
.ui.search .message .text .title { |
|||
margin: 0em 0em 0.5rem; |
|||
|
|||
font-size: 1.25rem; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .message .text .description { |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Categories |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category { |
|||
background-color: #FAFAFA; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-transition: background 0.2s ease-in; |
|||
-moz-transition: background 0.2s ease-in; |
|||
-o-transition: background 0.2s ease-in; |
|||
-ms-transition: background 0.2s ease-in; |
|||
transition: background 0.2s ease-in; |
|||
} |
|||
.ui.search .results .category:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
.ui.search .results .category > .name { |
|||
float: left; |
|||
padding: 12px 0px 0px 8px; |
|||
font-weight: bold; |
|||
color: #777777; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.search .results .category .result { |
|||
background-color: #FFFFFF; |
|||
margin-left: 80px; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* View All Results */ |
|||
.ui.search .all { |
|||
display: block; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
background-color: #FAFAFA; |
|||
height: 2em; |
|||
line-height: 2em; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
font-weight: bold; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.search .result:hover, |
|||
.ui.search .category .result:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.search .all:hover { |
|||
background-color: #F0F0F0; |
|||
} |
|||
|
|||
/*-------------- |
|||
Loading |
|||
---------------*/ |
|||
|
|||
.ui.search.loading .input .icon { |
|||
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
|||
} |
|||
.ui.search.loading .input .icon:before, |
|||
.ui.search.loading .input .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category.active { |
|||
background-color: #F1F1F1; |
|||
} |
|||
.ui.search .results .category.active > .name { |
|||
color: #333333; |
|||
} |
|||
|
|||
.ui.search .result.active, |
|||
.ui.search .category .result.active { |
|||
background-color: #FBFBFB; |
|||
} |
|||
.ui.search .result.active .title { |
|||
color: #000000; |
|||
} |
|||
.ui.search .result.active .description { |
|||
color: #555555; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/* Large */ |
|||
.ui.search .large.result .image, |
|||
.ui.search .large.result .image img { |
|||
width: 50px; |
|||
height: 50px; |
|||
} |
|||
.ui.search .large.results .indented.info { |
|||
margin-left: 65px; |
|||
} |
|||
.ui.search .large.results .info .title { |
|||
font-size: 16px; |
|||
} |
|||
.ui.search .large.results .info .description { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
@ -0,0 +1,115 @@ |
|||
/* |
|||
* # Semantic Button |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Shape |
|||
*******************************/ |
|||
|
|||
.ui.shape { |
|||
position: relative; |
|||
|
|||
-webkit-perspective: 2000px; |
|||
-moz-perspective: 2000px; |
|||
-ms-perspective: 2000px; |
|||
perspective: 2000px; |
|||
} |
|||
|
|||
.ui.shape .sides { |
|||
-webkit-transform-style: preserve-3d; |
|||
-moz-transform-style: preserve-3d; |
|||
-ms-transform-style: preserve-3d; |
|||
transform-style: preserve-3d; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
opacity: 1; |
|||
width: 100%; |
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Animating |
|||
---------------*/ |
|||
|
|||
.ui.shape.animating .sides { |
|||
position: absolute; |
|||
} |
|||
.ui.shape .animating.side { |
|||
position: absolute; |
|||
width: 100%; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 100; |
|||
} |
|||
.ui.shape .hidden.side { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
CSS |
|||
---------------*/ |
|||
|
|||
.ui.shape.css { |
|||
-webkit-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-moz-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-o-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-ms-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
} |
|||
.ui.shape.css .sides { |
|||
-webkit-transition: all 0.6s ease-in-out; |
|||
-moz-transition: all 0.6s ease-in-out; |
|||
-o-transition: all 0.6s ease-in-out; |
|||
-ms-transition: all 0.6s ease-in-out; |
|||
transition: all 0.6s ease-in-out; |
|||
} |
|||
.ui.shape.css .side { |
|||
-webkit-transition: opacity 0.6s ease-in-out; |
|||
-moz-transition: opacity 0.6s ease-in-out; |
|||
-o-transition: opacity 0.6s ease-in-out; |
|||
-ms-transition: opacity 0.6s ease-in-out; |
|||
transition: opacity 0.6s ease-in-out; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.shape .active.side { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,147 @@ |
|||
/******************************* |
|||
Semantic Module: Sidebar |
|||
Author: Jack Lukic |
|||
Notes: First Commit March 25, 2013 |
|||
Sidebar Menu System |
|||
*******************************/ |
|||
|
|||
/******************************* |
|||
Sidebar |
|||
*******************************/ |
|||
|
|||
body { |
|||
-webkit-transition: |
|||
margin 0.3s ease, |
|||
-webkit-transform 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin 0.3s ease, |
|||
-moz-transform 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
} |
|||
|
|||
.ui.sidebar { |
|||
position: fixed; |
|||
|
|||
margin: 0 !important; |
|||
|
|||
width: 275px !important; |
|||
height: 100% !important; |
|||
|
|||
-webkit-border-radius: 0px !important; |
|||
-moz-border-radius: 0px !important; |
|||
border-radius: 0px !important; |
|||
|
|||
-ms-overflow-y: auto; |
|||
overflow-y: auto; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 999; |
|||
|
|||
-webkit-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.sidebar { |
|||
margin-left: -275px !important; |
|||
} |
|||
|
|||
.ui.right.sidebar { |
|||
left: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
.ui.top.sidebar { |
|||
margin: -40px 0px 0px 0px !important; |
|||
width: 100% !important; |
|||
height: 40px !important; |
|||
} |
|||
|
|||
.ui.bottom.sidebar { |
|||
width: 100% !important; |
|||
height: 40px !important; |
|||
top: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.sidebar { |
|||
margin-left: -275px !important; |
|||
} |
|||
|
|||
.ui.active.top.sidebar { |
|||
margin-top: 0px !important; |
|||
} |
|||
.ui.active.bottom.sidebar { |
|||
margin-top: -40px !important; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.floating.sidebar { |
|||
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.right.floating.sidebar { |
|||
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.top.floating.sidebar { |
|||
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.bottom.floating.sidebar { |
|||
-webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
/* |
|||
* # Semantic Button |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
UI Tabs |
|||
*******************************/ |
|||
|
|||
.ui.tab { |
|||
display: none; |
|||
} |
|||
.ui.tab.active, |
|||
.ui.tab.open { |
|||
display: block; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.tab.loading { |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: block; |
|||
min-height: 250px; |
|||
text-indent: -10000px; |
|||
} |
|||
.ui.tab.loading * { |
|||
position: relative !important; |
|||
left: -10000px !important; |
|||
} |
|||
.ui.tab.loading:after { |
|||
position: absolute; |
|||
top: 50px; |
|||
left: 50%; |
|||
content: 'Loading...'; |
|||
margin-left: -32px; |
|||
text-indent: 5px; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 75px; |
|||
background: url(../images/loader-large.gif) no-repeat 0px 0px; |
|||
visibility: visible; |
|||
} |
|||
@ -0,0 +1,839 @@ |
|||
/******************************* |
|||
Semantic Module: Transition |
|||
Author: Jack Lukic |
|||
Notes: First Commit March 25, 2013 |
|||
|
|||
CSS animation definitions for |
|||
transition module |
|||
|
|||
*******************************/ |
|||
|
|||
/* |
|||
Some transitions adapted from Animate CSS |
|||
https://github.com/daneden/animate.css |
|||
*/ |
|||
|
|||
|
|||
.ui.transition { |
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
-o-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
|
|||
-webkit-animation-iteration-count: 1; |
|||
-moz-animation-iteration-count: 1; |
|||
-ms-animation-iteration-count: 1; |
|||
-o-animation-iteration-count: 1; |
|||
animation-iteration-count: 1; |
|||
|
|||
-webkit-animation-duration: 1s; |
|||
-moz-animation-duration: 1s; |
|||
-ms-animation-duration: 1s; |
|||
-o-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
|
|||
animation-timing-function: ease; |
|||
-webkit-animation-timing-function: ease; |
|||
|
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
|
|||
-webkit-transform: translateZ(0); |
|||
-moz-transform: translateZ(0); |
|||
-ms-transform: translateZ(0); |
|||
-o-transform: translateZ(0); |
|||
transform: translateZ(0); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Loading */ |
|||
.ui.loading.transition { |
|||
position: absolute; |
|||
top: -999999px; |
|||
left: -99999px; |
|||
} |
|||
|
|||
/* Hidden */ |
|||
.ui.hidden.transition { |
|||
display: none; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.visible.transition { |
|||
display: block; |
|||
visibility: visible; |
|||
} |
|||
|
|||
|
|||
/* Direction */ |
|||
.ui.out.transition { |
|||
-webkit-animation-direction: reverse; |
|||
-moz-animation-direction: reverse; |
|||
-o-animation-direction: reverse; |
|||
animation-direction: reverse; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.disabled.transition { |
|||
-webkit-animation-play-state: paused; |
|||
-moz-animation-play-state: paused; |
|||
-ms-animation-play-state: paused; |
|||
-o-animation-play-state: paused; |
|||
animation-play-state: paused; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.looping.transition { |
|||
-webkit-animation-iteration-count: infinite; |
|||
-moz-animation-iteration-count: infinite; |
|||
-ms-animation-iteration-count: infinite; |
|||
-o-animation-iteration-count: infinite; |
|||
animation-iteration-count: infinite; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
.ui.flash.transition { |
|||
-webkit-animation-name: flash; |
|||
-moz-animation-name: flash; |
|||
-o-animation-name: flash; |
|||
animation-name: flash; |
|||
} |
|||
.ui.shake.transition { |
|||
-webkit-animation-name: shake; |
|||
-moz-animation-name: shake; |
|||
-o-animation-name: shake; |
|||
animation-name: shake; |
|||
} |
|||
.ui.bounce.transition { |
|||
-webkit-animation-name: bounce; |
|||
-moz-animation-name: bounce; |
|||
-o-animation-name: bounce; |
|||
animation-name: bounce; |
|||
} |
|||
.ui.tada.transition { |
|||
-webkit-animation-name: tada; |
|||
-moz-animation-name: tada; |
|||
-o-animation-name: tada; |
|||
animation-name: tada; |
|||
} |
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
|||
.ui.pulse.transition { |
|||
-webkit-animation-name: pulse; |
|||
-moz-animation-name: pulse; |
|||
-o-animation-name: pulse; |
|||
animation-name: pulse; |
|||
} |
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
.ui.flip.transition.in, |
|||
.ui.flip.transition.out { |
|||
-webkit-perspective: 2000px; |
|||
perspective: 2000px; |
|||
} |
|||
.ui.horizontal.flip.transition.in, |
|||
.ui.horizontal.flip.transition.out { |
|||
-webkit-animation-name: horizontalFlip; |
|||
-moz-animation-name: horizontalFlip; |
|||
-o-animation-name: horizontalFlip; |
|||
animation-name: horizontalFlip; |
|||
} |
|||
.ui.vertical.flip.transition.in, |
|||
.ui.vertical.flip.transition.out { |
|||
-webkit-animation-name: verticalFlip; |
|||
-moz-animation-name: verticalFlip; |
|||
-o-animation-name: verticalFlip; |
|||
animation-name: verticalFlip; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
.ui.fade.transition.in, |
|||
.ui.fade.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
.ui.fade.up.transition.in { |
|||
-webkit-animation-name: fadeUp; |
|||
-moz-animation-name: fadeUp; |
|||
-o-animation-name: fadeUp; |
|||
animation-name: fadeUp; |
|||
} |
|||
.ui.fade.up.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
.ui.fade.down.transition.in { |
|||
-webkit-animation-name: fadeDown; |
|||
-moz-animation-name: fadeDown; |
|||
-o-animation-name: fadeDown; |
|||
animation-name: fadeDown; |
|||
} |
|||
.ui.fade.down.transition.out { |
|||
-webkit-animation-name: fade; |
|||
-moz-animation-name: fade; |
|||
-o-animation-name: fade; |
|||
animation-name: fade; |
|||
} |
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
.ui.scale.transition.in, |
|||
.ui.scale.transition.out { |
|||
-webkit-animation-name: scale; |
|||
-moz-animation-name: scale; |
|||
-o-animation-name: scale; |
|||
animation-name: scale; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.down.transition.in, |
|||
.ui.slide.down.transition.out { |
|||
-webkit-animation-name: slide; |
|||
-moz-animation-name: slide; |
|||
-o-animation-name: slide; |
|||
animation-name: slide; |
|||
transform-origin: 50% 0%; |
|||
-ms-transform-origin: 50% 0%; |
|||
-webkit-transform-origin: 50% 0%; |
|||
} |
|||
.ui.slide.up.transition.in, |
|||
.ui.slide.up.transition.out { |
|||
-webkit-animation-name: slide; |
|||
-moz-animation-name: slide; |
|||
-o-animation-name: slide; |
|||
animation-name: slide; |
|||
transform-origin: 50% 100%; |
|||
-ms-transform-origin: 50% 100%; |
|||
-webkit-transform-origin: 50% 100%; |
|||
} |
|||
|
|||
@-moz-keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: scaleY(1); |
|||
} |
|||
} |
|||
@-webkit-keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: scaleY(1); |
|||
} |
|||
} |
|||
@keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scaleY(1); |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Animations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
/* Flash */ |
|||
@-webkit-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@-moz-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@-o-keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes flash { |
|||
0%, 50%, 100% { |
|||
opacity: 1; |
|||
} |
|||
25%, 75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
/* Shake */ |
|||
@-webkit-keyframes shake { |
|||
0%, 100% { |
|||
-webkit-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-webkit-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-webkit-transform: translateX(10px); |
|||
} |
|||
} |
|||
@-moz-keyframes shake { |
|||
0%, 100% { |
|||
-moz-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-moz-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-moz-transform: translateX(10px); |
|||
} |
|||
} |
|||
@-o-keyframes shake { |
|||
0%, 100% { |
|||
-o-transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
-o-transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
-o-transform: translateX(10px); |
|||
} |
|||
} |
|||
@keyframes shake { |
|||
0%, 100% { |
|||
transform: translateX(0); |
|||
} |
|||
10%, 30%, 50%, 70%, 90% { |
|||
transform: translateX(-10px); |
|||
} |
|||
20%, 40%, 60%, 80% { |
|||
transform: translateX(10px); |
|||
} |
|||
} |
|||
|
|||
/* Bounce */ |
|||
@-webkit-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-webkit-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-webkit-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@-moz-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-moz-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-moz-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-moz-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@-o-keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
-o-transform: translateY(0); |
|||
} |
|||
40% { |
|||
-o-transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
-o-transform: translateY(-15px); |
|||
} |
|||
} |
|||
@keyframes bounce { |
|||
0%, 20%, 50%, 80%, 100% { |
|||
transform: translateY(0); |
|||
} |
|||
40% { |
|||
transform: translateY(-30px); |
|||
} |
|||
60% { |
|||
transform: translateY(-15px); |
|||
} |
|||
} |
|||
|
|||
/* Tada */ |
|||
@-webkit-keyframes tada { |
|||
0% { |
|||
-webkit-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-webkit-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-webkit-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-webkit-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
@-moz-keyframes tada { |
|||
0% { |
|||
-moz-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-moz-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-moz-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-moz-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-moz-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
@-o-keyframes tada { |
|||
0% { |
|||
-o-transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
-o-transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
-o-transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
-o-transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
-o-transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes tada { |
|||
0% { |
|||
transform: scale(1); |
|||
} |
|||
10%, 20% { |
|||
transform: scale(0.9) rotate(-3deg); |
|||
} |
|||
30%, 50%, 70%, 90% { |
|||
transform: scale(1.1) rotate(3deg); |
|||
} |
|||
40%, 60%, 80% { |
|||
transform: scale(1.1) rotate(-3deg); |
|||
} |
|||
100% { |
|||
transform: scale(1) rotate(0); |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes pulse { |
|||
0% { |
|||
-webkit-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-webkit-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@-o-keyframes pulse { |
|||
0% { |
|||
-o-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-o-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-o-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@-moz-keyframes pulse { |
|||
0% { |
|||
-moz-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
-moz-transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
-moz-transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0% { |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
50% { |
|||
transform: scale(0.9); |
|||
opacity: 0.7; |
|||
} |
|||
100% { |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
/* Horizontal */ |
|||
@-webkit-keyframes horizontalFlip { |
|||
0% { |
|||
-webkit-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes horizontalFlip { |
|||
0% { |
|||
-moz-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes horizontalFlip { |
|||
0% { |
|||
-o-transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes horizontalFlip { |
|||
0% { |
|||
transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
/* Horizontal */ |
|||
@-webkit-keyframes horizontalFlipOut { |
|||
0% { |
|||
-webkit-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes horizontalFlipOut { |
|||
0% { |
|||
-moz-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes horizontalFlipOut { |
|||
0% { |
|||
-o-transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes horizontalFlipOut { |
|||
0% { |
|||
transform: rotateY(0deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateY(90deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* Vertical */ |
|||
@-webkit-keyframes verticalFlip { |
|||
0% { |
|||
-webkit-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-webkit-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes verticalFlip { |
|||
0% { |
|||
-moz-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-moz-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes verticalFlip { |
|||
0% { |
|||
-o-transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
-o-transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes verticalFlip { |
|||
0% { |
|||
transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
/* Fade */ |
|||
@-webkit-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-moz-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@-o-keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* Fade Up */ |
|||
@-webkit-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
} |
|||
@-moz-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: translateY(0); |
|||
} |
|||
} |
|||
@-o-keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* Fade Down */ |
|||
@-webkit-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
} |
|||
@-moz-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: translateY(0); |
|||
} |
|||
} |
|||
@-o-keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
/* Scale */ |
|||
@-webkit-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: scale(1); |
|||
} |
|||
} |
|||
@-moz-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: scale(1); |
|||
} |
|||
} |
|||
@-o-keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: scale(1); |
|||
} |
|||
} |
|||
@keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
/* |
|||
* # Semantic Video |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: July 30, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Video |
|||
*******************************/ |
|||
|
|||
.ui.video { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* Placeholder Image */ |
|||
.ui.video .placeholder { |
|||
background-color: #333333; |
|||
} |
|||
|
|||
/* Play Icon Overlay */ |
|||
.ui.video .play { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 10; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
|||
filter: alpha(opacity=60); |
|||
opacity: 0.6; |
|||
|
|||
-webkit-transition: opacity 0.3s; |
|||
-moz-transition: opacity 0.3s; |
|||
-o-transition: opacity 0.3s; |
|||
-ms-transition: opacity 0.3s; |
|||
transition: opacity 0.3s; |
|||
} |
|||
.ui.video .play.icon:before { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 11; |
|||
|
|||
font-size: 6rem; |
|||
margin: -3rem 0em 0em -3rem; |
|||
color: #FFFFFF; |
|||
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
.ui.video .placeholder { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* IFrame Embed */ |
|||
.ui.video .embed { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.video .play:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.video.active .play, |
|||
.ui.video.active .placeholder { |
|||
display: none; |
|||
} |
|||
.ui.video.active .embed { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,221 @@ |
|||
/* |
|||
* # Semantic Comment View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Comments |
|||
---------------*/ |
|||
|
|||
.ui.comments { |
|||
|
|||
|
|||
} |
|||
.ui.comments a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Comment |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment { |
|||
position: relative; |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
} |
|||
.ui.comments .comment:first-child { |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Avatar (Optional) |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .avatar { |
|||
display: block; |
|||
float: left; |
|||
width: 4em; |
|||
} |
|||
.ui.comments .comment .avatar img { |
|||
display: block; |
|||
margin: 0em auto; |
|||
|
|||
width: 3em; |
|||
height: 3em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment > .content, |
|||
.ui.comments .comment > .avatar { |
|||
display: block; |
|||
} |
|||
.ui.comments .comment .avatar ~ .content { |
|||
padding: 0em 1em; |
|||
} |
|||
|
|||
/* If there is an avatar move content over */ |
|||
.ui.comments .comment > .avatar ~ .content { |
|||
padding-top: 0.25em; |
|||
margin-left: 3.5em; |
|||
} |
|||
|
|||
.ui.comments .comment .metadata { |
|||
display: inline-block; |
|||
margin-left: 0.3em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.comments .comment .metadata > * { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Comment Text |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .text { |
|||
margin: 0.25em 0em 0.5em; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/*-------------------- |
|||
User Actions |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .actions { |
|||
font-size: 0.9em; |
|||
} |
|||
.ui.comments .comment .actions a { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.comments .comment .actions a.active, |
|||
.ui.comments .comment .actions a:hover { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Reply Form |
|||
---------------------*/ |
|||
|
|||
.ui.comments .reply.form { |
|||
margin-top: 0.75em; |
|||
width: 100%; |
|||
max-width: 30em; |
|||
} |
|||
.ui.comments .comment .reply.form { |
|||
margin-left: 2em; |
|||
} |
|||
.ui.comments > .reply.form { |
|||
margin-top: 1.5em; |
|||
max-width: 40em; |
|||
} |
|||
.ui.comments .reply.form textarea { |
|||
height: 12em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Nested Comments |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .comments { |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
padding-bottom: 1em; |
|||
} |
|||
.ui.comments .comment .comments:before{ |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
} |
|||
/* One Deep */ |
|||
.ui.comments > .comment .comments { |
|||
margin-left: 2em; |
|||
|
|||
} |
|||
/* Two Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.75em; |
|||
} |
|||
/* Three Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.5em; |
|||
} |
|||
/* Four Deep or more */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Threaded |
|||
---------------------*/ |
|||
|
|||
.ui.threaded.comments .comment .comments { |
|||
margin-left: 2em !important; |
|||
padding-left: 2em !important; |
|||
|
|||
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Minimal |
|||
---------------------*/ |
|||
|
|||
.ui.minimal.comments .comment .actions { |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.1s ease-out; |
|||
-moz-transition: opacity 0.1s ease-out; |
|||
-o-transition: opacity 0.1s ease-out; |
|||
-ms-transition: opacity 0.1s ease-out; |
|||
transition: opacity 0.1s ease-out; |
|||
|
|||
-webkit-transition-delay: 0.1s; |
|||
-moz-transition-delay: 0.1s; |
|||
-o-transition-delay: 0.1s; |
|||
-ms-transition-delay: 0.1s; |
|||
transition-delay: 0.1s; |
|||
} |
|||
.ui.minimal.comments .comment > .content:hover > .actions { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
.ui.small.comments { |
|||
font-size: 0.875em; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
/* |
|||
* # Activity Feed View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 22, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Activity Feed |
|||
*******************************/ |
|||
|
|||
.ui.feed { |
|||
|
|||
} |
|||
|
|||
.ui.feed a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.feed, |
|||
.ui.feed .event, |
|||
.ui.feed .label, |
|||
.ui.feed .content, |
|||
.ui.feed .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* Event */ |
|||
.ui.feed .event { |
|||
width: 100%; |
|||
display: table; |
|||
padding: 1em; |
|||
} |
|||
.ui.feed .event:first-child { |
|||
border-top: 0px; |
|||
} |
|||
.ui.feed .event:last-child { |
|||
margin-bottom: 1em; |
|||
} |
|||
|
|||
/* Event Label */ |
|||
.ui.feed .label { |
|||
width: 3em; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
} |
|||
.ui.feed .label .icon { |
|||
font-size: 1.5em; |
|||
margin: 0em; |
|||
} |
|||
.ui.feed .label img { |
|||
width: 3em; |
|||
margin: 0em; |
|||
border-radius: 50em; |
|||
} |
|||
.ui.feed .label + .content { |
|||
padding: 0.75em 1em 0em; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.feed .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/* Date */ |
|||
.ui.feed .content .date { |
|||
float: right; |
|||
padding-left: 1em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/* Summary */ |
|||
.ui.feed .content .summary { |
|||
color: rgba(0, 0, 0, 0.75); |
|||
} |
|||
.ui.feed .content .summary img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 4em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/* Additional Information */ |
|||
.ui.feed .content .extra { |
|||
margin: 1em 0em 0em; |
|||
padding: 0.5em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.feed .content .extra.images { |
|||
|
|||
} |
|||
.ui.feed .content .extra.images img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 6em; |
|||
} |
|||
|
|||
.ui.feed .content .extra.text { |
|||
padding: 0.5em 1em; |
|||
border-left: 0.2em solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.feed { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.small.feed .label img { |
|||
width: 2.5em; |
|||
} |
|||
.ui.small.feed .label .icon { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.feed .event { |
|||
padding: 0.75em 0em; |
|||
} |
|||
.ui.small.feed .label + .content { |
|||
padding: 0.5em 0.5em 0; |
|||
} |
|||
.ui.small.feed .content .extra.images img { |
|||
width: 5em; |
|||
} |
|||
.ui.small.feed .content .extra { |
|||
margin: 0.5em 0em 0em; |
|||
} |
|||
.ui.small.feed .content .extra.text { |
|||
padding: 0.25em 0.5em; |
|||
} |
|||
@ -0,0 +1,641 @@ |
|||
/* |
|||
* # Semantic Item View |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.items { |
|||
margin: 1em 0em 0em; |
|||
} |
|||
.ui.items:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.items:last-child { |
|||
margin-bottom: -1em; |
|||
} |
|||
|
|||
/* Force Clearing */ |
|||
.ui.items:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.items > .row > .item, |
|||
.ui.items > .item { |
|||
display: block; |
|||
float: left; |
|||
position: relative; |
|||
top: 0px; |
|||
|
|||
width: 316px; |
|||
min-height: 375px; |
|||
margin: 0em 0.5em 2.5em; |
|||
padding: 0em; |
|||
|
|||
background-color: #FFFFFF; |
|||
line-height: 1.2; |
|||
font-size: 1em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-border-radius: 0.33em; |
|||
-webkit-border-radius: 0.33em; |
|||
border-radius: 0.33em; |
|||
|
|||
-webkit-transition: all 0.2s ease; |
|||
-moz-transition: all 0.2s ease; |
|||
-o-transition: all 0.2s ease; |
|||
-ms-transition: all 0.2s ease; |
|||
transition: all 0.2s ease; |
|||
|
|||
padding: 0.5em; |
|||
} |
|||
|
|||
.ui.items a.item, |
|||
.ui.items .item a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.items .item, |
|||
.ui.items .item > .image, |
|||
.ui.items .item > .image .overlay, |
|||
.ui.items .item > .content, |
|||
.ui.items .item > .content > .meta, |
|||
.ui.items .item > .content > .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.items .item > .image { |
|||
display: block; |
|||
position: relative; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.items .item > .image > img { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 0.22em; |
|||
-moz-border-radius: 0.22em; |
|||
border-radius: 0.22em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
.ui.items .item > .content { |
|||
padding: 0.75em 0.5em; |
|||
} |
|||
.ui.items .item > .content > .name { |
|||
display: block; |
|||
|
|||
font-size: 1.25em; |
|||
font-weight: bold; |
|||
margin-bottom: 0.2em; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.items .item > .content > .description { |
|||
clear: both; |
|||
margin: 0em 0em; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
.ui.items .item > .content > .description p { |
|||
margin: 0em 0em 0.2em; |
|||
} |
|||
.ui.items .item > .content > .description p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.items .item .meta { |
|||
float: right; |
|||
color: rgba(0, 0, 0, 0.35); |
|||
} |
|||
.ui.items .item > .content > .meta + .name { |
|||
float: left; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
/*-----star----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .star.label:hover::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/* active */ |
|||
.ui.items .item .star.label.active::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/*-----like----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .like.label:hover::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label:hover .icon { |
|||
color: #EF404A |
|||
} |
|||
/* active */ |
|||
.ui.items .item .like.label.active::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active .icon { |
|||
color: #EF404A |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Extra |
|||
---------------*/ |
|||
|
|||
.ui.items .item .extra { |
|||
position: absolute; |
|||
width: 100%; |
|||
padding: 0em 0.5em; |
|||
bottom: -2em; |
|||
left: 0em; |
|||
height: 1.5em; |
|||
color: rgba(0, 0, 0, 0.25); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.items .item .extra > img { |
|||
display: inline-block; |
|||
border-radius: 500px 500px 500px 500px; |
|||
margin-right: 0.25em; |
|||
vertical-align: middle; |
|||
width: 2em; |
|||
} |
|||
.ui.items .item .extra .left { |
|||
float: left; |
|||
} |
|||
.ui.items .item .extra .right { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.items .item:hover { |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
|
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.items .item:hover .extra { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.items .item:nth-of-type(n+1):hover { |
|||
border-bottom-color: #6ECFF5 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+2):hover { |
|||
border-bottom-color: #5C6166 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+3):hover { |
|||
border-bottom-color: #A1CF64 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+4):hover { |
|||
border-bottom-color: #D95C5C !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+5):hover { |
|||
border-bottom-color: #564F8A !important; |
|||
} |
|||
.ui.items .item:nth-of-type(n+6):hover { |
|||
border-bottom-color: #00B5AD !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Connected |
|||
---------------*/ |
|||
|
|||
.ui.connected.items { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0em !important; |
|||
margin-right: 0em !important; |
|||
} |
|||
.ui.connected.items > .row > .item, |
|||
.ui.connected.items > .item { |
|||
float: none; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
height: auto; |
|||
border-radius: 0px; |
|||
margin: 0em; |
|||
width: 33.33%; |
|||
} |
|||
.ui.connected.items > .row { |
|||
display: table; |
|||
margin: 0.5em 0em; |
|||
} |
|||
.ui.connected.items > .row:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* Borders */ |
|||
.ui.connected.items > .item, |
|||
.ui.connected.items > .row:last-child > .item { |
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:first-child, |
|||
.ui.connected.items > .item:first-child { |
|||
border-radius: 0em 0em 0em 0.33em; |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:last-child, |
|||
.ui.connected.items > .item:last-child { |
|||
border-radius: 0em 0em 0.33em 0em; |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.connected.items .item:hover { |
|||
border-bottom-width: 0.2em; |
|||
} |
|||
|
|||
|
|||
/* Item Count */ |
|||
.ui.one.connected.items > .row > .item, |
|||
.ui.one.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 2%; |
|||
padding-right: 2%; |
|||
} |
|||
.ui.two.connected.items > .row > .item, |
|||
.ui.two.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.three.connected.items > .row > .item, |
|||
.ui.three.connected.items > .item { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.four.connected.items > .row > .item, |
|||
.ui.four.connected.items > .item { |
|||
width: 25%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.five.connected.items > .row > .item, |
|||
.ui.five.connected.items > .item { |
|||
width: 20%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.six.connected.items > .row > .item, |
|||
.ui.six.connected.items > .item { |
|||
width: 16.66%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.seven.connected.items > .row > .item, |
|||
.ui.seven.connected.items > .item { |
|||
width: 14.28%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.eight.connected.items > .row > .item, |
|||
.ui.eight.connected.items > .item { |
|||
width: 12.5%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.nine.connected.items > .row > .item, |
|||
.ui.nine.connected.items > .item { |
|||
width: 11.11%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.ten.connected.items > .row > .item, |
|||
.ui.ten.connected.items > .item { |
|||
width: 10%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.eleven.connected.items > .row > .item, |
|||
.ui.eleven.connected.items > .item { |
|||
width: 9.09%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.twelve.connected.items > .row > .item, |
|||
.ui.twelve.connected.items > .item { |
|||
width: 8.3333%; |
|||
padding-left: 0.1%; |
|||
padding-right: 0.1%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 600px) { |
|||
.ui.stackable.items { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.items .item { |
|||
margin: 0em 2em 1em !important; |
|||
display: block !important; |
|||
width: auto !important; |
|||
padding: 0% !important; |
|||
} |
|||
} |
|||
|
|||
/*-------------------- |
|||
Horizontal |
|||
---------------------*/ |
|||
.ui.horizontal.items > .item, |
|||
.ui.items > .horizontal.item { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .image |
|||
.ui.items > .horizontal.item > .image { |
|||
display: table-cell; |
|||
width: 50%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content, |
|||
.ui.items > .horizontal.item > .image + .content { |
|||
width: 50%; |
|||
display: table-cell; |
|||
} |
|||
.ui.horizontal.items > .item > .content, |
|||
.ui.items > .horizontal.item > .content { |
|||
padding: 1% 1.7% 11% 3%; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .meta, |
|||
.ui.items > .horizontal.item > .meta { |
|||
position: absolute; |
|||
padding: 0%; |
|||
bottom: 7%; |
|||
left: 3%; |
|||
width: 94%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content + .meta, |
|||
.ui.items > .horizontal.item > .image + .content + .meta { |
|||
bottom: 7%; |
|||
left: 53%; |
|||
width: 44%; |
|||
} |
|||
|
|||
|
|||
.ui.horizontal.items > .item .avatar, |
|||
.ui.items > .horizontal.item .avatar { |
|||
width: 11.5%; |
|||
} |
|||
|
|||
.ui.items > .item .avatar { |
|||
max-width: 25px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item Count |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.one.items { |
|||
margin-left: -2%; |
|||
margin-right: -2%; |
|||
} |
|||
.ui.one.items > .item { |
|||
width: 100%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
.ui.two.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.items > .item { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.two.items > .item:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.three.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.items > .item { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.three.items > .item:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.four.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.items > .item { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.four.items > .item:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.five.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.items > .item { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.five.items > .item:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.six.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.items > .item { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.six.items > .item:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.seven.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.items > .item { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.items > .item:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eight.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.items > .item { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.items > .item:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.nine.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.items > .item { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.items > .item:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.ten.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.items > .item { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.items > .item:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eleven.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.items > .item { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.items > .item:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.twelve.items { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.items > .item { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.items > .item:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
@ -0,0 +1,508 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
|
|||
ul.ui.list, |
|||
ol.ui.list, |
|||
.ui.list { |
|||
list-style-type: none; |
|||
margin: 1em 0em; |
|||
padding: 0em; |
|||
} |
|||
ul.ui.list ul, |
|||
ol.ui.list ol, |
|||
.ui.list .list { |
|||
margin: 0em; |
|||
padding: 0.5em 0em 0.5em 1em; |
|||
} |
|||
|
|||
ul.ui.list:first-child, |
|||
ol.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
ul.ui.list:last-child, |
|||
ol.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* List Item */ |
|||
ul.ui.list li, |
|||
ol.ui.list li, |
|||
.ui.list .item { |
|||
display: list-item; |
|||
list-style-type: none; |
|||
list-style-position: inside; |
|||
|
|||
padding: 0.3em 0em; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.list .item > .icon { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
.ui.list .item > .icon + .content { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.list .item > img { |
|||
display: inline-block; |
|||
width: 2em; |
|||
margin-right: 0.5em; |
|||
|
|||
vertical-align: middle; |
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.list .item > .content { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
/* Link */ |
|||
.ui.list a { |
|||
cursor: pointer; |
|||
} |
|||
.ui.list a .icon { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.list .header { |
|||
font-weight: bold; |
|||
} |
|||
.ui.list .description { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
/* Floated Content */ |
|||
.ui.list .item > .left.floated { |
|||
float: left; |
|||
} |
|||
.ui.list .item > .right.floated { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.list { |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
} |
|||
.ui.horizontal.list .item { |
|||
display: inline-block; |
|||
margin-left: 1em; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
.ui.horizontal.list .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.link.list a { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.link.list a:hover { |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.link.list a:active { |
|||
color: rgba(0, 0, 0, 0.9); |
|||
} |
|||
.ui.link.list .active { |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
/*------------------- |
|||
Selection |
|||
--------------------*/ |
|||
|
|||
.ui.selection.list .item { |
|||
cursor: pointer; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
padding: 0.5em; |
|||
|
|||
-webkit-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-moz-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-o-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
-ms-transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
} |
|||
.ui.selection.list .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list:not(.horizontal, .ordered) .item:hover { |
|||
padding-left: 1em; |
|||
} |
|||
.ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { |
|||
padding-left: 0.5em; |
|||
} |
|||
|
|||
.ui.selection.list .item:active { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list .item.active { |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
|
|||
ul.ui.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1em; |
|||
} |
|||
ul.ui.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
left: -1em; |
|||
content: '•'; |
|||
|
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
ul.ui.list ul, |
|||
.ui.bulleted.list .list { |
|||
padding-left: 1.2em; |
|||
} |
|||
|
|||
/* Horizontal Bulleted */ |
|||
ul.ui.horizontal.bulleted.list, |
|||
.ui.horizontal.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li, |
|||
.ui.horizontal.bulleted.list .item { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:before, |
|||
.ui.horizontal.bulleted.list .item:before { |
|||
left: -0.9em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child, |
|||
.ui.horizontal.bulleted.list .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child::before, |
|||
.ui.horizontal.bulleted.list .item:first-child::before { |
|||
display: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordered |
|||
--------------------*/ |
|||
|
|||
ol.ui.list, |
|||
.ui.ordered.list { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
list-style-type: none; |
|||
} |
|||
ol.ui.list li, |
|||
.ui.ordered.list .item { |
|||
list-style-type: none; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
left: -2em; |
|||
|
|||
counter-increment: ordered; |
|||
content: counters(ordered, "."); |
|||
|
|||
text-align: right; |
|||
vertical-align: top; |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
ol.ui.list ol, |
|||
.ui.ordered.list .list { |
|||
counter-reset: ordered; |
|||
padding-left: 3em; |
|||
} |
|||
|
|||
ol.ui.list ol li:before, |
|||
.ui.ordered.list .list .item:before { |
|||
left: -2.5em; |
|||
} |
|||
|
|||
/* Horizontal Ordered */ |
|||
ol.ui.horizontal.list, |
|||
.ui.ordered.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.horizontal.list li:before, |
|||
.ui.ordered.horizontal.list .item:before { |
|||
position: static; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
|
|||
.ui.divided.list > .item, |
|||
.ui.divided.list > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.divided.list .item .menu .item { |
|||
border-width: 0px; |
|||
} |
|||
.ui.divided.list .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.divided.list .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.divided.list .list .item { |
|||
padding-left: 1em; |
|||
padding-right: 1em; |
|||
} |
|||
.ui.divided.list .list .item:first-child { |
|||
border-top-width: 1px; |
|||
} |
|||
|
|||
/* Divided bulleted */ |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Divided ordered */ |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.ordered.list > .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.divided.ordered.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.divided.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
|
|||
/* Divided horizontal */ |
|||
.ui.divided.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.horizontal.list .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6; |
|||
} |
|||
.ui.horizontal.divided.list .item:first-child { |
|||
border-left: none; |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
|
|||
.ui.celled.list > .item, |
|||
.ui.celled.list > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.celled.list > .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.celled.list .item .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.celled.list .item .list .item { |
|||
border-width: 0px; |
|||
} |
|||
.ui.celled.list .list .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Celled Bulleted */ |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.bulleted.list > .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.celled.bulleted.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Celled Ordered */ |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.celled.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
/* Celled Horizontal */ |
|||
.ui.horizontal.celled.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.horizontal.celled.list .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6; |
|||
} |
|||
.ui.horizontal.celled.list .item:last-child { |
|||
border-bottom: none; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.mini.list .item { |
|||
font-size: 0.8125rem; |
|||
} |
|||
.ui.tiny.list .item { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.small.list .item { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.large.list .item { |
|||
font-size: 1.125rem; |
|||
} |
|||
.ui.big.list .item { |
|||
font-size: 1.25rem; |
|||
} |
|||
.ui.huge.list .item { |
|||
font-size: 1.375rem; |
|||
} |
|||
.ui.massive.list .item { |
|||
font-size: 1.5rem; |
|||
} |
|||
Loading…
Reference in new issue