mod/03_machines/lib/stylesheets/style_cards.scss in card-1.15.1 vs mod/03_machines/lib/stylesheets/style_cards.scss in card-1.15.2
- old
+ new
@@ -20,11 +20,11 @@
/* -- resets -- */
.card-frame,
.card-body,
.ALL {
- overflow: auto;
+ overflow: inherit;
white-space: normal;
}
/* NOTE: we recommend against styling ".card-slot", which is heavily used by javascript */
@@ -39,66 +39,135 @@
.edit_name-view .alert,
.btn.renamer-updater,
.confirm_update_all-view,
.follow-updater,
.admin-error-message,
-.labeled-view .card-menu-link {
+.labeled-view .card-menu-link {
display: none
}
/* -- card-headers and menus--*/
-
.card-header {
.card-header-title {
display: inline-block;
overflow: hidden;
+ span.header-icon {
+ margin: 0px 5px;
+ }
}
.toggler {
display: inline-block;
position: relative;
}
}
-.card-menu {
- display: none;
- position: absolute;
- z-index: 1005;
- li {
- white-space: nowrap;
+
+.menu-slot {
+ width:100%;
+ position: relative;
+
+ span.menu-item-label {
+ margin-left: 5px;
}
+
+ .card-menu {
+ position: absolute;
+ right: 5px;
+ top: 3px;
+ li {
+ white-space: nowrap;
+ text-align: left;
+ a {
+ color: #333;
+ }
+ }
+ .dropdown-menu {
+ right: -2px;
+ top: 18px;
+ min-width: 110px;
+ }
+ .dropdown-menu:before {
+ content: "";
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid white;
+ position: absolute;
+ top: -5px;
+ right: 2px;
+ }
+ }
+
+ .vertical-card-menu .dropdown-menu {
+ z-index: 2;
+ }
+
+ .horizontal-card-menu {
+ z-index: 1;
+ li {
+ height: 30px;
+ }
+ .btn {
+ padding: 6px 12px;
+ }
+ }
}
-.card-menu-link {
- margin-left: 5px;
- display: inline-block;
- float: right;
+
+.card-header-title {
+ margin-right: 3px;
}
+.dropdown-menu {
+ z-index: 1005;
+}
+
+.navbar.toolbar {
+ margin-bottom: 0;
+}
+
+.toolbar {
+ .navbar-text span.glyphicon, span.menu-item-label {
+ margin-left: 5px;
+ }
+}
+
+
/*-- closed and labeled views --*/
.closed-view {
- white-space: nowrap !important;
- overflow: hidden;
+ position: relative;
+ > .card-frame {
+ white-space: nowrap !important;
+ padding-right: 30px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: static;
+ }
+ .card-menu.btn-group {
+ display: none;
+ }
.card-header {
display: inline-block;
}
}
.closed-content {
display: inline;
white-space: nowrap !important;
-
+
table, thead, tbody, tr, th, td, p, h1, h2, h3, h4, h5, h6, ul, li, pre, ol, div, span, a, blockquote, img, label, i {
display: inline !important;
white-space: nowrap !important;
float: none !important;
}
- br, hr, input, textarea, object {
+ br, hr, input, textarea, object, :after, :before {
display: none !important;
}
}
-.labeled-view:hover .card-menu-link {
+.labeled-view:hover .card-menu {
display: inline-block;
}
/* -- change view --*/
@@ -128,11 +197,11 @@
}
.navbox-item-label {
float: left;
- position: relative;
+ position: relative;
}
/*-- misc --*/
.card-editor {
@@ -170,11 +239,11 @@
1. wagneer interface (sets, settings, rules)
2. editor interface (forms, fieldsets, menus, navbox, history)
3. views that by definition alter default styling (closed, labeled)
4. errors / warnings / notices
5. key default content for new installs (home page, sidebar)
-
+
Most colors are greyscale; any that aren't are explained with comments beginning with "NOTGREY"
Note that this CSS is taken from code so that it will be updated automatically with releases.
If you don't want certain rules, you may (a) override them, or (b) choose not to include this card
in your skin. Choosing (b) will mean your CSS will not be affected by automated updates.
@@ -183,73 +252,41 @@
/* -- resets -- */
.card-frame {
text-align: left;
font-weight: normal;
- font-style: normal;
+ font-style: normal;
}
/*-------------------- */
/*- DYNAMIC ELEMENTS - */
/*-------------------- */
-/* -- card menus -- */
-.card-menu {
- font-size: 11px;
- li {
- text-align: right;
- a {
- color: #333;
+/* related view (used by many menu items, such as "referred to by") */
+
+.related-view {
+ > .card-frame, & {
+ > .card-body {
+ background: #bbb;
+ padding: 5px;
+ > .ALL {
+ background: #fff;
+ > .card-header {
+ background: #ddd;
+ padding: 5px;
+ color: #000;
+ }
+ > .card-body {
+ padding: 8px 2%;
+ }
+ }
}
}
- .ui-menu-icon {
- float: left;
- margin-right: 5px;
- }
}
-.ui-menu .ui-menu-item {
- padding: 2px 0;
-}
-.card-menu-tappable {
- font-size: 18px;
- .ui-menu-icon {
- padding: 7px;
- display: inline-block;
- margin-right: 15px;
- background: #666;
- border-radius: 3px;
- -moz-border-radius: 3px;
- color: #fff;
- font-size: 10px;
- }
- .ui-menu-icon:after {
- content: '<';
- }
-}
-
-
-/* related view (used by many menu items, such as "referred to by") */
-
-.related-view > .card-body {
- background: #bbb;
- padding: 5px;
- > .ALL {
- background: #fff;
- > .card-header {
- background: #ddd;
- padding: 5px;
- color: #000;
- }
- > .card-body {
- padding: 8px 2%;
- }
- }
-}
-
/* navboxes */
.navbox-item-label {
font-size: 10px;
width: 50px;
@@ -367,19 +404,19 @@
margin-left: 4px;
vertical-align: middle;
display: inline-block;
position: relative;
}
-
+
.pointer-item-add {
margin-top: 10px;
}
-
+
.input-group-addon.handle {
padding-left: 1px;
padding-right: 1px;
-
+
.glyphicon-option-vertical.left {
margin-right: -7px;
}
.glyphicon-option-vertical.right {
margin-left: -7px;
@@ -411,10 +448,13 @@
div.pointer-list,
div.search-result-list {
list-style: none;
padding: 5px 0;
margin: 0;
+ .closed-view > .card-frame {
+ margin-bottom: 0;
+ }
}
div.pointer-list .pointer-item,
div.search-result-list .search-result-item {
margin: 0;
}
@@ -461,18 +501,18 @@
.history-header nav.pagination {
display: inline;
float: left;
}
-.act {
+.act {
.head {
float: left;
margin-right:10px;
min-width: 175px;
}
.nr {
- float: left;
+ float: left;
}
.title {
float: left;
margin-left: 10px;
}
@@ -482,11 +522,11 @@
.time {
font-size: 8pt;
float:left;
clear:left;
}
-
+
.action-container {
overflow: hidden;
}
.action {
background-color: $action-white;
@@ -504,11 +544,11 @@
.toggle {
float: right;
margin: 12px 10px 0px 10px;
width: 20px;
}
-/*
+/*
.name-diff {
color: #000;
border-style: solid;
border-width: 1px;
border-color: #E4E4E4;
@@ -531,27 +571,27 @@
}
.summary {
padding: 6px 0px;
}
}
-
+
.arrow-down {
- width: 0;
- height: 0;
+ width: 0;
+ height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid $act-gray;
display: block;
}
.arrow-right {
- width: 0;
- height: 0;
+ width: 0;
+ height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 11px solid $act-gray;
display: block;
- }
+ }
.info {
font-style: italic;
}
}
@@ -602,11 +642,11 @@
margin: 0 0 4px 0;
}
#credit, /* these are both deprecated */
-.flash-notice {
+.flash-notice {
color: #333;
font-size: 1.1em;
background: #fff;
border: 1px solid #888;
margin-bottom: 15px;
@@ -641,11 +681,11 @@
li:nth-child(even) {
background: #ddd;
}
aside {
float: right;
- border: 1px solid #999;
+ border: 1px solid #999;
background: white;
width: 33%;
padding: 1em;
margin: 36px 16px 2px 5px;
overflow: auto;
@@ -834,10 +874,10 @@
border: 1px solid grey;
}
/* note said this is o non-ie browsers do better with image floats. looks over-specified.
html>body .open-view {
- width: auto;
+ width: auto;
}
*/
/* the following classes are here because they're scheduled for deprecation */
.faint {