Skip to content

Commit

Permalink
WIP: New Admin UI
Browse files Browse the repository at this point in the history
* Add flash CSS
* Add label CSS
* Improve tree CSS
* UI fixes
  • Loading branch information
bricesanchez committed May 25, 2018
1 parent 6344421 commit cc3652b
Show file tree
Hide file tree
Showing 10 changed files with 152 additions and 52 deletions.
Binary file added core/app/assets/images/refinery/branch-end.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions core/app/assets/stylesheets/refinery/components/_flash.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.flash
margin: 0 1.4em 1em
color: $text_base_color
font-size: 0.9em

a
font-weight: bold

&.flash_notice,
&.flash_message
border-top: 2px solid #50b83c
@include icon('check-circle', #50b83c)
@include panel(#e3f1df, 0.75em 0.25em 0.75em 0.75em)

a
color: #50b83c

&.flash_error,
&.flash_alert
border-top: 2px solid #de3618
@include icon('question-circle', #de3618)
@include panel(#fbeae5, 0.75em 0.25em 0.75em 0.75em)

a
color: #de3618

#flash_close
background: none
border: none
color: #41403C
cursor: pointer
float: right
font-size: 1em
text-transform: lowercase
@include icon('times-circle', $icon_done_colour, 1.2em)

.errorExplanation
background-color: #fbeae5
border: 1px solid #de3618
border-radius: 3px
font-size: 0.9em
padding: 1em
margin-bottom: 1.5em

&:before
color: #de3618
display: inline-block
vertical-align: middle

p
display: inline-block
margin: 0
vertical-align: middle

ul
margin-bottom: 0

li
font-weight: bold


.fieldWithErrors
input,
textarea
background-color: #fbeae5 !important
border: 1px solid #de3618 !important

iframe,
.visual_editor_box
border-color: #de3618 !important
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
.edit_email_icon {@include icon('envelope-o');}
.edit_icon {@include icon('edit', $icon_edit_colour);}
.email_icon {@include icon('envelope-o');}
.error_icon {@include icon('question-circle', $icon_error_colour);}
.error_icon {@include icon('exclamation-circle', $icon_error_colour);}
.failure_icon {@include icon('times');}
.folder_icon {@include icon('folder',$icon_folder_colour)}
.go_icon {@include icon('caret-square-o-right');}
Expand Down
24 changes: 24 additions & 0 deletions core/app/assets/stylesheets/refinery/components/_labels.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.label
background-color: $text_light_color
border-radius: 3px
color: #ffffff
margin-right: 0.5em
padding: 0.25em 0.5em
font-size: 0.65em
font-weight: bold
text-transform: uppercase
vertical-align: middle
white-space: nowrap

&.important
background-color: #de3618

&.warning
background-color: #ed9315

&.success
background-color: #50b83c

&.notice
background-color: $base_color

4 changes: 3 additions & 1 deletion core/app/assets/stylesheets/refinery/components/_layout.sass
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ main#page_container

body
&.new,
&.edit
&.edit,
&.create,
&.update
#content
@include panel
padding: 1.5em 1.5em 0
Expand Down
6 changes: 4 additions & 2 deletions core/app/assets/stylesheets/refinery/components/_tree.sass
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
#records.tree,
.tree
.title
color: $text_base_color
font-size: 0.9em
line-height: 1.8em

Expand Down Expand Up @@ -39,11 +40,12 @@
background-image: image_url('refinery/branch-start.gif')

&:last-child
background-image: image_url('refinery/branch-end.gif')
background-image: image_url('refinery/branch-end.png')

> div
&:hover
background-color: #EAEAEA
.title
color: $base_color

.actions
float: right
Expand Down
2 changes: 1 addition & 1 deletion core/app/assets/stylesheets/refinery/global/_colours.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $icon_done_colour: #00a017; //
$icon_error_colour: #ff0; //RED
$icon_folder_colour: #e6cb47; // dark yellow
$icon_locale_colour: #b7e3fc; // pale blue
$icon_page_colour: #86cffa; //
$icon_page_colour: #066CFF; //
$icon_warning_colour: #FF6600; // orange

$info_icon_blue: #316CC8;
Expand Down
6 changes: 3 additions & 3 deletions core/app/assets/stylesheets/refinery/mixins/_panel.sass
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@mixin panel
background-color: white
@mixin panel($bg_color: white, $padding: 1.5em)
background-color: $bg_color
border-radius: 3px
box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)
box-sizing: border-box
padding: 1.5em
padding: $padding
position: relative
46 changes: 46 additions & 0 deletions core/app/assets/stylesheets/refinery/refinery.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@import '../normalize.css'

@import "neat"

@import 'global/grid_settings'
@import 'global/colours'

@import 'font-awesome-sprockets', 'font-awesome'

@import 'mixins/box_sizing'
@import 'mixins/faux_columns_2'
@import 'mixins/form_action'
@import 'mixins/icon_base'
@import 'mixins/icon'
@import 'mixins/rounded'
@import 'mixins/panel'

//@import 'plugins/ui'
@import 'components/icons'
@import 'components/dialog'
@import 'components/submenu'
@import 'components/tooltips'

@import 'grid/mobile'
@import 'grid/desktop'

@import 'components/actions'
@import 'components/form'
@import 'components/form_actions'
@import 'components/labels'
@import 'components/layout'
@import 'components/main_menu'
@import 'components/page_parts'
@import 'components/page_parts_controls'
@import 'components/flash'
@import 'components/sortable_list'
@import 'components/tree'

@import 'pages/grid/desktop'
@import 'pages/components/form'

@import 'search/components/search_form'
@import 'search/components/search_results'

@import 'site_bar'
44 changes: 0 additions & 44 deletions core/app/assets/stylesheets/refinery/refinery.scss

This file was deleted.

0 comments on commit cc3652b

Please sign in to comment.