cyaml 0.0.33 → 0.0.34

data/stylesheets/cyaml/screen/forms.scss

@@ -0,0 +1,320 @@
+/**
+ * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
+ *
+ * (en) CSS-component for creating vertical forms
+ * (de) CSS-Baustein zur Erstellung von Formularen mit untereinander angeordneten Elementen
+ *
+ * @note            Many thanks to Ansgar Hein (http://www.anatom5.de) for contribution
+ *
+ * @copyright       Copyright 2005-2011, Dirk Jesse
+ * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         3.3.1
+ * @revision        $Revision: 501 $
+ * @lastmodified    $Date: 2011-06-18 17:27:44 +0200 (Sa, 18 Jun 2011) $
+ */
+
+@media screen, projection {
+  /**
+   *  YAML Forms - visual styling
+   *
+   *  (en) visual form styling area
+   *  (de) Festlegung des optischen Erscheinungsbildes
+   */
+  .yform {
+    background: #f4f4f4;
+    border: 1px #ddd solid;
+    margin: 0 0 1em 0;
+    padding: 10px;
+    fieldset {
+      border: 1px #ddd solid;
+      background: #fafafa;
+      margin: 0 0 1em 0;
+      padding: 0.5em; }
+    legend {
+      font-size: 125%;
+      font-weight: normal;
+      color: #000; }
+    label {
+      color: #666; }
+    input, textarea, select, optgroup {
+      font-family: Arial, Helvetica, sans-serif;
+      /* proportional fonts for all form elements */ }
+    .type-text {
+      input, textarea {
+        border: 1px solid #ddd; } }
+    .type-select select {
+      border: 1px solid #ddd; }
+    div {
+      &.type-text input:focus, select:focus, textarea:focus, &.type-text input:hover, select:hover, textarea:hover, &.type-text input:active, select:active, textarea:active {
+        border: 1px #a66 solid;
+        background: #fff; } }
+    .type-button input {
+      border-top: 1px #ddd solid;
+      border-left: 1px #ddd solid;
+      border-right: 1px #444 solid;
+      border-bottom: 1px #444 solid;
+      color: #000;
+      background: #454545 inline-image("button_gray.png", 'image/png') top left repeat-x;
+      padding: 5px 1em;
+      &[type=reset] {
+        color: #300;
+        background: #661717 inline-image("button_red.png", 'image/png') top left repeat-x; }
+      &[type=submit] {
+        color: #330;
+        background: #5e5607 inline-image("button_yellow.png", 'image/png') top left repeat-x; }
+      &.reset {
+        color: #300;
+        background: #661717 inline-image("button_red.png", 'image/png') top left repeat-x; }
+      &.submit {
+        color: #330;
+        background: #5e5607 inline-image("button_yellow.png", 'image/png') top left repeat-x; } }
+    div.type-button input {
+      &:focus, &:hover, &:active {
+        border-top: 1px #444 solid;
+        border-left: 1px #444 solid;
+        border-right: 1px #ddd solid;
+        border-bottom: 1px #ddd solid;
+        color: #fff;
+        background: #555; }
+      &.reset {
+        &:focus, &:hover, &:active {
+          background: #800;
+          color: #fff; } }
+      &.submit {
+        &:focus, &:hover, &:active {
+          background: #880;
+          color: #fff; } } }
+    overflow: hidden;
+    fieldset {
+      display: block;
+      zoom: 1; }
+    label {
+      display: block;
+      cursor: pointer; }
+    legend {
+      background: transparent;
+      border: 0;
+      padding: 0 0.5em; }
+    .message {
+      display: block;
+      margin-bottom: 0.5em;
+      color: #666; }
+    input[type=hidden] {
+      display: none !important; }
+    sup {
+      color: #800;
+      font-weight: bold; } }
+  /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
+  /* Styling of custom styled buttons | Gestaltung von individuell gestalteten Buttons */
+  /* optional button styling for IE6 using classes */
+  /* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */
+  /*------------------------------------------------------------------------------------------------------*/
+  /**
+   * Vertical-Forms - technical base (standard)
+   *
+   * |-------------------------------|
+   * | fieldset                      |
+   * |-------------------------------|
+   * |   label                       |
+   * |   input / select / textarea   |
+   * |-------------------------------|
+   * | /fieldset                     |
+   * |-------------------------------|
+   *
+   * (en) Styling of forms where both label and input/select/textarea are styled with display:block;
+   * (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
+   *
+   * WARNING:This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
+   */
+  /* General form styling  | Allgemeine Formatierung des Formulars */
+  /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
+  /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
+  /* per row float clearing | zeilenweises Float-Clearing */
+  fieldset:after {
+    clear: both;
+    content: ".";
+    display: block;
+    font-size: 0;
+    height: 0;
+    visibility: hidden; }
+  .yform {
+    div {
+      &.type-text:after, &.type-select:after, &.type-check:after, &.type-button:after {
+        clear: both;
+        content: ".";
+        display: block;
+        font-size: 0;
+        height: 0;
+        visibility: hidden; }
+      &.type-text, &.type-select, &.type-check {
+        display: block;
+        margin: 0.5em 0;
+        padding: 3px 0.5em;
+        position: relative;
+        zoom: 1; }
+      &.type-button {
+        display: block;
+        margin: 0.5em 0;
+        padding: 3px 0.5em;
+        position: relative;
+        zoom: 1;
+        padding: 3px 0em; } }
+    .type-text {
+      input, textarea {
+        display: block;
+        position: relative;
+        padding: 0.3em 0.3em;
+        width: 58.5%; } }
+    .type-select select {
+      display: block;
+      position: relative;
+      padding: 0.3em 2px 0.3em 1px;
+      width: 60%;
+      cursor: pointer;
+      optgroup {
+        font-style: normal;
+        font-weight: bold; } }
+    .type-check {
+      input {
+        cursor: pointer; }
+      label {
+        display: inline; } }
+    .type-button input {
+      cursor: pointer;
+      overflow: visible;
+      /* Fixes IE7 auto-padding bug */
+      width: auto; }
+    div {
+      &.error {
+        border: 1px #a00 dashed;
+        background: #faf4f4;
+        padding: 0.5em;
+        label {
+          color: #000;
+          font-weight: bold; }
+        .message {
+          color: #800; } }
+      &.type-check input {
+        &:focus, &:hover, &:active {
+          border: 0 none; } } } }
+  /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
+  /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
+  /* Styling of buttons | Gestaltung von Buttons */
+  /* Styling of error-messages | Fehlermeldungen */
+  /* avoid jumping checkboxes & radiobuttons in IE8 */
+  /*------------------------------------------------------------------------------------------------------*/
+  /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
+  .full div {
+    &.type-text {
+      input, textarea {
+        width: 95.5%;
+        margin-right: -3px; } }
+    &.type-select select {
+      width: 97.0%;
+      margin-right: -3px; } }
+  /* width adjustments for IE 5.x & IE6 | Breitenanpassung für Internet Explorer 5.x und 6.0 */
+  * html .full div {
+    &.type-text {
+      input, textarea {
+        width: 95.5%; } }
+    &.type-select select {
+      width: 97.0%; } }
+  /*------------------------------------------------------------------------------------------------------*/
+  /**
+   * Columnar forms display - technical base (optional)
+   *
+   * |-------------------------------------------|
+   * | fieldset                                  |
+   * |-------------------------------------------|
+   * |                                           |
+   * |   label   |   input / select / textarea   |
+   * |                                           |
+   * |-------------------------------------------|
+   * | /fieldset                                 |
+   * |-------------------------------------------|
+   *
+   * (en) Styling of forms where label floats left of form-elements
+   * (de) Formulargestaltung, bei der die label-Elemente nach links fließen
+   *
+   * WARNING:This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
+   */
+  /* Columnar display | Spalten-Darstellung */
+  .columnar {
+    .type-text label, .type-select label {
+      float: left;
+      width: 30%;
+      /* Can be fixed width too | Kann auch eine fixe Angabe sein */ }
+    div {
+      &.type-check input, &.error .message {
+        margin-left: 30%; } }
+    fieldset div.type-button {
+      padding-left: 30%; } }
+  /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
+  fieldset.columnar div.type-button {
+    padding-left: 30%; }
+  .columnar div {
+    &.type-text {
+      input, textarea {
+        float: left;
+        width: 67.8%;
+        margin-right: -3px; } }
+    &.type-select select {
+      float: left;
+      width: 69.4%;
+      margin-right: -3px; } }
+  /* width adjustments for IE 5.x & IE6 | Breitenanpassung für Internet Explorer 5.x und 6.0 */
+  * html .columnar div {
+    &.type-text {
+      input, textarea {
+        width: 67.2%; } }
+    &.type-select select {
+      width: 68.8%; } }
+  /*------------------------------------------------------------------------------------------------------*/
+  /**
+   * Global fixes for YAML's form construction set
+   *
+   * @workaround
+   * @affected IE 5.x/Win, IE6, IE7
+   * @css-for IE 5.x/Win, IE6, IE7
+   * @valid no
+   */
+  .yform {
+    zoom: 1;
+    div {
+      zoom: 1;
+      * {
+        zoom: 1; } }
+    padding-top: 0\9;
+    fieldset {
+      padding: 0 5px\9;
+      padding-top: 1em\9; }
+    legend {
+      position: absolute\9;
+      top: -0.5em \9;
+      *left: 0\9; }
+    fieldset {
+      position: relative\9;
+      overflow: visible\9;
+      margin-top: 1.5em\9;
+      zoom: 1; }
+    legend {
+      *padding: 0 5px; }
+    fieldset {
+      *padding-top: 1.5em; } }
+  /**
+   * Forms Fieldset/Legend-Bug in IE
+   * @see http://www.mattheerema.com/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/
+   *
+   * @workaround
+   * @affected IE 5.x/Win, IE6, IE7, IE8
+   * @css-for IE 5.x/Win, IE6, IE7, IE8
+   * @valid no
+   */
+  /* all IE */
+  /* IE5.x, IE6 & IE7 */
+  /* IE5.x & IE6 */
+  * html .yform {
+    padding-top: 10px; } }

data/templates/project/basemod.scss

@@ -4,39 +4,18 @@
 @import "default_includes";
 
 /**
- * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
- * (en) stylesheet for screen layout
- * (de) Stylesheet für das Bildschirm-Layout
- *
- * @creator       YAML Builder V1.2 (http://builder.yaml.de)
- * @file          basemod.css
- * @-yaml-minver  3.2
+  Template for creating a YAML Layout.
  */
 
-  /** 
-   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
-   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
-   *
-   * @workaround
-   * @affected IE8, FF, Webkit, Opera
-   * @css-for all
-   * @valid CSS3
-   */
   body {
     overflow-y: scroll;
-    background: #4d87c7 repeat-x top left fixed;
     padding: 10px 0; }
-  /*-------------------------------------------------------------------------*/
-  /* (en) Marginal areas & page background */
-  /* (de) Randbereiche & Seitenhintergrund */
-  /* Layout Alignment | Layout-Ausrichtung */
   .page_margins {
     margin: 0 auto;
     width: auto;
     min-width: $layout_min_width;
     max-width: $layout_max_width;
     background: #fff; }
-  /* Layout Properties | Layout-Eigenschaften */
   .page {
     padding: 10px; }
   #header {
@@ -57,15 +36,8 @@
     height: $footer_height;
     background: #f9f9f9;
     border-top: 5px #efefef solid; }
-  /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
   #nav ul {
     margin-left: 20px; }
-  /*-------------------------------------------------------------------------*/
-  /**
-   * (en) Formatting content container
-   * (de) Formatierung der Inhalts-Container
-   *
-   */
   #col1 {
     float: left;
     width: $width_c1;
@@ -86,3 +58,10 @@
   #col3_content {
     padding: 0 20px 0 10px; }
 
+  #skiplinks a.skip {
+    &:focus, &:active {
+      color: #fff;
+      background: #333;
+      border-bottom: 1px #000 solid;
+      padding: 10px 0;
+      text-decoration: none; } }

data/templates/project/config.scss

@@ -2,10 +2,9 @@ $layout_width:          1000px;
 $layout_max_width:      $layout_width;
 $layout_min_width:      $layout_width;
 $display_3rd_column:    none; /* #col2 (none|block) */
-$header_height:         200px;
+$header_height:         20px;
 $content_height:        auto;
-$footer_height:         50px;
+$footer_height:         250px;
 $width_c1:              25%;
 $width_c2:              auto;
 $width_c3:              50%;
-$yaml_img_dir:          "/images";