releaf-core 0.2.1

data/app/assets/stylesheets/releaf/layout/sidebar.scss

@@ -0,0 +1,306 @@
+body > aside
+{
+    @include inverted( $background-color: $color-background-inverted-darker );
+    @include font-size-larger;
+
+    position: absolute;
+    width: steps(20);
+    left: 0;
+    top: 0;
+    z-index: 5;
+
+    > *:first-child
+    {
+        padding-top: steps(5);
+    }
+
+    > nav
+    {
+        border-top: 1px solid $color-border-inverted-normal;
+        margin-top: -1px;
+
+        margin-bottom: steps(4);
+
+        ul
+        {
+            @include block-list;
+        }
+
+        // all menu items
+        li
+        {
+            &:not(:active)
+            {
+                border-bottom: 1px solid $color-border-inverted-normal;
+                margin-bottom: -1px;
+            }
+
+            position: relative;
+
+            .collapser
+            {
+                position: absolute;
+                right: 0;
+                top: 0;
+                color: $color-text-inverted-darkest;
+
+                button
+                {
+                    width:  steps(4);
+                    height: steps(4);
+                }
+            }
+
+            .trigger
+            {
+                color: $color-text-inverted-normal;
+                display: block;
+                text-decoration: none;
+                cursor: pointer;
+                padding: steps(1) steps(4) steps(1) steps(1);
+
+                &:hover,
+                &:focus,
+                &:active
+                {
+                    color: $color-text-inverted-lightest;
+                }
+
+                abbr
+                {
+                    display: none;
+                }
+
+            }
+
+            &.collapsed ul
+            {
+                display: none;
+            }
+
+        }
+
+        // only first level menu items
+        > ul > li
+        {
+            > .trigger
+            {
+                &:hover,
+                &:focus,
+                &:active
+                {
+                    background-color: $color-background-inverted-darkest;
+                    color: $color-text-inverted-lightest;
+
+                    .collapser
+                    {
+                        color: $color-text-inverted-darker;
+                    }
+                }
+
+                > .name
+                {
+                    padding: 0;
+                }
+            }
+
+            &.active > .trigger
+            {
+                background-color: $color-highlight-normal;
+                color: $color-text-darkest;
+
+                .collapser
+                {
+                    color: $color-text-darkest;
+                }
+
+            }
+
+        }
+
+
+        // nested menu items
+        li li
+        {
+            background: $color-background-inverted-normal;
+            border-bottom: none;
+
+            .trigger
+            {
+                color: $color-text-inverted-darker;
+                position: relative;
+                padding: steps(0.5) steps(4) steps(0.5) steps(2);
+            }
+
+            &:first-child .trigger
+            {
+                padding-top: steps(1);
+            }
+
+            &:last-child .trigger
+            {
+                padding-bottom: steps(1);
+            }
+
+            &.active > .trigger
+            {
+                color: $color-text-inverted-lightest;
+                background: $color-background-inverted-lightest;
+            }
+        }
+
+    }
+
+}
+
+
+
+// menu hiding and compacting stuff
+
+body > aside .compacter
+{
+    text-align: right;
+
+    .button
+    {
+        width:  steps(4);
+        height: steps(4);
+
+        .fa
+        {
+            @include icon-large;
+        }
+
+    }
+
+}
+
+
+
+// compact sidebar stuff
+body.side-compact > aside
+{
+    width: steps(4);
+
+    > nav
+    {
+        // all menu items
+        li
+        {
+            .name
+            {
+                display: none;
+            }
+
+            > .trigger
+            {
+                padding-right: steps(1);
+            }
+
+        }
+
+        li .collapser button,
+        li .trigger .collapser,
+        li .trigger:hover .collapser,
+        li .trigger:focus .collapser,
+        li .trigger:active .collapser,
+        > ul > li.active > .trigger .collapser
+        {
+            color: inherit;
+        }
+
+        // first level menu items
+        > ul > li
+        {
+
+            > .trigger
+            {
+                abbr
+                {
+                    display: inline-block;
+                    border: none;
+                    text-decoration: none;
+                }
+
+                > .collapser button
+                {
+                    position: relative;
+                    left: -2px;
+                    z-index: 1;
+                    width:  steps(1);
+
+                    .fa
+                    {
+                        @include icon-small;
+                    }
+                }
+            }
+
+            > ul
+            {
+                display: none;
+            }
+
+        }
+
+
+        // expanded second level
+        > ul > li.open
+        {
+            > .trigger
+            {
+                background-color: $color-background-inverted-darkest;
+                color: $color-text-inverted-lightest;
+
+                .name
+                {
+                    display: block;
+                    position: absolute;
+                    top:    0;
+                    left:   100%;
+                    width:  steps(20);
+                    padding: steps(1) steps(1.5);
+                    background: $color-background-inverted-darkest;
+                }
+            }
+
+            > ul
+            {
+                display: block;
+                position: absolute;
+                top:    100%;
+                left:   100%;
+                width:  steps(20);
+                background: $color-background-inverted-darkest;
+
+                .trigger
+                {
+                    padding-left: steps(3);
+                    padding-right: steps(2);
+                }
+                .name
+                {
+                    display: block;
+                }
+            }
+
+        }
+
+        > ul > li.active
+        {
+            > .trigger,
+            > .trigger .name
+            {
+                background-color: $color-highlight-normal;
+            }
+        }
+
+    }
+}
+
+
+body > .side-compact-overlay
+{
+    @include full-screen-overlay;
+    z-index: 3;
+}

