new menu layout in CSS3 and SASS (will make our life easier when integrating new modules)
This commit is contained in:
did
parent
70493180f6
commit
f0ee8a7b37
2
.gitignore
vendored
2
.gitignore
vendored
@ -27,6 +27,6 @@ tmp/*
|
||||
.rvmrc
|
||||
Capfile
|
||||
config/deploy.rb
|
||||
perf/test.rb
|
||||
perf/*.rb
|
||||
gem_graph.png
|
||||
sites/
|
||||
|
||||
3
Gemfile
3
Gemfile
@ -21,7 +21,8 @@ gem 'rmagick', '2.12.2'
|
||||
gem 'locomotive_carrierwave', '0.5.0.1.beta2', :require => 'carrierwave'
|
||||
# gem 'carrierwave', :path => '/Users/didier/Desktop/carrierwave'
|
||||
|
||||
gem 'custom_fields', '1.0.0.beta.4'
|
||||
# gem 'custom_fields', '1.0.0.beta.4'
|
||||
gem 'custom_fields', :path => '../gems/custom_fields'
|
||||
gem 'fog', '0.3.7'
|
||||
gem 'mimetype-fu'
|
||||
gem 'actionmailer-with-request'
|
||||
|
||||
84
Gemfile.lock
84
Gemfile.lock
@ -4,19 +4,27 @@ GIT
|
||||
specs:
|
||||
mocha (0.9.12.20110213002255)
|
||||
|
||||
PATH
|
||||
remote: ../gems/custom_fields
|
||||
specs:
|
||||
custom_fields (1.0.0.beta.4)
|
||||
activesupport (>= 3.0.4)
|
||||
locomotive_carrierwave
|
||||
mongoid (~> 2.0.0.rc.7)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
RedCloth (4.2.7)
|
||||
ZenTest (4.4.2)
|
||||
ZenTest (4.5.0)
|
||||
abstract (1.0.0)
|
||||
actionmailer (3.0.4)
|
||||
actionpack (= 3.0.4)
|
||||
actionmailer (3.0.5)
|
||||
actionpack (= 3.0.5)
|
||||
mail (~> 2.2.15)
|
||||
actionmailer-with-request (0.1.1)
|
||||
actionpack (3.0.4)
|
||||
activemodel (= 3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
actionpack (3.0.5)
|
||||
activemodel (= 3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
builder (~> 2.1.2)
|
||||
erubis (~> 2.6.6)
|
||||
i18n (~> 0.4)
|
||||
@ -24,26 +32,26 @@ GEM
|
||||
rack-mount (~> 0.6.13)
|
||||
rack-test (~> 0.5.7)
|
||||
tzinfo (~> 0.3.23)
|
||||
activemodel (3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
activemodel (3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
builder (~> 2.1.2)
|
||||
i18n (~> 0.4)
|
||||
activerecord (3.0.4)
|
||||
activemodel (= 3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
activerecord (3.0.5)
|
||||
activemodel (= 3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
arel (~> 2.0.2)
|
||||
tzinfo (~> 0.3.23)
|
||||
activeresource (3.0.4)
|
||||
activemodel (= 3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
activesupport (3.0.4)
|
||||
activeresource (3.0.5)
|
||||
activemodel (= 3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
activesupport (3.0.5)
|
||||
archive-tar-minitar (0.5.2)
|
||||
arel (2.0.8)
|
||||
arel (2.0.9)
|
||||
autotest (4.4.6)
|
||||
ZenTest (>= 4.4.1)
|
||||
bcrypt-ruby (2.1.4)
|
||||
bson (1.2.2)
|
||||
bson_ext (1.2.2)
|
||||
bson (1.2.4)
|
||||
bson_ext (1.2.4)
|
||||
builder (2.1.2)
|
||||
capybara (0.4.1.2)
|
||||
celerity (>= 0.7.9)
|
||||
@ -70,12 +78,8 @@ GEM
|
||||
cucumber-rails (0.3.2)
|
||||
cucumber (>= 0.8.0)
|
||||
culerity (0.2.15)
|
||||
custom_fields (1.0.0.beta.4)
|
||||
activesupport (>= 3.0.0)
|
||||
locomotive_carrierwave
|
||||
mongoid (~> 2.0.0.rc.6)
|
||||
daemons (1.1.0)
|
||||
database_cleaner (0.6.3)
|
||||
database_cleaner (0.6.4)
|
||||
delayed_job (2.1.2)
|
||||
activesupport (~> 3.0)
|
||||
daemons
|
||||
@ -88,7 +92,7 @@ GEM
|
||||
diff-lcs (1.1.2)
|
||||
erubis (2.6.6)
|
||||
abstract (>= 1.0.0)
|
||||
excon (0.5.4)
|
||||
excon (0.5.6)
|
||||
factory_girl (1.3.3)
|
||||
factory_girl_rails (1.0.1)
|
||||
factory_girl (~> 1.3)
|
||||
@ -114,8 +118,8 @@ GEM
|
||||
growl-glue (1.0.7)
|
||||
haml (3.0.25)
|
||||
has_scope (0.5.0)
|
||||
heroku (1.16.2)
|
||||
json_pure (>= 1.2.0, < 1.5.0)
|
||||
heroku (1.18.0)
|
||||
json (~> 1.5.1)
|
||||
launchy (~> 0.3.2)
|
||||
rest-client (>= 1.4.0, < 1.7.0)
|
||||
httparty (0.7.4)
|
||||
@ -153,8 +157,8 @@ GEM
|
||||
mime-types (1.16)
|
||||
mimemagic (0.1.8)
|
||||
mimetype-fu (0.1.2)
|
||||
mongo (1.2.2)
|
||||
bson (>= 1.2.2)
|
||||
mongo (1.2.4)
|
||||
bson (>= 1.2.4)
|
||||
mongoid (2.0.0.rc.7)
|
||||
activemodel (~> 3.0)
|
||||
mongo (~> 1.2)
|
||||
@ -174,17 +178,17 @@ GEM
|
||||
rack (>= 1.0.0)
|
||||
rack-test (0.5.7)
|
||||
rack (>= 1.0)
|
||||
rails (3.0.4)
|
||||
actionmailer (= 3.0.4)
|
||||
actionpack (= 3.0.4)
|
||||
activerecord (= 3.0.4)
|
||||
activeresource (= 3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
rails (3.0.5)
|
||||
actionmailer (= 3.0.5)
|
||||
actionpack (= 3.0.5)
|
||||
activerecord (= 3.0.5)
|
||||
activeresource (= 3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
bundler (~> 1.0)
|
||||
railties (= 3.0.4)
|
||||
railties (3.0.4)
|
||||
actionpack (= 3.0.4)
|
||||
activesupport (= 3.0.4)
|
||||
railties (= 3.0.5)
|
||||
railties (3.0.5)
|
||||
actionpack (= 3.0.5)
|
||||
activesupport (= 3.0.5)
|
||||
rake (>= 0.8.7)
|
||||
thor (~> 0.14.4)
|
||||
rake (0.8.7)
|
||||
@ -245,7 +249,7 @@ GEM
|
||||
xpath (0.1.3)
|
||||
nokogiri (~> 1.3)
|
||||
yard (0.6.4)
|
||||
yui-compressor (0.9.3)
|
||||
yui-compressor (0.9.4)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
@ -259,7 +263,7 @@ DEPENDENCIES
|
||||
capybara
|
||||
cucumber (= 0.8.5)
|
||||
cucumber-rails
|
||||
custom_fields (= 1.0.0.beta.4)
|
||||
custom_fields!
|
||||
database_cleaner
|
||||
delayed_job (= 2.1.2)
|
||||
delayed_job_mongoid (= 1.0.2)
|
||||
|
||||
@ -10,8 +10,10 @@ module Admin::BaseHelper
|
||||
end
|
||||
|
||||
def admin_menu_item(name, url)
|
||||
label = content_tag(:em) + escape_once(' ') + t("admin.shared.menu.#{name}")
|
||||
content_tag(:li, link_to(label, url), :class => name.dasherize)
|
||||
index = controller.instance_variable_get(:@menu_index) || 1
|
||||
controller.instance_variable_set(:@menu_index, index + 1)
|
||||
label = content_tag(:em, escape_once(' ')) + content_tag(:span, t("admin.shared.menu.#{name}"))
|
||||
content_tag(:li, content_tag(:span) + link_to(label, url), :class => "item #{'first' if index == 1} item-#{index} #{name.dasherize}")
|
||||
end
|
||||
|
||||
def admin_button_tag(text, url, options = {})
|
||||
@ -25,15 +27,15 @@ module Admin::BaseHelper
|
||||
default_options = { :i18n => true, :css => name.dasherize.downcase }
|
||||
default_options.merge!(options)
|
||||
|
||||
css = "#{'on' if name == sections(:sub)} #{'links' if block_given?} #{options[:css]}"
|
||||
css = "#{'on' if name == sections(:sub)} #{options[:css]}"
|
||||
|
||||
label_link = default_options[:i18n] ? t("admin.shared.menu.#{name}") : name
|
||||
if block_given?
|
||||
popup = content_tag(:div, capture(&block), :class => 'popup', :style => 'display: none')
|
||||
link = link_to(content_tag(:span, preserve(label_link + content_tag(:em))), url)
|
||||
content_tag(:li, link + popup, :class => css)
|
||||
link = link_to(content_tag(:span, preserve(label_link) + content_tag(:em)) + content_tag(:em), url, :class => css)
|
||||
content_tag(:li, link + popup, :class => 'hoverable')
|
||||
else
|
||||
content_tag(:li, link_to(content_tag(:span, label_link), url), :class => css)
|
||||
content_tag(:li, link_to(content_tag(:span, label_link), url, :class => css))
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
%ul
|
||||
- @asset_collections.each do |c|
|
||||
%li{ :class => "#{'on' if @asset_collection.id == c.id}" }
|
||||
= link_to content_tag(:span, truncate(c.name, :length => 20)), edit_admin_asset_collection_url(c)
|
||||
%li
|
||||
= link_to content_tag(:span, truncate(c.name, :length => 20)), edit_admin_asset_collection_url(c), :class => "#{'on' if @asset_collection.id == c.id}"
|
||||
|
||||
.action
|
||||
= link_to content_tag(:span, t('admin.asset_collections.index.new')), new_admin_asset_collection_url
|
||||
@ -10,7 +10,7 @@
|
||||
= link_to truncate(page.title, :length => 25), edit_admin_page_url(page)
|
||||
%span= time_ago_in_words(page.updated_at)
|
||||
|
||||
- current_site.content_types.each do |content_type|
|
||||
- current_site.content_types.to_a.each do |content_type|
|
||||
- next if content_type.new_record?
|
||||
- item_on = (content_type.slug == @content_type.slug) rescue nil
|
||||
= admin_submenu_item content_type.name, admin_contents_url(content_type.slug), :i18n => false, :css => (item_on ? 'on' : '') do
|
||||
@ -25,4 +25,4 @@
|
||||
%span= time_ago_in_words(content.updated_at)
|
||||
|
||||
.action
|
||||
= link_to content_tag(:span, t('admin.content_types.index.new')), new_admin_content_type_url
|
||||
= link_to content_tag(:em) + content_tag(:span, t('admin.content_types.index.new')), new_admin_content_type_url
|
||||
@ -19,7 +19,7 @@ javascripts:
|
||||
- public/javascripts/admin/plugins/growl.js
|
||||
- public/javascripts/admin/plugins/cookie.js
|
||||
- public/javascripts/admin/plugins/selectmenu.js
|
||||
- public/javascripts/admin/locales/datepicker_de.js
|
||||
- public/javascripts/admin/locales/datepicker_de.js
|
||||
- public/javascripts/admin/locales/datepicker_fr.js
|
||||
- public/javascripts/admin/locales/datepicker_pt-BR.js
|
||||
- public/javascripts/admin/application.js
|
||||
|
||||
2
doc/TODO
2
doc/TODO
@ -26,6 +26,8 @@ BACKLOG:
|
||||
- write my first tutorial about locomotive
|
||||
- cucumber features for admin pages (in progress)
|
||||
|
||||
- code completion ? http://blog.quplo.com/2010/06/common-sense-code-completion/
|
||||
|
||||
REFACTORING:
|
||||
|
||||
- refactor slugify method (use parameterize + create a module)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
BIN
public/images/admin/menu/icons.png
Normal file
BIN
public/images/admin/menu/icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
BIN
public/images/admin/menu/popup/bottom-right-corner.png
Normal file
BIN
public/images/admin/menu/popup/bottom-right-corner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
public/images/admin/menu/submenu/action-border.png
Normal file
BIN
public/images/admin/menu/submenu/action-border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 B |
BIN
public/images/admin/menu/submenu/black-action-border.png
Normal file
BIN
public/images/admin/menu/submenu/black-action-border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 B |
BIN
public/images/admin/menu/submenu/black-bg.png
Normal file
BIN
public/images/admin/menu/submenu/black-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
public/images/admin/menu/submenu/shadow.png
Normal file
BIN
public/images/admin/menu/submenu/shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
@ -68,11 +68,11 @@ $(document).ready(function() {
|
||||
TinyMceDefaultSettings['language'] = I18nLocale;
|
||||
|
||||
// sub menu links
|
||||
$('#submenu ul li.links').hover(function() {
|
||||
$(this).addClass('hover');
|
||||
$('#submenu ul li.hoverable').hover(function() {
|
||||
$(this).find('a').addClass('hover');
|
||||
$(this).find('.popup').show();
|
||||
}, function() {
|
||||
$(this).removeClass('hover');
|
||||
$(this).find('a').removeClass('hover');
|
||||
$(this).find('.popup').hide();
|
||||
});
|
||||
|
||||
|
||||
@ -61,6 +61,7 @@ body {
|
||||
|
||||
#content {
|
||||
background: transparent url(/images/admin/menu/shadow.png) repeat-y 0 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
#content div.inner {
|
||||
|
||||
@ -1,241 +1,390 @@
|
||||
/* ___ menu ___ */
|
||||
|
||||
ul#menu {
|
||||
list-style: none;
|
||||
margin: 20px 0 0 0px;
|
||||
padding: 0px;
|
||||
background: transparent url(/images/admin/menu/gray-border.png) no-repeat 0 bottom;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
body.assets ul#menu { background-image: url(/images/admin/menu/green-border.png); }
|
||||
body.settings ul#menu { background-image: url(/images/admin/menu/blue-border.png); }
|
||||
|
||||
ul#menu li {
|
||||
float: left;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
ul#menu li a {
|
||||
display: inline-block;
|
||||
padding: 13px 55px 7px 5px;
|
||||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
color: #787a89;
|
||||
text-shadow: 1px 1px 1px #c5cfd1;
|
||||
font-size: 0.8em;
|
||||
outline: none;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
ul#menu li a em {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
||||
ul#menu li.contents { background: url(/images/admin/menu/top-left.png) no-repeat 0 -40px; padding-left: 13px; }
|
||||
ul#menu li.contents a { background: url(/images/admin/menu/top.png) repeat-x 0 -40px; margin-left: 0px; padding-right: 5px; padding-left: 5px; }
|
||||
ul#menu li.contents a em { background: transparent url(/images/admin/menu/icons/folder.png) no-repeat 0 0; }
|
||||
|
||||
body.contents ul#menu li.contents { background-position: 0 0px; }
|
||||
body.contents ul#menu li.contents a { background-position: 0 0px; color: white; text-shadow: none; }
|
||||
body.contents ul#menu li.contents a em { background-position: 0 -12px; }
|
||||
body.settings ul#menu li.contents { background-position: 0 -80px; }
|
||||
body.settings ul#menu li.contents a { background-position: 0 -80px; }
|
||||
|
||||
ul#menu li.assets { background: url(/images/admin/menu/left.png) no-repeat 0 -40px; padding-left: 40px; }
|
||||
ul#menu li.assets a em { background: transparent url(/images/admin/menu/icons/assets.png) no-repeat 0 0; height: 20px; width: 20px; float: left; top: 0px; }
|
||||
body.contents ul#menu li.assets { background-position: 0 0px; }
|
||||
body.assets ul#menu li.assets { background-position: 0 -80px; }
|
||||
body.assets ul#menu li.assets a { background-position: right -80px; color: white; text-shadow: none; }
|
||||
body.assets ul#menu li.assets a em { background-position: 0 -20px; }
|
||||
|
||||
ul#menu li.assets { background: url(/images/admin/menu/left.png) no-repeat 0 -40px; padding-left: 35px; }
|
||||
ul#menu li.assets a { background: url(/images/admin/menu/right.png) no-repeat right 0px; }
|
||||
body.contents ul#menu li.assets { background-position: 0 0px; }
|
||||
body.settings ul#menu li.assets { background-position: 0 -200px; }
|
||||
body.settings ul#menu li.assets a { background-position: right -400px; }
|
||||
|
||||
ul#menu li.settings { background: none; }
|
||||
ul#menu li.settings a { background: url(/images/admin/menu/right.png) no-repeat right -40px; margin-left: 0px; }
|
||||
ul#menu li.settings a em { background: transparent url(/images/admin/menu/icons/settings.png) no-repeat 0 0; height: 14px; }
|
||||
body.settings ul#menu li.settings a { background-position: right -440px; color: white; text-shadow: none; }
|
||||
body.settings ul#menu li.settings a em { background-position: 0 -30px; }
|
||||
body.contents ul#menu li.settings { background-position: 0 0px; }
|
||||
body.assets ul#menu li.settings a { background-position: right -120px; }
|
||||
|
||||
|
||||
ul#menu li.clear { float: none; height: 1px; }
|
||||
|
||||
/* ___ submenu ___ */
|
||||
|
||||
/* ___ AUTOMATICALLY GENERATED: see admin/menu.scss for the source file */
|
||||
/* ___ rounded ___ */
|
||||
/* ___ box shadow ___ */
|
||||
/* ___ others ___ */
|
||||
/* ___ submenu: bg ___*/
|
||||
#submenu {
|
||||
background: transparent url(/images/admin/menu/shadow.png) repeat-y 0 0;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#submenu div.action {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
#submenu div.action a {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 20px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.7em;
|
||||
padding-left: 26px;
|
||||
background: transparent url(../../images/admin/buttons/add-left.png) no-repeat 0 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#submenu div.action a:hover span { text-decoration: underline; }
|
||||
|
||||
#submenu div.action a span {
|
||||
display: inline-block;
|
||||
height: 13px;
|
||||
background: transparent url(../../images/admin/buttons/add-right.png) no-repeat right 0;
|
||||
padding: 1px 12px 10px 0px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
#submenu > ul {
|
||||
width: 950px;
|
||||
height: 46px;
|
||||
list-style: none;
|
||||
margin: 0px 8px 0 8px;
|
||||
padding: 14px 0 0 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#submenu > ul > li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#submenu > ul > li > a {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 31px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.8em;
|
||||
padding-left: 15px;
|
||||
background: transparent url(../../images/admin/buttons/emboss-left.png) no-repeat 0 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#submenu > ul > li > a span {
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
background: transparent url(../../images/admin/buttons/emboss-right.png) no-repeat right 0;
|
||||
padding: 4px 28px 10px 0px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
#submenu > ul > li.links a span em {
|
||||
display: inline-block;
|
||||
background: transparent url(/images/admin/menu/arrow.png) no-repeat 0 0;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
#submenu > ul > li.on a { background-position: 0 -31px; }
|
||||
#submenu > ul > li.on a span { background-position: right -31px; }
|
||||
#submenu > ul > li.on a span em { background-position: 0 -9px; }
|
||||
|
||||
#submenu > ul > li.hover > a { background-position: 0 -186px; color: #8b8d9a; }
|
||||
#submenu > ul > li.hover > a span { background-position: right -186px; text-shadow: none; }
|
||||
#submenu > ul > li.hover > a span em { background-position: 0 -18px; }
|
||||
|
||||
|
||||
body.assets #submenu > ul > li > a { background-position: 0 -62px; }
|
||||
body.assets #submenu > ul > li > a span { background-position: right -62px; }
|
||||
body.assets #submenu > ul > li.on > a { background-position: 0 -93px; }
|
||||
body.assets #submenu > ul > li.on > a span { background-position: right -93px; }
|
||||
|
||||
body.settings #submenu > ul > li > a { background-position: 0 -124px; }
|
||||
body.settings #submenu > ul > li > a span { background-position: right -124px; }
|
||||
body.settings #submenu > ul > li.on > a { background-position: 0 -155px; }
|
||||
body.settings #submenu > ul > li.on > a span { background-position: right -155px; }
|
||||
|
||||
body.contents #submenu > ul { background: transparent url(/images/admin/menu/gray-bg.png) repeat-x 0 0; }
|
||||
body.assets #submenu > ul { background: transparent url(/images/admin/menu/green-bg.png) repeat-x 0 0; }
|
||||
body.settings #submenu > ul { background: transparent url(/images/admin/menu/blue-bg.png) repeat-x 0 0; }
|
||||
|
||||
/* ___ popup ___ */
|
||||
|
||||
#submenu .popup {
|
||||
top: -1px;
|
||||
z-index: 998;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
margin-left: -4px;
|
||||
width: 305px;
|
||||
background: transparent url(/images/admin/menu/popup-footer.png) no-repeat 0 bottom;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
height: 60px;
|
||||
margin: 0px;
|
||||
padding: 0 8px;
|
||||
background: transparent url(/images/admin/menu/shadow.png) repeat-y 0 0;
|
||||
/* ___ submenu items ___ */
|
||||
/* ___ submenu: actions ___ */
|
||||
/* ___ submenu: popup ___ */ }
|
||||
#submenu > ul {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.4);
|
||||
background: transparent url(/images/admin/menu/submenu/shadow.png) repeat-x 0 0;
|
||||
border-top-right-radius: 3px ;
|
||||
-moz-border-radius-top-right: 3px ;
|
||||
-webkit-border-top-right-radius: 3px ;
|
||||
height: 60px; }
|
||||
#submenu > ul a {
|
||||
text-decoration: none; }
|
||||
#submenu > ul > li {
|
||||
margin: 15px 7px 0 8px;
|
||||
float: left; }
|
||||
#submenu > ul > li.hoverable > a span em {
|
||||
display: inline-block;
|
||||
background: transparent url(/images/admin/menu/icons.png) no-repeat 0 -16px;
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 6px; }
|
||||
#submenu > ul > li > a {
|
||||
display: inline-block;
|
||||
border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 0px 16px 0px 16px;
|
||||
height: 26px;
|
||||
line-height: 22px; }
|
||||
#submenu > ul > li > a span {
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
text-shadow: 1px 1px 1px #000; }
|
||||
#submenu > ul > li > a:hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.9);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.8); }
|
||||
#submenu > ul > li > a.on, #submenu > ul > li > a:active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-bottom: 1px solid transparent !important;
|
||||
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0), 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
|
||||
-moz-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0), 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0), 0 1px 0 0 rgba(255, 255, 255, 0.2) !important; }
|
||||
#submenu > ul > li > a.hover {
|
||||
background: #fff !important;
|
||||
border-color: transparent !important;
|
||||
border-color-bottom: #fff;
|
||||
padding-bottom: 0px;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
-moz-border-radius-bottomleft: 0px !important;
|
||||
-webkit-border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
-moz-border-radius-bottomright: 0px !important;
|
||||
-webkit-border-bottom-right-radius: 0px !important;
|
||||
position: relative;
|
||||
z-index: 998; }
|
||||
#submenu > ul > li > a.hover span {
|
||||
color: #8b8d9a;
|
||||
text-shadow: none;
|
||||
box-shadow: none " !important";
|
||||
-moz-box-shadow: none " !important";
|
||||
-webkit-box-shadow: none " !important"; }
|
||||
#submenu > ul > li > a.hover span em {
|
||||
background-position: -12px -16px; }
|
||||
#submenu > ul > li > a.hover > em {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: -11px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: transparent url(/images/admin/menu/popup/bottom-right-corner.png) no-repeat 0 0; }
|
||||
#submenu > .action {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 22px;
|
||||
height: 60px;
|
||||
padding-left: 20px;
|
||||
z-index: 1;
|
||||
background: transparent url(/images/admin/menu/submenu/action-border.png) repeat-y left 0; }
|
||||
#submenu > .action a {
|
||||
margin-top: 18px;
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
padding: 0px 10px 0 15px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent; }
|
||||
#submenu > .action a em {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: transparent url(../../images/admin/menu/icons.png) no-repeat 0 0px;
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
top: 1px;
|
||||
left: -5px; }
|
||||
#submenu > .action a span {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
text-shadow: 1px 1px 1px #000; }
|
||||
#submenu > .action a:hover {
|
||||
border-color: black; }
|
||||
#submenu .popup {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
min-width: 250px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
border-top-left-radius: 0px ;
|
||||
-moz-border-radius-topleft: 0px ;
|
||||
-webkit-border-top-left-radius: 0px ;
|
||||
z-index: 997; }
|
||||
#submenu .popup a {
|
||||
color: #1f82bc;
|
||||
text-decoration: none; }
|
||||
#submenu .popup a:hover {
|
||||
text-decoration: underline; }
|
||||
#submenu .popup .inner {
|
||||
padding: 8px 16px; }
|
||||
#submenu .popup h2 {
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
color: #1e1f26;
|
||||
border-top: 1px dotted #bbbbbd;
|
||||
padding-top: 6px;
|
||||
margin-bottom: 0px; }
|
||||
#submenu .popup p {
|
||||
margin: 0px 15px;
|
||||
padding: 10px 0 0 0px; }
|
||||
#submenu .popup p a {
|
||||
font-size: 0.8em;
|
||||
background: transparent url(/images/admin/menu/popup/add.png) no-repeat left 4px;
|
||||
padding-left: 12px; }
|
||||
#submenu .popup ul {
|
||||
list-style-image: url(/images/admin/menu/popup/bullet.png);
|
||||
margin: 0px 0px 0 15px; }
|
||||
#submenu .popup ul li {
|
||||
position: relative; }
|
||||
#submenu .popup ul li a {
|
||||
font-size: 0.7em; }
|
||||
#submenu .popup ul li span {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
color: #8b8d9a;
|
||||
font-size: 0.7em; }
|
||||
#submenu .popup ul.big-links {
|
||||
margin: 0px; }
|
||||
#submenu .popup ul.big-links li {
|
||||
margin: 10px 0; }
|
||||
#submenu .popup ul.big-links li a {
|
||||
border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
padding: 3px 10px;
|
||||
background: #ebedf4;
|
||||
font-weight: bold;
|
||||
font-size: 14px; }
|
||||
#submenu .popup .footer {
|
||||
background: #ebedf4;
|
||||
padding: 8px 16px;
|
||||
border-bottom-left-radius: 16px ;
|
||||
-moz-border-radius-bottom-left: 16px ;
|
||||
-webkit-border-bottom-left-radius: 16px ;
|
||||
border-bottom-right-radius: 16px ;
|
||||
-moz-border-radius-bottom-right: 16px ;
|
||||
-webkit-border-bottom-right-radius: 16px ; }
|
||||
#submenu .popup .footer a {
|
||||
color: #8b8d9a;
|
||||
font-weight: bold; }
|
||||
|
||||
#submenu .popup a { color: #1f82bc; text-decoration: none; }
|
||||
#submenu .popup a:hover { text-decoration: underline; }
|
||||
/* ___ menu ___ */
|
||||
#menu {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
margin: 20px 0 0 0px; }
|
||||
#menu a {
|
||||
text-decoration: none; }
|
||||
#menu li.item {
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 994; }
|
||||
#menu li.item > span, #menu li.item a {
|
||||
float: left;
|
||||
display: block; }
|
||||
#menu li.item > span {
|
||||
background: transparent url(/images/admin/menu/left.png) no-repeat 0 0;
|
||||
width: 40px;
|
||||
height: 39px;
|
||||
background-position: 0 -39px; }
|
||||
#menu li.item.first > span {
|
||||
width: 18px;
|
||||
background-position: 0 0; }
|
||||
#menu li.item a {
|
||||
background: transparent url(/images/admin/menu/right.png) no-repeat right 0px;
|
||||
padding: 0px 52px 0 2px;
|
||||
height: 39px;
|
||||
line-height: 26px;
|
||||
outline: none; }
|
||||
#menu li.item a em, #menu li.item a span {
|
||||
display: inline-block;
|
||||
position: relative; }
|
||||
#menu li.item a em {
|
||||
background: transparent url(/images/admin/menu/icons.png) no-repeat 0px 0px; }
|
||||
#menu li.item a span {
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
color: #787A89;
|
||||
text-shadow: #C5CFD1 1px 1px 1px;
|
||||
font-size: 0.8em; }
|
||||
#menu li.item.item-2 {
|
||||
left: -35px;
|
||||
z-index: 991; }
|
||||
#menu li.item.item-3 {
|
||||
left: -70px;
|
||||
z-index: 990; }
|
||||
#menu li.item.item-4 {
|
||||
left: -105px;
|
||||
z-index: 989; }
|
||||
#menu li.item.item-5 {
|
||||
left: -140px;
|
||||
z-index: 988; }
|
||||
|
||||
#submenu .popup .header {
|
||||
background: transparent url(/images/admin/menu/popup-header.png) no-repeat 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#submenu .popup .header p { margin: 0px 15px; padding: 10px 0 0 0px; }
|
||||
#submenu .popup .header p a {
|
||||
font-size: 0.8em;
|
||||
background: transparent url(/images/admin/menu/icons/add.png) no-repeat left 4px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
#submenu .popup .inner {
|
||||
background: transparent url(/images/admin/menu/popup-body.png) repeat-y 0 0;
|
||||
padding: 6px 15px 0px 15px;
|
||||
}
|
||||
|
||||
#submenu .popup .inner h2 {
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
color: #1e1f26;
|
||||
border-top: 1px dotted #bbbbbd;
|
||||
padding-top: 6px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#submenu .popup .inner ul {
|
||||
list-style-image: url(/images/admin/menu/icons/bullet.png);
|
||||
margin: 0px 0px 0 15px;
|
||||
}
|
||||
|
||||
#submenu .popup .inner ul li {
|
||||
/* ___ section/color/icon associations ___ */
|
||||
#menu li.contents a em {
|
||||
position: relative;
|
||||
}
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
line-height: 13px;
|
||||
background-position: 0 -64px;
|
||||
top: 10px;
|
||||
left: 0; }
|
||||
|
||||
#submenu .popup .inner ul li a {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
body.contents #menu li.contents {
|
||||
z-index: 999; }
|
||||
body.contents #menu li.contents a {
|
||||
background-position: right -78px; }
|
||||
body.contents #menu li.contents a span {
|
||||
color: #fff;
|
||||
text-shadow: none; }
|
||||
body.contents #menu li.contents > span {
|
||||
background-position: -80px -39px; }
|
||||
body.contents #menu li.contents.first > span {
|
||||
background-position: -36px 0px; }
|
||||
body.contents #menu li.contents em {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
line-height: 13px;
|
||||
background-position: -16px -64px;
|
||||
top: 10px;
|
||||
left: 0; }
|
||||
body.contents #submenu > ul {
|
||||
background: #23242b url(/images/admin/menu/submenu/black-bg.png) repeat-x 0 0;
|
||||
border-color: rgba(255, 255, 255, 0.2); }
|
||||
body.contents #submenu > ul > li > a {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
|
||||
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
|
||||
background: #27272e;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #1e1e24, #303138);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#303138), to(#1e1e24)); }
|
||||
body.contents #submenu > ul > li > a.on, body.contents #submenu > ul > li > a:active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.6);
|
||||
background: #1f2026;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #212229, #1e1e24);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1e24), to(#212229)); }
|
||||
body.contents #submenu > .action {
|
||||
background-image: url(/images/admin/menu/submenu/black-action-border.png) !important; }
|
||||
|
||||
#submenu .popup .inner ul li span {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
color: #8b8d9a;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
#menu li.assets a em {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
line-height: 17px;
|
||||
background-position: 0 -48px;
|
||||
top: 11px;
|
||||
left: 0; }
|
||||
|
||||
body.assets #menu li.assets {
|
||||
z-index: 999; }
|
||||
body.assets #menu li.assets a {
|
||||
background-position: right -39px; }
|
||||
body.assets #menu li.assets a span {
|
||||
color: #fff;
|
||||
text-shadow: none; }
|
||||
body.assets #menu li.assets > span {
|
||||
background-position: -40px -39px; }
|
||||
body.assets #menu li.assets.first > span {
|
||||
background-position: -18px 0px; }
|
||||
body.assets #menu li.assets em {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
line-height: 17px;
|
||||
background-position: -20px -48px;
|
||||
top: 11px;
|
||||
left: 0; }
|
||||
body.assets #submenu > ul {
|
||||
background-color: #2e9a7d; }
|
||||
body.assets #submenu > ul > li > a {
|
||||
background: #1c765d;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #13604b, #258c70);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#258c70), to(#13604b)); }
|
||||
body.assets #submenu > ul > li > a.on, body.assets #submenu > ul > li > a:active {
|
||||
background: #176550;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #166d55, #195e4b);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#195e4b), to(#166d55)); }
|
||||
|
||||
#menu li.settings a em {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
line-height: 14px;
|
||||
background-position: 0 -32px;
|
||||
top: 11px;
|
||||
left: 0; }
|
||||
|
||||
body.settings #menu li.settings {
|
||||
z-index: 999; }
|
||||
body.settings #menu li.settings a {
|
||||
background-position: right -117px; }
|
||||
body.settings #menu li.settings a span {
|
||||
color: #fff;
|
||||
text-shadow: none; }
|
||||
body.settings #menu li.settings > span {
|
||||
background-position: -120px -39px; }
|
||||
body.settings #menu li.settings.first > span {
|
||||
background-position: -54px 0px; }
|
||||
body.settings #menu li.settings em {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
line-height: 14px;
|
||||
background-position: -14px -32px;
|
||||
top: 11px;
|
||||
left: 0; }
|
||||
body.settings #submenu > ul {
|
||||
background-color: #2579ae; }
|
||||
body.settings #submenu > ul > li > a {
|
||||
background: #195f8d;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #135179, #1f6ea1);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1f6ea1), to(#135179)); }
|
||||
body.settings #submenu > ul > li > a.on, body.settings #submenu > ul > li > a:active {
|
||||
background: #15527a;
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #175b88, #13496c);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#13496c), to(#175b88)); }
|
||||
|
||||
99
public/stylesheets/sass/admin/_helpers.scss
Normal file
99
public/stylesheets/sass/admin/_helpers.scss
Normal file
@ -0,0 +1,99 @@
|
||||
/* ___ rounded ___ */
|
||||
|
||||
@mixin rounded($side, $radius: 10px, $important: false) {
|
||||
@if $important == true {
|
||||
$important: !important; }
|
||||
@else {
|
||||
$important: ""; }
|
||||
|
||||
border-#{$side}-radius: $radius unquote($important);
|
||||
-moz-border-radius-#{$side}: $radius unquote($important);
|
||||
-webkit-border-#{$side}-radius: $radius unquote($important);
|
||||
}
|
||||
|
||||
@mixin border-rounded($vert, $horz, $radius, $important: false) {
|
||||
@if $important == true {
|
||||
$important: !important; }
|
||||
@else {
|
||||
$important: ""; }
|
||||
|
||||
border-#{$vert}-#{$horz}-radius: $radius unquote($important);
|
||||
-moz-border-radius-#{$vert}#{$horz}: $radius unquote($important);
|
||||
-webkit-border-#{$vert}-#{$horz}-radius: $radius unquote($important);
|
||||
}
|
||||
|
||||
@mixin full-rounded($radius: 10px) {
|
||||
border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
}
|
||||
|
||||
/* ___ box shadow ___ */
|
||||
|
||||
@mixin box-shadow($hoffset, $voffset, $depth, $color) {
|
||||
box-shadow: $hoffset $voffset $depth $color;
|
||||
-moz-box-shadow: $hoffset $voffset $depth $color;
|
||||
-webkit-box-shadow: $hoffset $voffset $depth $color;
|
||||
}
|
||||
|
||||
@mixin box-shadow-with-inset($color_top, $color_bottom: $color_top, $important: false) {
|
||||
$color_bottom: $color_top !default;
|
||||
|
||||
@if $important == true {
|
||||
$important: " !important"; }
|
||||
@else {
|
||||
$important: ""; }
|
||||
|
||||
box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
|
||||
-moz-box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
|
||||
-webkit-box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
|
||||
}
|
||||
|
||||
@mixin no-box-shadow($important: false) {
|
||||
@if $important == true {
|
||||
$important: " !important"; }
|
||||
@else {
|
||||
$important: ""; }
|
||||
|
||||
box-shadow: none $important;
|
||||
-moz-box-shadow: none $important;
|
||||
-webkit-box-shadow: none $important;
|
||||
}
|
||||
|
||||
/* ___ others ___ */
|
||||
|
||||
@mixin reset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
|
||||
display: $display;
|
||||
position: absolute;
|
||||
#{$vside}: $vvalue;
|
||||
#{$hside}: $hvalue;
|
||||
}
|
||||
|
||||
@mixin linear-background-gradient($from, $to) {
|
||||
background: mix($from, $to);
|
||||
background: -moz-linear-gradient(0% 100% 90deg, $to, $from);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
|
||||
}
|
||||
|
||||
@mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
line-height: $height + 1;
|
||||
@if $enabled == true {
|
||||
background-position: -#{$width} $where; }
|
||||
@else {
|
||||
background-position: 0 $where; }
|
||||
top: $top;
|
||||
left: $left;
|
||||
}
|
||||
440
public/stylesheets/sass/admin/menu.scss
Normal file
440
public/stylesheets/sass/admin/menu.scss
Normal file
@ -0,0 +1,440 @@
|
||||
/* ___ AUTOMATICALLY GENERATED: see admin/menu.scss for the source file */
|
||||
|
||||
@import "helpers";
|
||||
|
||||
/* ___ submenu: bg ___*/
|
||||
|
||||
#submenu {
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
z-index: 998;
|
||||
height: 60px;
|
||||
margin: 0px;
|
||||
padding: 0 8px;
|
||||
background: transparent url(/images/admin/menu/shadow.png) repeat-y 0 0;
|
||||
|
||||
/* ___ submenu items ___ */
|
||||
|
||||
& > ul {
|
||||
@include reset;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.4);
|
||||
background: transparent url(/images/admin/menu/submenu/shadow.png) repeat-x 0 0;
|
||||
@include rounded(top-right, 3px);
|
||||
|
||||
height: 60px;
|
||||
|
||||
& > li {
|
||||
margin: 15px 7px 0 8px;
|
||||
float: left;
|
||||
|
||||
&.hoverable > a span {
|
||||
em {
|
||||
display: inline-block;
|
||||
background: transparent url(/images/admin/menu/icons.png) no-repeat 0 -16px;
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: inline-block;
|
||||
@include full-rounded(16px);
|
||||
@include box-shadow-with-inset(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 0px 16px 0px 16px;
|
||||
height: 26px;
|
||||
line-height: 22px;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.9);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&.on, &:active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-bottom: 1px solid transparent !important;
|
||||
@include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2), true);
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background: #fff !important;
|
||||
border-color: transparent !important;
|
||||
border-color-bottom: #fff;
|
||||
padding-bottom: 0px;
|
||||
@include border-rounded(bottom, left, 0px, true);
|
||||
@include border-rounded(bottom, right, 0px, true);
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
|
||||
span {
|
||||
color: #8b8d9a;
|
||||
text-shadow: none;
|
||||
@include no-box-shadow(true);
|
||||
}
|
||||
|
||||
span em {
|
||||
background-position: -12px -16px;
|
||||
}
|
||||
|
||||
& > em {
|
||||
@include absolute-position(bottom, 0px, right, -11px);
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: transparent url(/images/admin/menu/popup/bottom-right-corner.png) no-repeat 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ___ submenu: actions ___ */
|
||||
|
||||
& > .action {
|
||||
@include absolute-position(top, 0px, right, 22px);
|
||||
height: 60px;
|
||||
padding-left: 20px;
|
||||
z-index: 1;
|
||||
background: transparent url(/images/admin/menu/submenu/action-border.png) repeat-y left 0;
|
||||
|
||||
a {
|
||||
margin-top: 18px;
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
@include full-rounded(16px);
|
||||
padding: 0px 10px 0 15px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: transparent url(../../images/admin/menu/icons.png) no-repeat 0 0px;
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
top: 1px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ___ submenu: popup ___ */
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
min-width: 250px;
|
||||
background: #fff;
|
||||
@include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.5));
|
||||
@include full-rounded(16px);
|
||||
@include border-rounded(top, left, 0px);
|
||||
z-index: 997;
|
||||
|
||||
a {
|
||||
color: #1f82bc;
|
||||
text-decoration: none;
|
||||
&:hover { text-decoration: underline; }
|
||||
}
|
||||
|
||||
.inner { padding: 8px 16px; }
|
||||
|
||||
h2 {
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
color: #1e1f26;
|
||||
border-top: 1px dotted #bbbbbd;
|
||||
padding-top: 6px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px 15px;
|
||||
padding: 10px 0 0 0px;
|
||||
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
background: transparent url(/images/admin/menu/popup/add.png) no-repeat left 4px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-image: url(/images/admin/menu/popup/bullet.png);
|
||||
margin: 0px 0px 0 15px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a { font-size: 0.7em; }
|
||||
|
||||
span {
|
||||
@include absolute-position(top, 6px, right, 15px, inline);
|
||||
color: #8b8d9a;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
&.big-links {
|
||||
margin: 0px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
|
||||
a {
|
||||
@include full-rounded(16px);
|
||||
padding: 3px 10px;
|
||||
background: #ebedf4;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #ebedf4;
|
||||
padding: 8px 16px;
|
||||
@include rounded("bottom-left", 16px);
|
||||
@include rounded("bottom-right", 16px);
|
||||
|
||||
a {
|
||||
color: #8b8d9a;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin black-submenu {
|
||||
& > ul {
|
||||
background: #23242b url(/images/admin/menu/submenu/black-bg.png) repeat-x 0 0;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
& > li > a {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
|
||||
@include box-shadow-with-inset(rgba(255, 255, 255, 0.1));
|
||||
@include linear-background-gradient(#303138, #1e1e24);
|
||||
|
||||
&.on, &:active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.6);
|
||||
@include linear-background-gradient(#1e1e24, #212229);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .action {
|
||||
background-image: url(/images/admin/menu/submenu/black-action-border.png) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin green-submenu {
|
||||
& > ul {
|
||||
background-color: #2e9a7d;
|
||||
& > li > a {
|
||||
@include linear-background-gradient(#258c70, #13604b);
|
||||
|
||||
&.on, &:active {
|
||||
@include linear-background-gradient(#195e4b, #166d55);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blue-submenu {
|
||||
& > ul {
|
||||
background-color: #2579ae;
|
||||
& > li > a {
|
||||
@include linear-background-gradient(#1f6ea1, #135179);
|
||||
|
||||
&.on, &:active {
|
||||
@include linear-background-gradient(#13496c, #175b88);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin orange-submenu {
|
||||
& > ul {
|
||||
background-color: #ed8102;
|
||||
& > li > a {
|
||||
@include linear-background-gradient(#e07a02, #a25804);
|
||||
|
||||
&.on, &:active {
|
||||
@include linear-background-gradient(#965201, #9d5603);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin red-submenu {
|
||||
& > ul {
|
||||
background-color: #d23c45;
|
||||
& > li > a {
|
||||
@include linear-background-gradient(#b63e45, #89272d);
|
||||
|
||||
&.on, &:active {
|
||||
@include linear-background-gradient(#7b292e, #972e35);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin submenu-color($color) {
|
||||
@if $color == black { @include black-submenu; }
|
||||
@if $color == green { @include green-submenu; }
|
||||
@if $color == blue { @include blue-submenu; }
|
||||
@if $color == orange { @include orange-submenu; }
|
||||
@if $color == red { @include red-submenu; }
|
||||
}
|
||||
|
||||
/* ___ menu ___ */
|
||||
|
||||
#menu {
|
||||
@include reset;
|
||||
margin: 20px 0 0 0px;
|
||||
|
||||
li.item {
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 994;
|
||||
|
||||
& > span, a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > span {
|
||||
background: transparent url(/images/admin/menu/left.png) no-repeat 0 0;
|
||||
width: 40px;
|
||||
height: 39px;
|
||||
background-position: 0 -39px;
|
||||
}
|
||||
|
||||
&.first > span {
|
||||
width: 18px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
background: transparent url(/images/admin/menu/right.png) no-repeat right 0px;
|
||||
padding: 0px 52px 0 2px;
|
||||
height: 39px;
|
||||
line-height: 26px;
|
||||
outline: none;
|
||||
|
||||
em, span { display: inline-block; position: relative; }
|
||||
|
||||
em {
|
||||
background: transparent url(/images/admin/menu/icons.png) no-repeat 0px 0px;
|
||||
}
|
||||
|
||||
span {
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
color: #787A89;
|
||||
text-shadow: #C5CFD1 1px 1px 1px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 through 5 {
|
||||
&.item-#{$i} { left: -35px * ($i - 1); z-index: 993 - $i; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menu-color($color) {
|
||||
$color-index: 1;
|
||||
@if $color == green { $color-index: 1; }
|
||||
@if $color == black { $color-index: 2; }
|
||||
@if $color == blue { $color-index: 3; }
|
||||
@if $color == orange { $color-index: 4; }
|
||||
@if $color == red { $color-index: 5; }
|
||||
|
||||
z-index: 999;
|
||||
|
||||
a {
|
||||
background-position: right -39px * $color-index;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > span { background-position: -40px * $color-index -39px; }
|
||||
|
||||
&.first > span { background-position: -18px * $color-index 0px; }
|
||||
}
|
||||
|
||||
@mixin menu-contents-icon($enabled: false) {
|
||||
@include icon(-64px, 16px, 12px, $enabled, 10px);
|
||||
}
|
||||
|
||||
@mixin menu-assets-icon($enabled: false) {
|
||||
@include icon(-48px, 20px, 16px, $enabled, 11px);
|
||||
}
|
||||
|
||||
@mixin menu-settings-icon($enabled: false) {
|
||||
@include icon(-32px, 14px, 13px, $enabled, 11px);
|
||||
}
|
||||
|
||||
/* ___ section/color/icon associations ___ */
|
||||
|
||||
#menu li.contents a em { @include menu-contents-icon; }
|
||||
body.contents {
|
||||
$color: black;
|
||||
#menu li.contents {
|
||||
@include menu-color($color);
|
||||
em { @include menu-contents-icon(true); }
|
||||
}
|
||||
#submenu { @include submenu-color($color); }
|
||||
}
|
||||
|
||||
#menu li.assets a em { @include menu-assets-icon; }
|
||||
body.assets {
|
||||
$color: green;
|
||||
#menu li.assets {
|
||||
@include menu-color($color);
|
||||
em { @include menu-assets-icon(true); }
|
||||
}
|
||||
#submenu { @include submenu-color($color); }
|
||||
}
|
||||
|
||||
#menu li.settings a em { @include menu-settings-icon; }
|
||||
body.settings {
|
||||
$color: blue;
|
||||
#menu li.settings {
|
||||
@include menu-color($color);
|
||||
em { @include menu-settings-icon(true); }
|
||||
}
|
||||
#submenu { @include submenu-color($color); }
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user