releaf-core 0.2.1

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

@@ -0,0 +1,55 @@
+body > header
+{
+    @include inverted( $background-color: $color-background-inverted-darkest );
+    @include font-size-larger;
+
+    text-align: right;
+
+    .home
+    {
+        display: block;
+        text-decoration: none;
+        text-align: left;
+        float: left;
+        margin: steps(1) 0 0 steps(1);
+    }
+
+
+    .profile,
+    form.sign-out
+    {
+        display: inline-block;
+    }
+
+    .profile.button,
+    form.sign-out .button
+    {
+        position: relative;
+        padding-top: steps(1.5);
+        padding-bottom: steps(1.5);
+        border-left: 1px solid $color-border-inverted-lighter;
+        margin-left: -1px;
+    }
+
+    .profile.button
+    {
+        padding-left:  steps(2);
+        padding-right: steps(2);
+    }
+
+    form.sign-out .button
+    {
+        position: relative;
+        width:  steps(5);
+        height: auto;
+
+        .fa
+        {
+            @include icon-large;
+            vertical-align: top;
+        }
+    }
+
+}
+
+

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

@@ -0,0 +1,4 @@
+.fa
+{
+    @include icon;
+}

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

@@ -0,0 +1,4 @@
+a img
+{
+    border: none;
+}

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

@@ -0,0 +1,7 @@
+a
+{
+    @include clickable-element;
+
+    color: $color-highlight-normal;
+    text-decoration: underline;
+}

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

@@ -0,0 +1,79 @@
+.localization:not(.active)
+{
+    display: none;
+}
+
+.localization-switch
+{
+    position: absolute;
+    right: 0;
+    top:   steps(1);
+
+    .trigger
+    {
+        display: inline-block;
+        padding: 0 steps(1);
+        border: 1px solid $color-border-normal;
+        background: $color-background-lighter;
+        color: $color-text-normal;
+        text-transform: uppercase;
+
+        &:hover
+        {
+            border-color: $color-border-darker;
+        }
+
+        &:focus,
+        &:active
+        {
+            background-color: $color-background-darkest;
+            border-color: $color-background-darkest;
+            color: $color-text-normal;
+        }
+
+        .fa
+        {
+            @include icon-small;
+            color: $color-highlight-darkest;
+            margin-left: steps(1);
+        }
+
+    }
+
+}
+
+
+
+
+
+.localization-menu-items
+{
+    @include pop-up-menu;
+
+    border: 1px solid $color-border-normal;
+    box-shadow: 0 0 2px 2px $color-shadow-lightest;
+
+    button
+    {
+        background: $color-background-lightest;
+
+        text-transform: uppercase;
+        padding: steps(0.5) steps(2);
+
+        &:hover,
+        &:focus
+        {
+            background: $color-background-normal;
+        }
+    }
+
+}
+
+.localization-menu-overlay
+{
+    @include full-screen-overlay;
+}
+
+
+
+

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

@@ -0,0 +1,43 @@
+// main layout
+body > header
+{
+    height:   steps(5);
+    position: relative;
+    z-index:  10;
+}
+
+body > aside,
+main
+{
+    position: relative;
+    min-height: 100%;
+}
+
+main
+{
+    display: block;  /* as of now, not all rendering engines recognize the main element as a block */
+    position: relative;
+    padding: 0 steps(3) steps(4) steps(20 + 3);
+    z-index: 1;
+
+    .side-compact &
+    {
+        padding-left: steps(4 + 3);
+    }
+
+    > header
+    {
+        border-bottom: 1px solid $color-border-light;
+        margin-bottom: -1px;
+
+        padding: steps(1) 0;
+
+        @include clear-inside;
+
+        > nav
+        {
+            float: left;
+        }
+    }
+}
+

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

