card 1.15.pre → 1.15.pre2

data/mod/03_machines/lib/stylesheets/{standard.scss → style_cards.scss}

@@ -1,6 +1,169 @@
+/*!
+ * Wagn: [[http://wagn.org]]
+ * Copyright 2015 Grass Commons and other contributors; Licensed GPL
+ */
 
 /*
-This "standard" CSS provides styles for aspects of wagn sites not usually prioritized by skin designers.
+This minimal CSS is needed for basic Wagn functionality.
+
+Without the following, menus will be barely usable, "closed" view will not appear on one line,
+and certain hidden information will show up.
+
+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.
+*/
+
+/* -- resets -- */
+
+.card-frame,
+.card-body,
+.ALL {
+  overflow: auto;
+  white-space: normal;
+}
+
+/* NOTE: we recommend against styling ".card-slot", which is heavily used by javascript */
+
+
+/* --  hidden info -- */
+
+.ui-loader,
+.card-notice,
+.new-current-revision-id,
+.editor .revision-navigation,
+.editor .autosave-alert,
+.edit_name-view .alert,
+.btn.renamer-updater,
+.confirm_update_all-view,
+.follow-updater,
+.admin-error-message,
+.labeled-view .card-menu-link {  
+  display: none
+}
+
+
+/* -- card-headers and menus--*/
+
+.card-header {
+  .card-header-title {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .toggler {
+    display: inline-block;
+    position: relative;
+  }
+}
+.card-menu {
+  display: none;
+  position: absolute;
+  z-index: 1005;
+  li {
+    white-space: nowrap;
+  }
+}
+.card-menu-link {
+  margin-left: 5px;
+  display: inline-block; 
+  float: right;
+}
+
+
+/*-- closed and labeled views --*/
+
+.closed-view {
+  white-space: nowrap !important;
+  overflow: hidden;
+  .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 {
+    display: none !important;
+  }
+}
+
+.labeled-view:hover .card-menu-link {
+  display: inline-block;
+}
+
+/* -- change view --*/
+
+.change-view {
+  clear: both;
+  .last-update {
+    float:right;
+    text-align: right;
+    a {
+      white-space: nowrap;
+    }
+  }
+}
+
+
+
+/* -- template-editor (editing template rule inclusions inline) -- */
+
+.template_editor-view > div {
+  float: left;
+}
+.template-editor-close {
+  float: right;
+}
+.template_link-view {
+  display: inline;
+}
+
+
+.navbox-item-label {
+  float: left;
+  position: relative;  
+}
+
+
+/*-- misc --*/
+.card-editor {
+  white-space: normal;
+  padding-bottom: 15px;
+}
+pre,
+.TYPE-plain_text.card-content,
+.SELF-Xhead.card-content {
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+.missing-view a {
+  display: inline;
+}
+
+.SELF-Xstat > .card-content {
+  table {
+    width: 100%;
+  }
+  tr:nth-child(even) {
+    background: #eee;
+  }
+}
+
+
+/*
+The below provides styles for aspects of wagn sites not usually prioritized by skin designers.
 
 It includes basic styling for:
 
@@ -108,7 +271,7 @@ in your skin.  Choosing (b) will mean your CSS will not be affected by automated
 /*- ONE-LINE VIEWS   - */
 /*-------------------- */
 
-.closed-view {
+.closed-view.panel {
   margin: 0;
   width: 100%;
 }
@@ -154,39 +317,6 @@ a.missing-labeled {
 /*- EDIT INTERFACE   - */
 /*-------------------- */
 
-fieldset {
-  margin: 5px 1px;
-  border: 0;
-  
-  > .button-area {
-    width: 70%;
-    padding: 0 3px;
-    input,
-    button {
-      margin-right: 2%;
-    }
-  }
-    
-  > .editor {
-    width: 70%;
-    padding: 3px;
-    > input {
-      margin-left: 0;
-    }
-  }
-  
-  > legend {
-    text-align:right;
-    width: 25%;
-    padding: 3px;
-    margin: 0;
-    > .instruction {
-      text-align: right;
-      padding: 3px 0;
-    }
-  }
-}
-
 textarea,
 .content-editor > input[type=text],
 .content-editor > input[type=password],
@@ -277,24 +407,6 @@ textarea {
 /*- SEARCH & POINTER - */
 /*-------------------- */
 
-.pointer-radio {
-    display: inline-block;
-    width: 100%;
-    .form-control {
-      box-shadow: none;
-    }
-    input {
-        float: left;
-        width: auto;
-        margin: 0;
-    }
-    label {
-        float: left;
-        width: auto;
-        margin: 6px 8px;
-     }
-}
-
 
 div.pointer-list,
 div.search-result-list {
@@ -333,7 +445,6 @@ $diff-green: #41ad41;
 $diff-red: #ff5050;
 $action-white: #fdfdfd;
 $act-gray:  #b7b7b7;
-$act-background: #f3f3f3;
 
 .history-slot {
   overflow: hidden;
@@ -341,111 +452,107 @@ $act-background: #f3f3f3;
 }
 
 .history-header {
-    padding: 10px 10px 10px 10px;
+  padding: 10px;
+  background: $action-white;
 }
 .history-legend {
-    text-align: right;
-    float: right;
+  text-align: right;
 }
 .history-header nav.pagination {
-    display: inline;
-    text-align: left;
+  display: inline;
+  float: left;
 }
 
-.act {
-    padding: 10px 10px 10px 10px;
-    background-color: $act-background;
-    margin-bottom: 5px;
-    
-    .head {
-        float: left;
-        margin-right:10px;
-        min-width: 175px;
-    }
-    .nr {
-        float: left;   
-    }
-    .title {
-        float: left;
-        margin-left: 10px;
-    }
-    .actor {
-        float: left;
-    }
-    .time {
-        font-size: 8pt;
-        float:left;
-        clear:left;
-    }
-    
-    .action-container {
-        overflow: hidden;
-    }
-    .action {
-        background-color: $action-white;
-        margin: 5px 5px 2px 2px;
-        padding: 6px 5px 6px 5px;
-        overflow: hidden;
-    }
-    .ampel {
-        margin: 2px 0 0 4px;
-    }
-    .arrow {
-        margin: 0px 10px 0px 10px;
-        color: green;
-    }
-    .toggle {
-        float: right;
-        margin: 12px 10px 0px 10px;
-        width: 20px;
-    }
-
-    .name-diff {
-        border-style: solid;
-        border-width: 1px;
-        border-color: #E4E4E4;
-        padding: 3px 8px 3px 8px;
-        background-color: #EEEEEE;
-        margin-left: 3px;
-    }
-    .type-diff {
-        padding: 1px 0px 1px 3px;
-    }
-    .content-diff {
-        overflow: hidden;
-    }
+.act {    
+  .head {
+    float: left;
+    margin-right:10px;
+    min-width: 175px;
+  }
+  .nr {
+    float: left;   
+  }
+  .title {
+    float: left;
+    margin-left: 10px;
+  }
+  .actor {
+    float: left;
+  }
+  .time {
+    font-size: 8pt;
+    float:left;
+    clear:left;
+  }
+  
+  .action-container {
+    overflow: hidden;
+  }
+  .action {
+    background-color: $action-white;
+    margin: 5px 5px 2px 2px;
+    padding: 6px 5px 6px 5px;
+    overflow: hidden;
+  }
+  .ampel {
+    margin: 2px 0 0 4px;
+  }
+  .arrow {
+    margin: 0px 10px 0px 10px;
+    color: green;
+  }
+  .toggle {
+    float: right;
+    margin: 12px 10px 0px 10px;
+    width: 20px;
+  }
+/*  
+  .name-diff {
+    color: #000;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #E4E4E4;
+    padding: 3px 8px 3px 8px;
+    background-color: #EEEEEE;
+    margin-left: 3px;
+  }
+*/
+  .type-diff {
+    padding: 1px 0px 1px 3px;
+  }
+  .content-diff {
+    overflow: hidden;
+  }
 
-    .action {
-      .expanded {
-          clear:left;
-          padding: 14px 10px 14px 24px;
-      }
-      .summary {
-          padding: 6px 0px;
-      }
-    }
-    
-    .arrow-down {
-    	width: 0; 
-    	height: 0; 
-    	border-left: 7px solid transparent;
-    	border-right: 7px solid transparent;
-    	border-top: 11px solid $act-gray;
-        display: block;
+  .action {
+    .expanded {
+      clear:left;
+      padding: 14px 10px 14px 24px;
     }
-    .arrow-right {
-    	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;
-      color: #888;
+    .summary {
+      padding: 6px 0px;
     }
+  }
+ 
+  .arrow-down {
+  	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; 
+  	border-top: 7px solid transparent;
+  	border-bottom: 7px solid transparent;
+  	border-left: 11px solid $act-gray;
+    display: block;
+  } 
+  .info {
+    font-style: italic;
+  }
 }
 
 .diff-red {
@@ -486,11 +593,6 @@ $act-background: #f3f3f3;
   border-right: 2px solid #888;
   color: #333;
 }
-.render-error {
-  background-color: #eaa !important;  /* NOTGREY - red for error */
-  padding: 1px 20px;
-  font-style: italic;
-}
 
 .card-notice {
   background: #fff;
@@ -653,7 +755,7 @@ td.missing-rule {
 .open-rule .card-body {
   clear: both;
 }
-.open-rule .instruction {
+.open-rule .rule-instruction {
   float: right;
   text-align: left;
   max-width: 68%;
@@ -662,8 +764,6 @@ td.missing-rule {
   .set-editor {
     ul {
       list-style-type: none;
-      margin: 0;
-      padding: 0;
     }
     .current-set-label {
       font-weight: bold;
@@ -730,14 +830,6 @@ h2.set-label {
   background-image: url([[/assets/smoothness/ui-icons_454545_256x240.png]])
 }
 
-.instruction {
-  text-align: center;
-  padding: 4px 10px;
-  ol,
-  ul {
-    text-align: left;
-  }
-}
 
 table.show-cache td {
   padding: 10px;
@@ -758,3 +850,5 @@ html>body .open-view {
   font-style: italic;
   font-size: .85em;
 }
+
+