|
@ -9,12 +9,9 @@ |
|
|
* |
|
|
* |
|
|
* Released: April 17 2013 |
|
|
* Released: April 17 2013 |
|
|
*/ |
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
/******************************* |
|
|
Popup |
|
|
Popup |
|
|
*******************************/ |
|
|
*******************************/ |
|
|
|
|
|
|
|
|
.ui.popup { |
|
|
.ui.popup { |
|
|
display: none; |
|
|
display: none; |
|
|
position: absolute; |
|
|
position: absolute; |
|
@ -25,53 +22,44 @@ |
|
|
border: 1px solid #DCDDDE; |
|
|
border: 1px solid #DCDDDE; |
|
|
max-width: 250px; |
|
|
max-width: 250px; |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
|
padding: 0.8em 1.2em; |
|
|
padding: 0.8em 1.2em; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
font-size: 0.875rem; |
|
|
font-size: 0.875rem; |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
|
|
|
|
|
-webkit-border-radius: 0.2em; |
|
|
-webkit-border-radius: 0.2em; |
|
|
-moz-border-radius: 0.2em; |
|
|
-moz-border-radius: 0.2em; |
|
|
border-radius: 0.2em; |
|
|
border-radius: 0.2em; |
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
|
|
|
|
|
|
|
|
-webkit-box-shadow: 0px 1px 1px #DCDDDE; |
|
|
-webkit-box-shadow: 0px 1px 1px #DCDDDE; |
|
|
-moz-box-shadow: 0px 1px 1px #DCDDDE; |
|
|
-moz-box-shadow: 0px 1px 1px #DCDDDE; |
|
|
box-shadow: 0px 1px 1px #DCDDDE; |
|
|
box-shadow: 0px 1px 1px #DCDDDE; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ui.popup .header { |
|
|
.ui.popup .header { |
|
|
margin: -0.8em -1.2em 0.8em; |
|
|
margin: -0.8em -1.2em 0.8em; |
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
padding: 0.8em 1.2em; |
|
|
padding: 0.8em 1.2em; |
|
|
|
|
|
|
|
|
line-height: 1; |
|
|
line-height: 1; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
|
|
|
-webkit-border-radius: 0.2em 0.2em 0em 0em; |
|
|
-webkit-border-radius: 0.2em 0.2em 0em 0em; |
|
|
-moz-border-radius: 0.2em 0.2em 0em 0em; |
|
|
-moz-border-radius: 0.2em 0.2em 0em 0em; |
|
|
border-radius: 0.2em 0.2em 0em 0em; |
|
|
border-radius: 0.2em 0.2em 0em 0em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ui.popup .content { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Default Interactions */ |
|
|
/* Default Interactions */ |
|
|
.ui.popup .ui.button, |
|
|
.ui.popup .ui.button, |
|
|
.ui.popup form.ui input |
|
|
|
|
|
.ui.popup form.ui textarea { |
|
|
|
|
|
|
|
|
.ui.popup form.ui input .ui.popup form.ui textarea { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
-webkit-box-sizing: border-box; |
|
|
-webkit-box-sizing: border-box; |
|
|
-moz-box-sizing: border-box; |
|
|
-moz-box-sizing: border-box; |
|
|
-ms-box-sizing: border-box; |
|
|
-ms-box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Spacing |
|
|
Spacing |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
.ui.popup { |
|
|
.ui.popup { |
|
|
margin: 0em; |
|
|
margin: 0em; |
|
|
} |
|
|
} |
|
@ -87,35 +75,27 @@ |
|
|
.ui.popup.right.center { |
|
|
.ui.popup.right.center { |
|
|
margin: 0em 0em 0em 0.75em; |
|
|
margin: 0em 0em 0em 0.75em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ui.popup.center { |
|
|
.ui.popup.center { |
|
|
margin-left: -1.25em; |
|
|
margin-left: -1.25em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Pointer |
|
|
Pointer |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
.ui.popup:before { |
|
|
.ui.popup:before { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
content: ""; |
|
|
content: ""; |
|
|
|
|
|
|
|
|
width: 0.75em; |
|
|
width: 0.75em; |
|
|
height: 0.75rem; |
|
|
height: 0.75rem; |
|
|
|
|
|
|
|
|
background-image: none; |
|
|
background-image: none; |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
|
-webkit-transform: rotate(45deg); |
|
|
-webkit-transform: rotate(45deg); |
|
|
-moz-transform: rotate(45deg); |
|
|
-moz-transform: rotate(45deg); |
|
|
transform: rotate(45deg); |
|
|
transform: rotate(45deg); |
|
|
z-index: 2; |
|
|
z-index: 2; |
|
|
|
|
|
|
|
|
-webkit-box-sizing: border-box; |
|
|
-webkit-box-sizing: border-box; |
|
|
-moz-box-sizing: border-box; |
|
|
-moz-box-sizing: border-box; |
|
|
-ms-box-sizing: border-box; |
|
|
-ms-box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
-webkit-box-shadow: 1px 1px 1px #DCDDDE; |
|
|
-webkit-box-shadow: 1px 1px 1px #DCDDDE; |
|
|
-moz-box-shadow: 1px 1px 1px #DCDDDE; |
|
|
-moz-box-shadow: 1px 1px 1px #DCDDDE; |
|
|
box-shadow: 1px 1px 1px #DCDDDE; |
|
|
box-shadow: 1px 1px 1px #DCDDDE; |
|
@ -127,9 +107,9 @@ |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
right: auto; |
|
|
right: auto; |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
-webkit-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
-moz-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
|
|
|
-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 { |
|
|
.ui.bottom.left.popup:before { |
|
|
top: -0.4em; |
|
|
top: -0.4em; |
|
@ -137,29 +117,26 @@ |
|
|
right: auto; |
|
|
right: auto; |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
margin-left: 0em; |
|
|
margin-left: 0em; |
|
|
-webkit-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
-moz-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
|
|
|
-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 { |
|
|
.ui.bottom.right.popup:before { |
|
|
top: -0.4em; |
|
|
top: -0.4em; |
|
|
right: 1em; |
|
|
right: 1em; |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
left: auto; |
|
|
left: auto; |
|
|
|
|
|
|
|
|
margin-left: 0em; |
|
|
margin-left: 0em; |
|
|
-webkit-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
-moz-box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
box-shadow: -1px -1px 1px #DCDDDE; |
|
|
|
|
|
|
|
|
-webkit-box-shadow: -1px -1px 1px #dcddde; |
|
|
|
|
|
-moz-box-shadow: -1px -1px 1px #dcddde; |
|
|
|
|
|
box-shadow: -1px -1px 1px #dcddde; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*--- Above ---*/ |
|
|
/*--- Above ---*/ |
|
|
.ui.top.center.popup:before { |
|
|
.ui.top.center.popup:before { |
|
|
top: auto; |
|
|
top: auto; |
|
|
right: auto; |
|
|
right: auto; |
|
|
bottom: -0.4em; |
|
|
bottom: -0.4em; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
|
|
|
|
|
|
margin-left: -0.4em; |
|
|
margin-left: -0.4em; |
|
|
} |
|
|
} |
|
|
.ui.top.left.popup:before { |
|
|
.ui.top.left.popup:before { |
|
@ -167,7 +144,6 @@ |
|
|
left: 1em; |
|
|
left: 1em; |
|
|
top: auto; |
|
|
top: auto; |
|
|
right: auto; |
|
|
right: auto; |
|
|
|
|
|
|
|
|
margin-left: 0em; |
|
|
margin-left: 0em; |
|
|
} |
|
|
} |
|
|
.ui.top.right.popup:before { |
|
|
.ui.top.right.popup:before { |
|
@ -175,43 +151,33 @@ |
|
|
right: 1em; |
|
|
right: 1em; |
|
|
top: auto; |
|
|
top: auto; |
|
|
left: auto; |
|
|
left: auto; |
|
|
|
|
|
|
|
|
margin-left: 0em; |
|
|
margin-left: 0em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*--- Left ---*/ |
|
|
/*--- Left ---*/ |
|
|
.ui.left.center.popup:before { |
|
|
|
|
|
|
|
|
.ui.left.center.popup:before { |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
right: -0.35em; |
|
|
right: -0.35em; |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
left: auto; |
|
|
left: auto; |
|
|
|
|
|
|
|
|
margin-top: -0.4em; |
|
|
margin-top: -0.4em; |
|
|
|
|
|
|
|
|
-moz-box-shadow: 1px -1px 1px #DCDDDE; |
|
|
|
|
|
-webkit-box-shadow: 1px -1px 1px #DCDDDE; |
|
|
|
|
|
box-shadow: 1px -1px 1px #DCDDDE; |
|
|
|
|
|
|
|
|
-moz-box-shadow: 1px -1px 1px #dcddde; |
|
|
|
|
|
-webkit-box-shadow: 1px -1px 1px #dcddde; |
|
|
|
|
|
box-shadow: 1px -1px 1px #dcddde; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*--- Right ---*/ |
|
|
/*--- Right ---*/ |
|
|
.ui.right.center.popup:before { |
|
|
.ui.right.center.popup:before { |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
left: -0.35em; |
|
|
left: -0.35em; |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
right: auto; |
|
|
right: auto; |
|
|
|
|
|
|
|
|
margin-top: -0.4em; |
|
|
margin-top: -0.4em; |
|
|
|
|
|
|
|
|
-moz-box-shadow: -1px 1px 1px #DCDDDE; |
|
|
|
|
|
-webkit-box-shadow: -1px 1px 1px #DCDDDE; |
|
|
|
|
|
box-shadow: -1px 1px 1px #DCDDDE; |
|
|
|
|
|
|
|
|
-moz-box-shadow: -1px 1px 1px #dcddde; |
|
|
|
|
|
-webkit-box-shadow: -1px 1px 1px #dcddde; |
|
|
|
|
|
box-shadow: -1px 1px 1px #dcddde; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
/******************************* |
|
|
States |
|
|
States |
|
|
*******************************/ |
|
|
*******************************/ |
|
|
|
|
|
|
|
|
.ui.popup.loading { |
|
|
.ui.popup.loading { |
|
|
display: block; |
|
|
display: block; |
|
|
visibility: hidden; |
|
|
visibility: hidden; |
|
@ -219,28 +185,21 @@ |
|
|
.ui.popup.active { |
|
|
.ui.popup.active { |
|
|
display: block; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/******************************* |
|
|
/******************************* |
|
|
Variations |
|
|
Variations |
|
|
*******************************/ |
|
|
*******************************/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Size |
|
|
Size |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
.ui.small.popup { |
|
|
.ui.small.popup { |
|
|
font-size: 0.75rem; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
} |
|
|
.ui.large.popup { |
|
|
.ui.large.popup { |
|
|
font-size: 1rem; |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Colors |
|
|
Colors |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
/* Black */ |
|
|
/* Black */ |
|
|
.ui.inverted.popup { |
|
|
.ui.inverted.popup { |
|
|
background-color: #333333; |
|
|
background-color: #333333; |
|
@ -253,4 +212,4 @@ |
|
|
} |
|
|
} |
|
|
.ui.inverted.popup:before { |
|
|
.ui.inverted.popup:before { |
|
|
background-color: #333333; |
|
|
background-color: #333333; |
|
|
} |
|
|
|
|
|
|
|
|
} |