releaf-core 0.2.1

data/app/assets/stylesheets/releaf/environment/mixins.scss

@@ -0,0 +1,3 @@
+@import 'releaf/environment/mixins/blocks';
+@import 'releaf/environment/mixins/text';
+@import 'releaf/environment/mixins/elements';

data/app/assets/stylesheets/releaf/environment/variables/colors.scss

@@ -0,0 +1,93 @@
+// basic text and background colors:
+$color-text-darkest:        #111111;
+$color-text-normal:         #1d1d1d;
+$color-text-light:          #3c3c3c;
+$color-text-lighter:        #636363;
+$color-text-lightest:       #a6a6a6;
+
+$color-background-darkest:  #c5c5c5;
+$color-background-darker:   #d4d4d4;
+$color-background-normal:   #e6e6e6;
+$color-background-lighter:  #f8f8f8;
+$color-background-lightest: #ffffff;
+
+
+// the actual color codes below for inverted blocks and borders
+// are mostly the same as the ones used above for backgrounds/texts
+// but they are not strictly dependent
+// therefore actual color codes are used here
+// instead of referencing the respective colors from above.
+// it also helps with readability a bit.
+
+
+// text and background colors for inverted blocks:
+$color-background-inverted-darkest:     #111111;
+$color-background-inverted-darker:      #1d1d1d;
+$color-background-inverted-normal:      #282828;
+$color-background-inverted-lightest:    #3c3c3c;
+
+$color-text-inverted-darkest:           #636363;
+$color-text-inverted-darker:            #a6a6a6;
+$color-text-inverted-normal:            #d4d4d4;
+$color-text-inverted-lightest:          #ffffff;
+
+
+
+// border colors:
+$color-border-darkest:          #636363;
+$color-border-darker:           #a6a6a6;
+$color-border-dark:             #c5c5c5;
+$color-border-normal:           #d4d4d4;
+$color-border-light:            #e6e6e6;
+
+$color-border-inverted-normal:  #282828;
+$color-border-inverted-lighter: #3c3c3c;
+
+
+$color-background-see-through:  create-rgba( #000, 0.6 );
+
+
+$color-shadow-normal:   $color-background-see-through;
+$color-shadow-lighter:  create-rgba( $color-shadow-normal,  0.3 );
+$color-shadow-lightest: create-rgba( $color-shadow-normal,  0.1 );
+
+
+// shades of the highlight color:
+$color-highlight-darkest:   #307872;
+$color-highlight-darker:    #269990;
+$color-highlight-normal:    #37b1a7;
+$color-highlight-lighter:   #40cfc3;
+$color-highlight-lightest:  #ccebe9;
+
+
+
+// error color:
+$color-alert: #ee462a;
+
+
+
+// notification colors:
+// special colors used for floating notifications. NOT to be used anywhere else
+
+$color-notification-error-background:       #eed3d7;
+$color-notification-error-text:             #b94a48;
+$color-notification-success-text:           #468847;
+$color-notification-success-background:     #ddf4d0;
+
+
+
+// dummy colors for debugging
+// 2 sets of lighter and darker red / orange / yellow / green / blue / purple
+
+$color-dummy-1:   #ff8080;
+$color-dummy-2:   #fcd47e;
+$color-dummy-3:   #ffffb2;
+$color-dummy-4:   #80ff80;
+$color-dummy-5:   #7eb7fc;
+$color-dummy-6:   #ff80df;
+$color-dummy-7:   #ff0000;
+$color-dummy-8:   #fead00;
+$color-dummy-9:   #ffff00;
+$color-dummy-10:  #00ff00;
+$color-dummy-11:  #0072fe;
+$color-dummy-12:  #ff00c0;

data/app/assets/stylesheets/releaf/environment/variables/magnific-popup.scss

@@ -0,0 +1,6 @@
+// some overrides for magnific popup to use releaf colors
+$mfp-overlay-color:    $color-background-see-through;
+$mfp-overlay-opacity:  1;
+$mfp-shadow:  0 0 8px $color-shadow-normal;
+
+

data/app/assets/stylesheets/releaf/environment/variables.scss

@@ -0,0 +1,5 @@
+@import 'releaf/environment/variables/colors';
+@import 'releaf/environment/variables/dimensions';
+@import 'releaf/environment/variables/magnific-popup';
+
+

data/app/assets/stylesheets/releaf/environment.scss

@@ -0,0 +1,4 @@
+@import 'releaf/environment/functions';
+@import 'releaf/environment/variables';
+@import 'releaf/environment/mixins';
+@import 'releaf/environment/extras';

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

@@ -0,0 +1,32 @@
+*
+{
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html, body
+{
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+html
+{
+    height: 100%;
+
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body
+{
+    position: relative;
+
+    background-color: $color-background-lightest;
+    color: $color-text-normal;
+}
+
+
+
+

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

@@ -0,0 +1,47 @@
+.breadcrumbs
+{
+    @include block-list;
+    @include font-size-larger;
+    padding: steps(0.5) 0;
+
+    li
+    {
+        display: inline;
+
+        a
+        {
+            position: relative;
+            z-index: 100;
+            vertical-align: top;
+            padding: 0 steps(1);
+
+            color: inherit;
+            text-decoration: none;
+
+            &:hover,
+            &:focus
+            {
+                color: $color-highlight-darker;
+            }
+        }
+
+        &:first-child
+        {
+            a
+            {
+                padding-left: 0;
+            }
+        }
+
+        .fa
+        {
+            @include icon-small;
+            vertical-align: top;
+            position: relative;
+            top: 1px;
+        }
+
+    }
+
+}
+

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

@@ -0,0 +1,107 @@
+button,
+input[type="button"],
+input[type="submit"]
+{
+    @include clickable-element;
+}
+
+.button
+{
+    cursor:pointer;
+    display: inline-block;
+    background: $color-highlight-normal;
+    color: $color-text-inverted-lightest;
+
+    @include font-size-larger;
+    padding: steps(0.5) steps(1.5);
+
+    text-decoration: none;
+    position: relative;
+
+    &:not(.only-icon) i
+    {
+        padding-right: steps(1)
+    }
+
+    &:hover,
+    &:focus,
+    &:active
+    {
+        background: $color-highlight-darker;
+        text-decoration: none;
+    }
+
+    &.only-icon
+    {
+        height: steps(3);
+        width:  steps(3);
+        text-align: center;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    &.secondary
+    {
+        background: $color-background-darker;
+        color: $color-text-lighter;
+
+        &:hover,
+        &:focus,
+        &:active
+        {
+            background: $color-background-darkest;
+            color: $color-text-light;
+        }
+    }
+
+    &.danger
+    {
+        &:hover,
+        &:focus,
+        &:active,
+        {
+            background: $color-alert;
+        }
+    }
+
+    // :TODO: change to .disabled class instead of attribtue selector when JS disabling code has been updated
+    &[disabled]
+    {
+        &,
+        &:hover,
+        &:focus,
+        &:active
+        {
+            color: $color-text-lightest;
+            background-color: $color-background-darker;
+            cursor: default;
+        }
+    }
+
+    // :TODO: update loading code
+    &.loading
+    {
+        *
+        {
+            visibility: hidden;
+        }
+
+        .loader
+        {
+            visibility: visible;
+            padding: 0;
+            position: absolute;
+            left: 50%;
+            top:  50%;
+            margin-left: -0.5em;
+            margin-top:  -0.5em;
+        }
+
+    }
+
+
+}
+
+
+
+

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

@@ -0,0 +1,29 @@
+// usage of <ul class="block"> is deprecated as of 2015-11-27
+// use SASS block-list mixin where needed
+// :TODO: remove this class definition no later than on 2016-05-27
+.block
+{
+    @include block-list;
+}
+
+
+// usage of <div class="clear-inside"> is deprecated as of 2015-11-27
+// use SASS clear-inside mixin where needed
+// :TODO: remove this class definition no later than on 2016-05-27
+.clear-inside
+{
+    @include clear-inside;
+}
+
+// usage of <div class="clear"> is deprecated as of 2015-11-27
+// instead of adding empty elements just to clear something,
+// use clear-inside mixin on the box containing floats
+// :TODO: remove this class definition no later than on 2016-05-27
+.clear
+{
+    display: block;
+    clear: both;
+    overflow:   hidden;
+    visibility: hidden;
+    height: 0px;
+}

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

@@ -0,0 +1,138 @@
+@import 'releaf/vendor/magnific-popup/main';
+
+.dialog
+{
+    @include pop-up-shadow;
+
+    margin: 0 auto;
+    width: steps(33);
+    background-color: $color-background-lightest;
+    color: $color-text-normal;
+
+    main &
+    {
+        margin-top: steps(4);
+    }
+
+    &:not(.initialized)
+    {
+        visibility: hidden;
+    }
+
+    header
+    {
+        padding-right: steps(4);
+    }
+
+    section.body
+    {
+        position: relative;
+    }
+
+    footer
+    {
+        position: relative;
+        background-color: $color-background-darker;
+        border-top: $color-border-dark 1px solid;
+        text-align: right;
+
+        form
+        {
+            display: inline-block;
+        }
+
+        .button.secondary
+        {
+            border-left: $color-border-dark 1px solid;
+        }
+
+    }
+
+}
+
+
+.ajaxbox-inner
+{
+    .dialog header .close,
+    > .close
+    {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .dialog header
+    {
+        margin-top: 0;
+    }
+
+}
+
+
+
+@mixin dialog-with-icon
+{
+    .body
+    {
+        padding: steps(3) steps(2) 0;
+        text-align: center;
+
+        .fa
+        {
+            display: block;
+            margin: 0 auto;
+            border-radius: steps(4);
+            width: steps(6);
+            background-color: $color-background-darker;
+            color: $color-text-inverted-lightest;
+            font-size:   steps(4);
+            line-height: steps(4);
+            padding:     steps(1);
+            text-align: center;
+            margin-bottom: steps(2)
+        }
+
+        .question
+        {
+            @include heading-text;
+            margin-bottom: steps(3);
+        }
+
+        .description
+        {
+            color: $color-highlight-normal;
+            @include font-size-larger;
+        }
+
+    }
+
+}
+
+
+.dialog.confirm
+{
+    @include dialog-with-icon;
+}
+
+.dialog.refused-destroy
+{
+    @include dialog-with-icon;
+
+    .body .restricted-relations
+    {
+        @include block-list;
+        margin-top: steps(1);
+        overflow-y: auto;
+        color: $color-highlight-normal;
+        @include font-size-larger;
+    }
+
+    .body .relations
+    {
+        @include block-list;
+    }
+
+}
+
+
+