Browse Source

Updates popup title style, card

pull/13/head
Jack Lukic 11 years ago
parent
commit
1569b27212
2 changed files with 36 additions and 68 deletions
  1. 17
      node/src/files/overrides/views/card.css
  2. 87
      src/modules/popup.less

17
node/src/files/overrides/views/card.css

@ -47,6 +47,7 @@
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
z-index: 100;
} }
.ui.cards .card .dimmer .close, .ui.cards .card .dimmer .close,
.ui.card .dimmer .close { .ui.card .dimmer .close {
@ -69,14 +70,14 @@
padding: 0.6em; padding: 0.6em;
border-radius: 4px; border-radius: 4px;
} }
.ui.cards .card .dimmer .buttons .button,
.ui.card .dimmer .buttons .button {
.ui.cards .card .dimmer .buttons > *,
.ui.card .dimmer .buttons > * {
display: inline-block; display: inline-block;
margin-left: 2%; margin-left: 2%;
width: 48%; width: 48%;
} }
.ui.cards .card .dimmer .buttons .button:first-child,
.ui.card .dimmer .buttons .button:first-child {
.ui.cards .card .dimmer .buttons > :first-child,
.ui.card .dimmer .buttons > :first-child {
margin-left: 0em; margin-left: 0em;
} }
@ -135,6 +136,14 @@
display: block; display: block;
margin: 0em -0.5em -1em; margin: 0em -0.5em -1em;
} }
.ui.cards:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ui.cards .card { .ui.cards .card {
display: inline-block; display: inline-block;
margin: 0em 0.5em 1em; margin: 0em 0.5em 1em;

87
src/modules/popup.less

@ -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;
}
}
Loading…
Cancel
Save