From 3f531ea5ecd2a3a91b38ad304dddae21b6cd1fc3 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 17 Jul 2013 17:43:19 -0400 Subject: [PATCH] Updates popup title style, card Former-commit-id: 1569b27212f46d32a7e8867d5e27209b0b55e93c Former-commit-id: 12f649c69e6ab181a270256298406fe435a7c079 --- node/src/files/overrides/views/card.css | 17 +++-- src/modules/popup.less | 87 +++++++------------------ 2 files changed, 36 insertions(+), 68 deletions(-) diff --git a/node/src/files/overrides/views/card.css b/node/src/files/overrides/views/card.css index 92f2642c6..0574b0f95 100755 --- a/node/src/files/overrides/views/card.css +++ b/node/src/files/overrides/views/card.css @@ -47,6 +47,7 @@ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + z-index: 100; } .ui.cards .card .dimmer .close, .ui.card .dimmer .close { @@ -69,14 +70,14 @@ padding: 0.6em; 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; margin-left: 2%; 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; } @@ -135,6 +136,14 @@ display: block; margin: 0em -0.5em -1em; } +.ui.cards:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + .ui.cards .card { display: inline-block; margin: 0em 0.5em 1em; diff --git a/src/modules/popup.less b/src/modules/popup.less index 0513aa696..3f8e98f48 100755 --- a/src/modules/popup.less +++ b/src/modules/popup.less @@ -9,12 +9,9 @@ * * Released: April 17 2013 */ - - /******************************* Popup *******************************/ - .ui.popup { display: none; position: absolute; @@ -25,53 +22,44 @@ 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; - color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 1px 1px #DCDDDE; -moz-box-shadow: 0px 1px 1px #DCDDDE; box-shadow: 0px 1px 1px #DCDDDE; } - .ui.popup .header { margin: -0.8em -1.2em 0.8em; background-color: rgba(0, 0, 0, 0.05); padding: 0.8em 1.2em; - line-height: 1; font-weight: bold; color: rgba(0, 0, 0, 0.8); - -webkit-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; } - -.ui.popup .content { - -} - /* Default Interactions */ .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%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } - /*-------------- Spacing ---------------*/ - .ui.popup { margin: 0em; } @@ -87,35 +75,27 @@ .ui.popup.right.center { margin: 0em 0em 0em 0.75em; } - .ui.popup.center { margin-left: -1.25em; } - /*-------------- Pointer ---------------*/ - .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; @@ -127,9 +107,9 @@ 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; + -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; @@ -137,29 +117,26 @@ 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; + -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; + -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 { @@ -167,7 +144,6 @@ left: 1em; top: auto; right: auto; - margin-left: 0em; } .ui.top.right.popup:before { @@ -175,43 +151,33 @@ right: 1em; top: auto; left: auto; - margin-left: 0em; } - /*--- Left ---*/ -.ui.left.center.popup:before { +.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; + -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; + -moz-box-shadow: -1px 1px 1px #dcddde; + -webkit-box-shadow: -1px 1px 1px #dcddde; + box-shadow: -1px 1px 1px #dcddde; } - - /******************************* States *******************************/ - .ui.popup.loading { display: block; visibility: hidden; @@ -219,28 +185,21 @@ .ui.popup.active { display: block; } - /******************************* Variations *******************************/ - - /*-------------- Size ---------------*/ - .ui.small.popup { font-size: 0.75rem; } .ui.large.popup { font-size: 1rem; } - - /*-------------- Colors ---------------*/ - /* Black */ .ui.inverted.popup { background-color: #333333; @@ -253,4 +212,4 @@ } .ui.inverted.popup:before { background-color: #333333; -} \ No newline at end of file +}