data/app/assets/stylesheets/releaf/layout/tables.scss

@@ -0,0 +1,99 @@
+.table
+{
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid $color-border-normal;
+    border-top: none;
+
+    th, td
+    {
+        border-left:  1px solid $color-border-normal;
+        border-right: 1px solid $color-border-normal;
+        padding: 0;
+        vertical-align: top;
+    }
+
+    tr th
+    {
+        text-align:  left;
+        font-weight: bold;
+    }
+
+    tr:nth-child(odd) td
+    {
+        background-color: $color-background-normal;
+    }
+
+    tr:hover td
+    {
+        background-color: $color-highlight-lightest;
+    }
+
+    td a:not(.button),
+    td > span
+    {
+        text-decoration: none;
+        color: $color-text-normal;
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+
+        &:empty
+        {
+            // attempt to stretch empty links to full cell height
+            // at least if the cell contents in the row do not wrap to multiple lines
+            min-height: steps(3);
+            margin-bottom: steps(-1);
+        }
+    }
+
+
+    th,
+    td:not(.only-icon) a:not(.button),
+    td > span
+    {
+        padding: steps(0.5) steps(1);
+    }
+
+    th:first-child,
+    td:first-child:not(.only-icon) a:not(.button),
+    td:first-child > span
+    {
+        padding-left: steps(2); // align first column with table heading
+    }
+
+
+    th span
+    {
+        display: block;
+    }
+
+    td.only-icon
+    {
+        text-align: center;
+        width: steps(3);
+    }
+
+
+    // remove outer table borders if the table is directly inside a section body
+    // because the body will have its own border
+    section .body > &
+    {
+        border: none;
+
+        th:first-child,
+        td:first-child
+        {
+            border-left: none;
+        }
+        th:last-child,
+        td:last-child
+        {
+            border-right: none;
+        }
+
+    }
+}
+
+
+

data/app/assets/stylesheets/releaf/layout/text.scss

@@ -0,0 +1,31 @@
+*
+{
+    @include reset-font;
+}
+
+html
+{
+    @include body-font;
+    @include font-size-normal;
+
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+}
+
+h1, h2, h3, h4, h5, h6, p
+{
+    font-size:   inherit;
+    font-weight: inherit;
+}
+
+h1, h2, h3, h4, h5, h6
+{
+    margin: 0;
+    padding: 0;
+}
+
+p
+{
+    margin-top: 0;
+}

data/app/assets/stylesheets/releaf/layout/toolboxes.scss

@@ -0,0 +1,69 @@
+.toolbox
+{
+    .trigger
+    {
+        display: inline-block;
+        color: $color-highlight-normal;
+
+        &, &:hover
+        {
+            background-color: transparent;
+        }
+
+        .fa
+        {
+            @include icon-large;
+        }
+    }
+
+    &:not(.initialized)
+    {
+        .trigger
+        {
+            color: $color-text-lightest;
+        }
+    }
+}
+
+
+.toolbox-items
+{
+    @include pop-up-menu;
+
+    > .fa-caret-up
+    {
+        position: absolute;
+        top: steps(-1);
+    }
+
+    min-width: steps(15);
+
+    > ul
+    {
+        @include inverted;
+
+        margin-top: 3px;
+
+        .button
+        {
+            &:hover
+            {
+                background-color: $color-highlight-normal;
+            }
+        }
+    }
+
+    li:not(:last-child) .button
+    {
+        border-bottom: 1px solid $color-border-inverted-lighter;
+    }
+
+}
+
+
+.toolbox-overlay
+{
+    @include full-screen-overlay;
+}
+
+