@@ -0,0 +1,67 @@
+body > .notifications
+{
+    position: fixed;
+    z-index: 60;
+    top: 0;
+    left:  30%;
+    width: 40%;
+
+    .notification
+    {
+        position: relative;
+
+        background: $color-background-lighter;
+        color: $color-text-lighter;
+
+        border-radius: 0;
+
+        @include font-size-larger;
+        @include pop-up-shadow;
+
+        padding:    steps(0.5) steps(3) steps(0.5) steps(1);
+        margin-top: steps(1);
+        text-shadow: none;
+
+        &[data-type="success"]
+        {
+            background-color: $color-notification-success-background;
+            color: $color-notification-success-text;
+        }
+
+        &[data-type="error"]
+        {
+            background-color: $color-notification-error-background;
+            color: $color-notification-error-text;
+        }
+
+        > .icon
+        {
+            float: left;
+            margin-left: steps(0.5);
+            @include icon-large;
+        }
+
+        > .content
+        {
+            margin-left:  steps(3);
+            margin-right: steps(3);
+            text-align: center;
+        }
+
+        > .close
+        {
+            position: absolute;
+            right: 0;
+            top:   0;
+        }
+
+    }
+
+}
+
+.flash
+{
+    display: none;
+}
+
+

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

@@ -0,0 +1,18 @@
+.pagination
+{
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+
+
+    .button,
+    select
+    {
+        vertical-align: top;
+    }
+
+}
+
+

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

@@ -0,0 +1,70 @@
+form.search
+{
+    text-align: right;
+
+    .search-field
+    {
+        display: inline-block;
+        margin-left: steps(2);
+
+        label,
+        input,
+        select
+        {
+            margin-left: steps(1);
+        }
+    }
+
+    .text-search
+    {
+        .search-field[data-name="search"]
+        {
+            position: relative;
+
+            input[type="search"]
+            {
+                width: steps(18);
+                border-color: $color-border-light;
+            }
+
+            .button
+            {
+                position: absolute;
+                right: 0;
+                top: 0;
+                background: transparent;
+                color: $color-highlight-normal;
+
+                &:hover
+                {
+                    color: $color-text-light;
+                }
+            }
+        }
+
+
+    }
+
+    .extras
+    {
+        @include clear-inside;
+
+        background-color: $color-background-lighter;
+        border: 1px solid $color-border-light;
+        margin: -1px 0 (steps(-1) - 1px) 0;
+        padding: steps(2);
+
+        input:not([type="checkbox"]):not([type="radio"]),
+        select
+        {
+            width: steps(14);
+        }
+
+        .button
+        {
+            margin-left: steps(2);
+        }
+
+    }
+
+}

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

@@ -0,0 +1,138 @@
+section
+{
+    position: relative;
+
+    header h1
+    {
+        @include heading-text;
+    }
+
+    > form .body
+    {
+        padding-bottom: steps(3);
+    }
+
+}
+
+section.nested,
+section:not(.nested) > .body,
+section > form > .body
+{
+    @include clear-inside;
+}
+
+section:not(.nested),
+section > form
+{
+    > header
+    {
+        @include section-header;
+        @include clear-inside;
+
+        margin-top: steps(2);
+
+        h1
+        {
+            float: left;
+        }
+
+        .extras
+        {
+            float: right;
+
+            &:not(.only-text)
+            {
+                margin: steps(-0.5) steps(-2) steps(-0.5) 0;
+            }
+        }
+    }
+
+}
+
+section:not(.nested):not(.dialog),
+section:not(.dialog) > form
+{
+    > .body
+    {
+        border-width: 0 1px 1px 1px;
+        border-style: solid;
+        border-color: $color-border-normal;
+        margin-bottom: -1px;
+    }
+}
+
+section > form,
+section > form > footer
+{
+    max-width: steps(78);
+}
+
+
+section.nested
+{
+    clear: both;
+    padding: steps(2);
+
+    h1
+    {
+        margin-bottom: steps(1);
+    }
+
+    .body
+    {
+        padding-bottom: 0;
+    }
+
+    .list
+    {
+        .item:not(tr)
+        {
+            border: 1px solid $color-border-normal;
+            padding: steps(2) 0;
+            margin: 0 0 steps(2) 0;
+            position: relative;
+            background: $color-background-lightest;
+            @include clear-inside;
+        }
+
+        .item.template
+        {
+            display: none;
+        }
+
+        &[data-sortable] .item
+        {
+            padding-top: steps(3);
+
+            .handle
+            {
+                position: absolute;
+                background: $color-background-darker;
+                height: steps(3);
+                left: 0;
+                right: 0;
+                top: 0;
+                cursor: pointer;
+            }
+
+        }
+
+    }
+
+    .remove-item-box
+    {
+        position: absolute;
+        right: 0;
+        top:   0;
+        width: auto;
+    }
+
+    section.nested
+    {
+        padding-right: 0;
+    }
+
+}
+
+
+