// organize css

This commit is contained in:
Kevin Granger
2013-10-10 11:43:24 +02:00
parent 7fdf6e614f
commit 6c35b20b02
20 changed files with 1985 additions and 1969 deletions
@@ -0,0 +1,147 @@
#carrier_wizard
position: relative
display: block
.stepContainer
position: relative
display: block
overflow: hidden
clear: both
div.content
position: absolute
display: block
width: 100%
clear: both
.StepTitle
display: block
position: relative
clear: both
ul.anchor
position: relative
display: block
float: left
list-style: none
padding: 0
margin: 0 0 10px 0
clear: both
width: 100%
&.nbr_steps_4
li
width: 25%
float: left
&.nbr_steps_5
li
width: 25%
float: left
li
position: relative
display: block
overflow: hidden
a
color: #ccc
height: 32px
display: block
position: relative
margin: 0 16px 0 0
text-decoration: none
outline-style: none
.stepNumber
position: relative
float: left
width: 24px
height: 32px
margin-right: 3px
text-align: center
padding: 0 5px
font-size: 30px
line-height: 32px
color: white
.stepDesc
position: relative
text-align: left
font-size: 13px
height: 32px
display: table-cell
vertical-align: middle
line-height: 13px
.chevron
border: 16px solid transparent
border-left: 14px solid white
border-right: 0
position: absolute
right: -16px
top: 0
&:after
border: 16px solid transparent
border-left: 14px solid #ccc
border-right: 0
position: absolute
content: ""
right: 2px
top: -16px
a.disabled
color: #777
background-color: #ccc
.chevron:after
border-left: 14px solid #ccc
a.selected
color: #F8F8F8
cursor: text
background-color: $main-color
.chevron:after
border-left: 14px solid $main-color
a.done
color: white
background-color: $brand-success
.chevron:after
border-left: 14px solid $brand-success
.loader
display: none
.buttonNext
.buttonDisabled
.buttonPrevious
.buttonFinish
.msgBox
position: relative
display: none
float: left
margin: 4px 0 0 5px
padding: 5px
border: 1px solid #FFD700
background-color: #FFFFDD
color: #5A5655
+border-radius(5px)
.msgBox .content
padding: 0px
float: left
#carrier_logo_block
right: 10px
.wizard_error
@extend .alert
@extend .alert-danger
.range_inf td, .range_sup td
background-color: #ccc
.range_type
width: 220px
text-align: right
font-weight: bold
.range_data
width: 110px
.range_sign
width: 18px
font-size: 20px
text-align: center
.range_data_new
width: 110px
table#zones_table
width: auto
.field_error
border-color: $brand-danger
.actionBar
height: 30px
.actionBar a
float: right
margin-right: 10px
@@ -0,0 +1,32 @@
.fixed-width-xs
width: 40px!important
.fixed-width-sm
width: 80px!important
.fixed-width-md
width: 120px!important
.fixed-width-lg
width: 160px!important
.fixed-width-xl
width: 200px!important
.fixed-width-xxl
width: 250px!important
.row-margin-bottom
margin-bottom: 15px
textarea
resize: none
.thumbnail
background-color: white
border-color: #ccc!important
.badge
background-color: $secondary-color
&.badge-success
@extend .badge
background-color: $brand-success
&.badge-error
@extend .badge
background-color: $brand-danger
@@ -0,0 +1,233 @@
//DASHBOARD
.size_s, .size_md, .size_l, .size_xl, .size_xxl
font-family: $headings-font-family
color: $main-color
.size_s
font-size: 1.1em
.size_md
font-size: 1.3em
.size_l
font-size: 1.7em
.size_xl
font-size: 2em
.size_xxl
font-size: 2.3em
.color_success
color: $brand-success
.color_danger
color: $brand-danger
.dash_trend_down
color: red
&:before
margin-right: 4px
font-family: FontAwesome
content: "\f0ab"
.dash_trend_up
color: green
&:before
margin-right: 4px
font-family: FontAwesome
content: "\f0aa"
#dashboard
section
header
padding: 3px 8px
margin: 0 0 3px 0
color: white
font-size: 1.2em
background-color: $brand-primary
header.panel-heading
color: #555
.data_list
@extend .list-group
margin: 0 0 10px 0
padding: 0
li
@extend .list-group-item
position: relative
.data_label
small
.data_value
line-height: 39px
position: absolute
top: 0
right: 0
padding: 0 10px 0 0
.data_list_small
margin: 8px 0 10px 0
padding: 0 0 0 0
border-top: solid 1px #ddd
li
padding: 3px 0
position: relative
border: none
margin: 0
border-bottom: dashed 1px #ddd
.data_label
text-transform: uppercase
color: #bbb
.data_value
line-height: 25px
position: absolute
top: 0
right: 0
padding: 0
.data_list_large
margin: 8px 0 10px 0
padding: 0
@extend .list-unstyled
li
padding: 6px 0
position: relative
border: none
margin: 0
.data_label
line-height: 0.8em
small
font-size: 0.6em
.data_value
text-align: right
line-height: 0.6em
position: absolute
top: 0
right: 0
padding: 8px 0 0 0
small
font-size: 0.5em
.data_list_vertical
@extend .list-unstyled
@extend .row
padding: 0
margin: 0 0 10px 0
border: 1px solid #ddd
@include border-radius(3px)
li
border-left: solid 1px #ddd
@extend .col-xs-4
padding: 6px
&:first-child
border: none
.data_label
min-height: 32px
display: block
line-height: 1em
text-align: center
.data_value
display: block
text-align: center
#dashtrends
header
margin-bottom: 0
#dashtrends_toolbar
margin: 4px -16px
dl
margin: 0
min-height: 120px
text-align: center
background-color: white
padding: 10px
border-left: 1px solid #ddd
border-bottom: 1px solid #ddd
&:first-child
border-left: none
&.active
background-color: #eee
dt
text-align: center
height: 37px
line-height: 1em
font: 300 1.1em/120% $headings-font-family
svg
height: 350px
#dashproducts
header
margin-bottom: 0
nav
border-bottom: solid 1px #ddd
margin: 0 -11px
ul
margin: 0 -5px
padding: 0
text-decoration: none
background-color: white
li
float: left
li.active
background-color: $brand-primary
a
color: white
#dashactivity
svg
height: 150px
.data_value
span, .dash_trend
@extend .data_loading
.loading
.data_value
min-width: 30px
text-align: center
&:before
@extend .icon-spin
font-size: 0.7em
font-family: FontAwesome
content: "\f021"
color: #ccc
span, small
display: none
.data_trend
display: none
.data_table
.data_chart
.data_trends
=animation($name,$value)
-webkit-animation-#{$name}: $value
animation-#{$name}: $value
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@-o-keyframes #{$name}
@content
@keyframes #{$name}
@content
.data_loading
opacity: 1
+animation(name,bounceG)
+animation(duration,0.7s)
+animation(direction,linear)
+scale(0.7)
+keyframes(bounceG)
0%
+opacity(0)
+scale(0.1)
100%
+opacity(1)
+scale(1)
#dash_version
@extend .panel
padding: 0!important
overflow: hidden
iframe
height: 140px
width: 100%
@@ -0,0 +1,53 @@
#footer
z-index: 600
min-height: 60px
display: block
width: 100%
padding: 15px 0 0 0
background-color: $bg-footer-color
color: #888
a
color: #ccc
#go-top
position: fixed
bottom: 10px
height: 30px
width: 30px
text-align: center
line-height: 30px
right: 10px
z-index: 9003
display: block
padding: 0px 6px 0px 6px
margin: -2px 0px 0px
text-decoration: none
color: #fff
cursor: pointer
font-size: 16px
background-color: rgba(0,0,0,0.5)
&:hover
background-color: black
a.link-social
&:hover
text-decoration: none
i
font-size: 2em
width: 30px
height: 30px
display: inline-block
line-height: 30px
text-align: center
@include border-radius(30px)
.link-twitter i
color: white
background-color: #7CCEEF
.link-facebook i
color: white
background-color: #557DBB
.link-github i
color: black
background-color: white
.link-google i
color: white
background-color: #E6644E
@@ -0,0 +1,111 @@
//form
label.control-label
font-size: 13px
font-weight: normal
color: #666
label.control-label span.label-tooltip
text-decoration: none
font-size: 13px
background-color: darken($bg-content-color,5%)
border: none
border-bottom: solid 1px darken($bg-content-color,10%)
padding: 0 5px
@include border-radius(3px)
label.required:before
content: '*'
color: red
font-size: 14px
position: relative
line-height: 12px
.tooltip
font-size: 12px
select.input-tiny,
input[type="text"].input-tiny,
input[type="password"].input-tiny
width: 80px
float: left
textarea
resize: none
//buttons
.btn
text-transform: uppercase
.caret
border-top-color: $gray-dark!important
&:hover, &:focus
.caret
border-top-color: white!important
&.btn-default
@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
&.btn-primary
@include box-shadow(lighten($brand-success,30%) 0 -2px 0 inset)
&.btn-default[disabled]
border-color: $gray-light
color: $gray-light
background-color: lighten($gray-light,35%)
@include box-shadow(lighten($gray-light,20%) 0 -2px 0 inset)
.dropdown-menu
text-align: left
.btn-group-action
float: right
a
text-decoration: none
//typeahead
.tt-query
+border-right-radius(3px!important)
.tt-dropdown-menu
background-color: white
border: solid 1px #ccc
font-size: 0.9em
text-transform: none
.tt-suggestions
padding: 0 6px
+box-shadow(rgba(black,0.25) 0 1px 4px)
.tt-suggestion p
border-bottom: solid 1px #ccc
margin: 0!important
padding: 0!important
.tt-suggestion:last-child p
border-bottom: none
//tag
.tagify-container
background-color: white
padding: 2px 6px
min-height: 30px
overflow: auto
+border-radius(5px)
border: solid 1px #ccc
+box-shadow(rgba(0, 0, 0, 0.075) 0 1px 1px inset)
span
float: left
> span
display: inline-block
padding: 3px 5px
margin: 3px
border-radius: 2px
border: 1px solid $brand-primary
background-color: lighten($brand-primary,15%)
color: white
> a
padding-left: 5px
color: $brand-primary
text-decoration: none
font-weight: bold
> input
margin-top: 2px
border: 0 none
width: 100px
+box-shadow(none)
> input:focus
outline: 0
+box-shadow(none)
@@ -0,0 +1,64 @@
#header_infos
@extend .navbar
@extend .navbar-inverse
@extend .navbar-fixed-top
background-color: $bg-header-color
#header_shopname
@extend .navbar-brand
font: 300 1.3em/100% $headings-font-family
#header_notifs_icon_wrapper
@extend .hidden-xs
@extend .nav
@extend .navbar-nav
li a
padding: 9px 5px
> li > a > i
font-size: 1.4em
color: white
vertical-align: middle
.notifs_badge
@extend .badge
background-color: $badge-notif-color
.notifs_dropdown
background-color: transparent
border: none
box-shadow: none
.notifs_panel
@extend .panel
@extend .panel-default
width: 300px
@include box-shadow(rgba(black,0.5) 2px 2px 8px)
.notifs_panel_header
@extend .panel-heading
h3
padding: 0
font-size: 1.3em
margin: 0
.notifs_panel_footer
@extend .panel-footer
#header_nav_toggle
background-color: black
border: none
color: white
#header_employee_box
@extend .nav
@extend .navbar-nav
@extend .navbar-right
a img
margin-right: 5px
#header_foaccess i
font-size: 1.2em
#header_search
@extend .navbar-form
@extend .navbar-left
width: 130px
padding: 0 0 0 10px
@media (max-width: $screen-tablet)
width: 100%
input, .form-group
margin: 0
#header_quick
@extend .nav
@extend .navbar-nav
@extend .navbar-left
@@ -0,0 +1,70 @@
.box-stats
background-color: white
.boxchart-overlay
padding: 10px 10px 5px 10px
margin-right: 10px
float: left
color: white
@include border-radius(3px)
i
float: left
height: 64px
width: 64px
margin-right: 10px
color: white
font-size: 35px
text-align: center
line-height: 64px
@include border-radius(3px)
.title
color: #666
display: block
.value
font-size: 22px
small
line-height: 0.3em
color: #aaa
text-transform: uppercase
&:hover
text-decoration: none
.color1
i, .boxchart-overlay
background-color: #2BA8E3
@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
.value
color: #2BA8E3
.color2
i, .boxchart-overlay
background-color: #FF5450
@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
.value
color: #FF5450
.color3
i, .boxchart-overlay
background-color: #9E5BA1
@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
.value
color: #9E5BA1
.color4
i, .boxchart-overlay
background-color: #95CC6B
@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
.value
color: #95CC6B
.data_chart
rect
fill: white
path
stroke: white
stroke-width: 2
fill: none
line
stroke: black
.area
fill: rgba(white,0.30)
stroke-width: 0
.icon-big
font-size: 4em
color: darken($bg-content-color,20%)
@@ -0,0 +1,92 @@
#module-list
h3
position: relative
top: 0
left: 0
margin: 0
padding: 0
background-color: transparent
color: $main-color
font-weight: 500
.hook_panel
@extend .well
@include box-shadow(rgba(white,0.9) 0 0 0 1px inset)
padding: 10px 10px 5px 10px
margin-bottom: 3px!important
.module_name
font-size: 1.2em
.module_description
@extend .text-muted
.hook_panel_header
margin: 0 -10px 0 -10px
padding: 0 10px 10px 10px
.hook_name
font-weight: 400
font-size: 1.2em
@include border-radius(3px)
color: $brand-primary
border: solid 1px #ccc
background-color: white
padding: 0 4px
.hook_title
text-transform: uppercase
font-size: 1em
.hook_description
@extend .text-muted
padding: 3px 0 0 3px
.module_list
.module_list_item
display: table
width: 100%
padding: 5px 0
margin-bottom: 4px
background-color: white
@include box-shadow(rgba(0,0,0,0.3) 0 0 3px,rgba(black,0.10) 0 -2px 0 inset)
@include border-radius(3px)
.module_col_select
display: table-cell
width: 22px
min-height: 35px
vertical-align: middle
text-align: center
border-right: 1px solid #ddd
.module_col_position
display: table-cell
width: 60px
vertical-align: middle
text-align: right
.positions
font-family: $headings-font-family
font-weight: 200
@include text-shadow(white 1px 1px)
padding: 0 5px
font-size: 1.6em
color: #aaa
@include border-radius(3px)
@include box-shadow(rgba(0,0,0,0.2) 0 1px 3px inset)
border: solid 1px #ccc
background-color: #eee
.module_col_icon
display: table-cell
width: 50px
text-align: center
vertical-align: middle
.module_col_infos
display: table-cell
height: 50px
vertical-align: middle
.module_col_actions
display: table-cell
width: 160px
padding: 0 10px
vertical-align: middle
text-align: right
.btn-group
text-align: left
li.sortable-placeholder
border: 1px dashed #CCC
background-color: #BBB
margin-bottom: 4px
+border-radius(5px)
@@ -0,0 +1,299 @@
#nav-sidebar
float: left
width: 240px
height: 100%!important
z-index: 500
background-color: $main-color
border-right: 1px solid black
li.maintab > a > i
display: inline-block
height: 30px
width: 30px
font-size: 20px
line-height: 30px
color: white
text-align: center
@include border-radius(40px)
li:not(.active)
ul
display: none
li.active
span.submenu_expand
display: none
ul.menu
margin: 0
padding: 0
border-top: 1px black solid
list-style: none
li.maintab
position: relative
&.active
a.title
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
i
color: black
background-color: white
&.active
a.title:hover
color: contrast-color($main-color, white, #333, 10%)
&.expanded
a.title
color: white
background-color: darken($main-color,10%)
border-bottom: solid 1px darken($main-color,25%)
&:hover
background-color: lighten($main-color,10%)
i
color: white
span.submenu_expand
@extend .icon-angle-up
ul.submenu
display: block
a
color: lighten($main-color,30%)
background-color: darken($main-color,15%)
border-bottom: solid 1px darken($main-color,25%)
&:hover
color: white
background-color: darken($main-color,5%)
a.title
display: block
position: relative
padding: 2px 0 2px 8px
border-bottom: 1px solid darken($main-color,10%)
font-size: 12px
line-height: 28px
$color: contrast-color($main-color, white, #333, 10%)
color: mix($main-color, $color, 30%)
background-color: $main-color
text-transform: uppercase
text-decoration: none
@include transition-property(background-color, border, box-shadow)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
i
color: lighten($main-color,25%)
background-color: darken($main-color,25%)
@include transition-property(color)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
&:hover
background-color: lighten($main-color,10%)
color: white
i
color: white
span.submenu_expand
position: absolute
right: 10px
top: 2px
cursor: pointer
font-family: FontAwesome
font-size: 24px
font-weight: 100
color: black
background-color: transparent
@extend .icon-angle-down
@include text-shadow(lighten($main-color,10%) 1px 1px 0)
&:hover
color: white
@include text-shadow(darken($main-color,20%) -1px -1px 0)
ul.submenu
list-style: none
padding: 0
li
a
display: block
padding: 4px 5px 4px 10px
font-size: 12px
border: none
border-bottom: solid 1px #eee
background-color: white
&:hover
color: $main-color
background-color: mix(white, $main-color, 90%)
text-decoration: none
&:last-child a
border-bottom: none
&.active a
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
border-bottom: solid 1px darken($brand-primary,10%)
@media (max-width: $screen-tablet)
display: none
#nav-topbar
position: fixed
height: 28px
top: 35px
left: 80
width: 100%
z-index: 600
background-color: white
ul.menu
height: 28px
margin: 0
padding: 0
display: block
list-style: none
> li
height: 28px
padding: 0
margin: 0
border-right: solid 1px #aaa
list-style: none
position: relative
float: left
> a
display: block
line-height: 28px
color: $main-color
padding: 0 6px
margin: 0
i
margin: 0
width: 15px
background-color: transparent
font-size: 18px
&:hover
text-decoration: none
background-color: $main-color
color: white
i
color: white!important
&.active
> a
color: contrast-color($main-color, white, #333, 10%)
background-color: $main-color
i
color: white
.menu-collapse
display: none
ul.submenu
display: none!important
@include box-shadow(rgba(black,0.3) 0 2px 4px)
> ul.menu > li.expanded
ul.submenu
display: block!important
> ul.menu > li
ul.submenu
display: none!important
position: absolute
margin: 0
padding: 0
left: 0
top: 28px
width: 200px!important
li
width: 200px
padding: 0
list-style: none
a
display: block
padding: 4px 5px 4px 10px
font-size: 12px
background-color: white
border-bottom: solid 1px #eee
&:hover
color: $main-color
background-color: mix(white, $main-color, 90%)
text-decoration: none
&:last-child a
border-bottom: none
&.active a
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
border-bottom: solid 1px darken($brand-primary,10%)
.menu-collapse
height: 54px
width: 100%
font-size: 2em
text-align: center
line-height: 55px
display: block
background-color: $main-color
border-bottom: 3px solid darken($main-color,10%)
color: darken($main-color,30%)
.page-topbar
#main
padding-top: 64px
#nav-sidebar
display: none
.page-head
top: 63px
#content
margin-left: 0
width: 100%
.page-head h2.page-title
padding: 0 0 0 20px
.page-sidebar-closed
#nav-sidebar
width: 50px
@include transition-property(width)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
span.title
display: none
ul.submenu
display: none!important
padding-top: 37px
position: relative
top: 0
@include box-shadow(rgba(black,0.2) 1px 1px 0,rgba(black,0.3) 2px 2px 4px)
> ul > li:hover
width: 250px!important
position: relative
span.title
display: inline-block
ul.submenu
display: block!important
position: absolute
left: 50px
width: 200px!important
#content
margin-left: 50px
.page-head h2.page-title
padding: 0 0 0 70px
@media (max-width: $screen-tablet)
padding: 0 0 0 20px
@media (max-width: $screen-tablet)
margin-left: 0
width: 100%
.submenu_expand
display: none
//icons
.icon-AdminDashboard
@extend .icon-dashboard
.icon-AdminCatalog
@extend .icon-book
.icon-AdminParentOrders
@extend .icon-credit-card
.icon-AdminParentCustomer
@extend .icon-group
.icon-AdminPriceRule
@extend .icon-tags
.icon-AdminParentShipping
@extend .icon-truck
.icon-AdminParentLocalization
@extend .icon-globe
.icon-AdminParentModules
@extend .icon-puzzle-piece
.icon-AdminParentPreferences
@extend .icon-wrench
.icon-AdminTools
@extend .icon-cogs
.icon-AdminAdmin
@extend .icon-cog
.icon-AdminParentStats
@extend .icon-bar-chart
.icon-AdminStock
@extend .icon-archive
[class^="icon-Admin"]
margin-right: 6px
+167
View File
@@ -0,0 +1,167 @@
// CSS TOGGLE SWITCHES (Ionuț Colceriu)
// Licensed under Unlicense
// https://github.com/ghinda/css-toggle-switch
//Hide by default
.switch .slide-button, .toggle p span
display: none
.switch
background-color: darken($bg-content-color,15%)
border-radius: 3px
label
padding: 0
cursor: pointer
//Toggle Switches
//We can't test for a specific feature, so we only target browsers with support for media queries.
//Position the label over all the elements, except the slide-button
//Clicking anywhere on the label will change the switch-state
// Don't hide the input from screen-readers and keyboard access
@media only screen
// Checkbox
.toggle
position: relative
padding: 0
margin-left: 100px
label
position: relative
z-index: 3
display: block
width: 100%
input
position: absolute
opacity: 0
z-index: 5
p
position: absolute
left: -100px
width: 100%
margin: 0
padding-right: 100px
text-align: left
p span
position: absolute
top: 0
left: 0
z-index: 5
display: block
width: 50%
margin-left: 100px
text-align: center
&:last-child
left: 50%
.slide-button
position: absolute
right: 0
top: 0
z-index: 4
display: block
width: 50%
height: 100%
padding: 0
// Radio Switch
.switch
position: relative
padding: 0
input
position: absolute
opacity: 0
label
position: relative
z-index: 2
float: left
width: 50%
height: 100%
margin: 0
text-align: center
.slide-button
position: absolute
top: 0
left: 0
padding: 0
z-index: 1
width: 50%
height: 100%
input:last-of-type:checked ~ .slide-button
left: 50%
// Switch with 3 items
&.switch-three label, &.switch-three .slide-button
width: 33.3%
&.switch-three input:checked:nth-of-type(2) ~ .slide-button
left: 33.3%
&.switch-three input:checked:last-of-type ~ .slide-button
left: 66.6%
// Switch with 4 items
&.switch-four label, &.switch-four .slide-button
width: 25%
&.switch-four input:checked:nth-of-type(2) ~ .slide-button
left: 25%
&.switch-four input:checked:nth-of-type(3) ~ .slide-button
left: 50%
&.switch-four input:checked:last-of-type ~ .slide-button
left: 75%
// Switch with 5 items
&.switch-five label, &.switch-five .slide-button
width: 20%
&.switch-five input:checked:nth-of-type(2) ~ .slide-button
left: 20%
&.switch-five input:checked:nth-of-type(3) ~ .slide-button
left: 40%
&.switch-five input:checked:nth-of-type(4) ~ .slide-button
left: 60%
&.switch-five input:checked:last-of-type ~ .slide-button
left: 80%
// Shared
.toggle, .switch
display: block
height: $input-height-base
.switch *, .toggle *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
.switch .slide-button, .toggle .slide-button
display: block
-webkit-transition: all 0.3s ease-out
-moz-transition: all 0.3s ease-out
-ms-transition: all 0.3s ease-out
-o-transition: all 0.3s ease-out
transition: all 0.3s ease-out
.toggle label, .toggle p, .switch label
line-height: $input-height-base
vertical-align: middle
.toggle input:checked ~ .slide-button
right: 50%
// Outline the toggles when the inputs are focused
.toggle input:focus ~ .slide-button, .switch input:focus + label
outline: 1px dotted #888
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
// http://css-tricks.com/webkit-sibling-bug/
.switch, .toggle
-webkit-animation: bugfix infinite 1s
//@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
// Prestashop Theme
.prestashop-switch
min-width: 150px
color: #666
text-align: center
border-radius: 3px
@include box-shadow(rgba(black,0.2) 0 2px 5px 1px inset)
label
padding-top: 0!important
font-weight: 500
input:checked + label
color: #333!important
@include text-shadow(rgba(white,0.7) 1px 1px 0)
input:not(:checked) + label
i
color: #666!important
.slide-button
position: relative
margin-right: 3px
color: lighten($bg-content-color,50%)
p
color: #333
span
color: #fff
@@ -0,0 +1,57 @@
.table
@extend .table-striped
@extend .table-hover
border-collapse: separate
border-spacing: 0 2px 0 0
margin-bottom: 5px
thead > tr > th
border: none
font-weight: normal
vertical-align: top
span.title_box
color: black
font-size: 1.1em
font-weight: bold
display: block
word-wrap: nowrap
white-space: nowrap
&.active
font-weight: bold
a
text-decoration: none
a.active
color: black
input, select
margin: 0
tbody > tr > td
border-top: none
background-color: white
tbody > tr > td
padding: 3px 7px
vertical-align: middle
word-wrap: nowrap
font-size: 12px
border-bottom: solid 1px #eee
td.center, th.center
text-align: center
td.pointer
cursor: pointer
tr td:first-child, tr th:first-child
border-top-left-radius: 3px
border-bottom-left-radius: 3px
tr td:last-child,tr th:last-child
border-top-right-radius: 3px
border-bottom-right-radius: 3px
tr.filter
background-color: lighten(#CAE5F4,5%)
input[type="text"].filter, input[type="password"].filter, select.filter
font-size: 12px
border-color: darken(#CAE5F4,10%)
tr.highlighted td
background-color: $brand-primary!important
color: white
td.actions
min-width: 200px
@@ -0,0 +1,76 @@
//light
//$main-color: #F7F7F7
//$main-color: #DBD8CF //sable
//$main-color: #CFD7DD //bleu
//$main-color: #E0E0E0 //gris
//$main-color: #D7D6DE //violet
//$main-color: #F1F8FE //theme wordpress
//dark
//$main-color: #272A31 //bleu PrestaShop
//$main-color: #3D3D3D //gris
$main-color: #515561 //gris bleu clair
//$main-color: #4D4645 //taupe
//$main-color: #272822 //gris vert
//$main-color: #313A45 //gris bleu
//$main-color: #7B8676
//$main-color: #443A42 //violet
//$main-color: #373E35 //vert camo
//$main-color: #262C3F //bleu nuit - pretty sure that a girl could do better naming the colors, sorry about that...
//$main-color: #8C8574
//$main-color: #3A3A4A
//$secondary-color: white //blanc
//$secondary-color: #F5792B //orange
//$secondary-color: #81A98C //vert d'eau
//$secondary-color: #1EAEC0 //bleu
//$secondary-color: #00C3C1 //turquoise
//$secondary-color: #97C885 //vert menthe
//$secondary-color: #4691D2 //bleu ciel
//$secondary-color: #814C76 //violet
//$secondary-color: #FE635F //saumon
//$secondary-color: #FFB4B8 //rose
//$secondary-color: #F2B100 //moutarde
//$secondary-color: #F6A88A //abricot
//$secondary-color: #937976 //taupe clair
//$secondary-color: #60C276 //vert
$secondary-color: #8FC04D //vert pomme
//$secondary-color: #6992AF //theme wordpress
//$secondary-color: #8BC954 //vert PrestaShop
//$secondary-color: #AB7073
//$secondary-color: black
$brand-primary: #1BA6E5
//$brand-primary: #1BA6E5
//some tests
//$secondary-color: #79C09D
//$secondary-color: invert($main-color)
//$secondary-color: lighten(invert($main-color),20%)
//$secondary-color: adjust-hue($main-color, 80%)
//$hue: hue(adjust-hue($main-color, 80%))
//$secondary-color: hsl($hue, 50%, 50%) //Creates a Color from hue, saturation, and lightness values
//$secondary-color: #00A89C
//dark and light, love and war, fire and ice, etc...
$contrasted-dark-default: #333
$contrasted-light-default: white
$contrasted-lightness-threshold: 10% //30% default
//50 shades of gray
//$bg-content-color: #F8F9FB //bleu gris clair
//$bg-content-color: #F8FBF8 //vert gris clair
//$bg-content-color: #F8F4E3 //gris foncé
//$bg-content-color: #F6F6F6 //gris
$bg-content-color: #F8F8F8 //gris
//heading
//$bg-header-color: darken($secondary-color,20%)
$bg-header-color: #242424
$bg-footer-color: #242424
$bg-page-head-color : $secondary-color
$bg-panel-heading-color: hsl(hue($secondary-color), 10, 90)
//others
$badge-notif-color: #8BC954
$icon-color: #87C795
@@ -0,0 +1,87 @@
.toolbar_btn
position: relative
padding: 2px 5px !important
margin-right: 3px
font-size: 12px
font-weight: 600
color: white
text-align: center
text-shadow: none
&:hover
color: $secondary-color
border-color: white
background-color: white!important
[class^="process-icon-"], [class*=" process-icon-"]
height: 25px
min-width: 32px
background-position: center
background-repeat: no-repeat
display: block
font-family: FontAwesome
font-weight: normal
font-style: normal
font-size: 25px
line-height: 25px
text-decoration: inherit
-webkit-font-smoothing: antialiased
*margin-right: .3em
.process-icon-new
@extend .icon-plus-sign-alt
.process-icon-save
@extend .icon-save
.process-icon-back
@extend .icon-arrow-left
.process-icon-save-and-stay
@extend .icon-save
.process-icon-help
@extend .icon-question-sign
.process-icon-export
@extend .icon-cloud-download
.process-icon-import
@extend .icon-cloud-upload
.process-icon-help-new
@extend .icon-question-sign
.process-icon-edit
@extend .icon-edit
.process-icon-newAttributes
@extend .icon-plus-sign-alt
.process-icon-modules-list
@extend .icon-puzzle-piece
.process-icon-save-date
@extend .icon-download
.process-icon-save-status
@extend .icon-download
.process-icon-new-module
@extend .icon-plus
.process-icon-delete
@extend .icon-trash
.process-icon-update
@extend icon-refresh
.process-icon-preview
@extend .icon-eye-open
.process-icon-previewURL
@extend .icon-eye-open
.process-icon-stats
@extend .icon-bar-chart
.process-icon-duplicate
@extend .icon-copy
.process-icon-newCombination.toolbar-new
@extend .icon-plus-sign
.process-icon-newCombination.toolbar-cancel
@extend .icon-minus-sign
.process-icon-partial_refund
@extend .icon-exchange
.process-icon-cancel
@extend .icon-remove
.process-icon-new-url
@extend .icon-plus-sign-alt
.process-icon-anchor
@extend .icon-anchor
.process-icon-refresh
@extend .icon-refresh
.process-icon-configure
@extend .icon-cog
.process-icon-save-and-preview
@extend .icon-save
@@ -0,0 +1,34 @@
.tree
padding: 0 0 0 20px
list-style: none
input
margin-right: 4px
i
font-size: 1.3em
.tree-item-name, .tree-folder-name
padding: 0 5px
+border-radius(6px)
font-weight: normal
&:hover
background-color: #eee
cursor: pointer
.tree-selected
background-color: lighten($brand-primary,30%)
i.tree-dot
background-color: $brand-primary
i.tree-dot
display: inline-block
position: relative
width: 6px
height: 6px
margin: 0 4px 0 6px
background-color: #ccc
+border-radius(6px)
.tree-item-disable, .tree-folder-name-disable
color: #ccc
&:hover
color: #ccc
background-color: none
.tree-actions
padding-bottom: 4px
display: inline-block
@@ -0,0 +1,59 @@
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
// Core variables and mixins
@import "../bower_components/sass-bootstrap/lib/variables";
@import "../bower_components/sass-bootstrap/lib/mixins";
// Reset
@import "../bower_components/sass-bootstrap/lib/normalize";
@import "../bower_components/sass-bootstrap/lib/print";
// Core CSS
@import "../bower_components/sass-bootstrap/lib/scaffolding";
@import "../bower_components/sass-bootstrap/lib/type";
@import "../bower_components/sass-bootstrap/lib/code";
@import "../bower_components/sass-bootstrap/lib/grid";
@import "../bower_components/sass-bootstrap/lib/tables";
@import "../bower_components/sass-bootstrap/lib/forms";
@import "../bower_components/sass-bootstrap/lib/buttons";
// Components
@import "../bower_components/sass-bootstrap/lib/component-animations";
@import "../bower_components/sass-bootstrap/lib/glyphicons";
@import "../bower_components/sass-bootstrap/lib/dropdowns";
@import "../bower_components/sass-bootstrap/lib/button-groups";
@import "../bower_components/sass-bootstrap/lib/input-groups";
@import "../bower_components/sass-bootstrap/lib/navs";
@import "../bower_components/sass-bootstrap/lib/navbar";
@import "../bower_components/sass-bootstrap/lib/breadcrumbs";
@import "../bower_components/sass-bootstrap/lib/pagination";
@import "../bower_components/sass-bootstrap/lib/pager";
@import "../bower_components/sass-bootstrap/lib/labels";
@import "../bower_components/sass-bootstrap/lib/badges";
@import "../bower_components/sass-bootstrap/lib/jumbotron";
@import "../bower_components/sass-bootstrap/lib/thumbnails";
@import "../bower_components/sass-bootstrap/lib/alerts";
@import "../bower_components/sass-bootstrap/lib/progress-bars";
@import "../bower_components/sass-bootstrap/lib/media";
@import "../bower_components/sass-bootstrap/lib/list-group";
@import "../bower_components/sass-bootstrap/lib/panels";
@import "../bower_components/sass-bootstrap/lib/wells";
@import "../bower_components/sass-bootstrap/lib/close";
// Components w/ JavaScript
@import "../bower_components/sass-bootstrap/lib/modals";
@import "../bower_components/sass-bootstrap/lib/tooltip";
@import "../bower_components/sass-bootstrap/lib/popovers";
@import "../bower_components/sass-bootstrap/lib/carousel";
// Utility classes
@import "../bower_components/sass-bootstrap/lib/utilities";
@import "../bower_components/sass-bootstrap/lib/responsive-utilities";
@@ -0,0 +1,430 @@
// //
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
$gray-darker: lighten(#000, 13.5%) ; //#222
$gray-dark: lighten(#000, 20%) ; //#333
$gray: lighten(#000, 33.5%) ; //#555
$gray-light: lighten(#000, 60%) ; //#999
$gray-lighter: lighten(#000, 93.5%) ; //#eee
// Brand colors
// -------------------------
//$brand-primary: #EF1778 ; //moved to admin-theme sass
$brand-success: #5cb85c ;
$brand-warning: #f0ad4e ;
$brand-danger: #d9534f ;
$brand-info: #5bc0de ;
// Scaffolding
// -------------------------
$body-bg: $main-color ;
$text-color: $gray ;
// Links
// -------------------------
// $link-color: $brand-primary ;
// $link-hover-color: darken($link-color, 15%) ;
// Typography
// -------------------------
$font-family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif ;
// $font-family-serif: Georgia, "Times New Roman", Times, serif ;
// $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace ;
// $font-family-base: $font-family-sans-serif ;
$font-size-base: 12px ;
// $font-size-large: ceil($font-size-base * 1.25) ; ~18px
// $font-size-small: ceil($font-size-base * 0.85) ; ~12px
// $font-size-mini: ceil($font-size-base * 0.75) ; ~11px
$line-height-base: 1.428571429 ;
$line-height-computed: floor($font-size-base * $line-height-base) ;
$headings-font-family: 'Ubuntu', sans-serif ;
$headings-font-weight: 300 ;
// $headings-line-height: 1.1 ;
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
$padding-base-vertical: 4px ;
$padding-base-horizontal: 8px ;
// $padding-large-vertical: 14px ;
// $padding-large-horizontal: 16px ;
// $padding-small-vertical: 5px ;
// $padding-small-horizontal: 10px ;
$border-radius-base: 3px ;
// $border-radius-large: 6px ;
// $border-radius-small: 3px ;
// $component-active-bg: $brand-primary ;
// Tables
// -------------------------
// $table-bg: transparent ; overall background-color
// $table-bg-accent: #f9f9f9 ; for striping
$table-bg-hover: $bg-panel-heading-color ;
// $table-border-color: #ddd ; table and cell border
// Buttons
// -------------------------
$btn-default-color: $text-color ;
$btn-default-bg: white ;
$btn-default-border: #ccc ;
$btn-primary-color: $btn-default-color ;
$btn-primary-bg: white ;
$btn-primary-border: $brand-success ;
// $btn-success-color: $btn-default-color ;
// $btn-success-bg: $brand-success ;
// $btn-success-border: $btn-success-bg ;
// $btn-warning-color: $btn-default-color ;
// $btn-warning-bg: $brand-warning ;
// $btn-warning-border: $btn-warning-bg ;
// $btn-danger-color: $btn-default-color ;
// $btn-danger-bg: $brand-danger ;
// $btn-danger-border: $btn-danger-bg ;
// $btn-info-color: $btn-default-color ;
// $btn-info-bg: $brand-info ;
// $btn-info-border: $btn-info-bg ;
// Forms
// -------------------------
$input-bg: #FFF ;
// $input-bg-disabled: $gray-lighter ;
// $input-border: #ccc ;
// $input-border-radius: $border-radius-base ;
// $input-color-placeholder: $gray-light ;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) ;
// $input-height-large: (ceil($font-size-large * $line-height-base) + ($padding-large-vertical * 2) + 2) ;
// $input-height-small: (ceil($font-size-small * $line-height-base) + ($padding-small-vertical * 2) + 2) ;
// Dropdowns
// -------------------------
// $dropdown-bg: #fff ;
// $dropdown-border: rgba(0,0,0,.15) ;
// $dropdown-divider-top: #e5e5e5 ;
// $dropdown-divider-bottom: #fff ;
// $dropdown-link-active-color: #fff ;
// $dropdown-link-active-bg: $component-active-bg ;
// $dropdown-link-color: $gray-dark ;
// $dropdown-link-hover-color: #fff ;
// $dropdown-link-hover-bg: $dropdown-link-active-bg ;
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
// $grid-columns: 12 ;
// Padding, to be divided by two and applied to the left and right of all columns
$grid-gutter-width: 10px ;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
// $zindex-dropdown: 1000 ;
// $zindex-popover: 1010 ;
// $zindex-tooltip: 1030 ;
// $zindex-navbar-fixed: 1030 ;
// $zindex-modal-background: 1040 ;
// $zindex-modal: 1050 ;
// Navbar
// -------------------------
// Basics of a navbar
$navbar-height: 35px ;
// $navbar-color: #777 ;
// $navbar-bg: #eee ;
// $navbar-padding: floor($grid-gutter-width / 2) ; ~15px
// Navbar links
// $navbar-link-color: #777 ;
// $navbar-link-hover-color: #333 ;
// $navbar-link-hover-bg: transparent ;
// $navbar-link-active-color: #555 ;
// $navbar-link-active-bg: darken($navbar-bg, 10%) ;
// $navbar-link-disabled-color: #ccc ;
// $navbar-link-disabled-bg: transparent ;
// Navbar brand label
// $navbar-brand-color: $navbar-link-color ;
// $navbar-brand-hover-color: darken($navbar-link-color, 10%) ;
// $navbar-brand-hover-bg: transparent ;
// Inverted navbar
// $navbar-inverse-color: $gray-light ;
// $navbar-inverse-bg: #222 ;
// Inverted navbar links
// $navbar-inverse-link-color: $gray-light ;
// $navbar-inverse-link-hover-color: #fff ;
// $navbar-inverse-link-hover-bg: transparent ;
// $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color ;
// $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) ;
// $navbar-inverse-link-disabled-color: #444 ;
// $navbar-inverse-link-disabled-bg: transparent ;
// Inverted navbar brand label
// $navbar-inverse-brand-color: $navbar-inverse-link-color ;
// $navbar-inverse-brand-hover-color: #fff ;
// $navbar-inverse-brand-hover-bg: transparent ;
// Inverted navbar search
// Normal navbar needs no special styles or vars
// $navbar-inverse-search-bg: lighten($navbar-inverse-bg, 25%) ;
// $navbar-inverse-search-bg-focus: #fff ;
// $navbar-inverse-search-border: $navbar-inverse-bg ;
// $navbar-inverse-search-placeholder-color: #ccc ;
// Pagination
// -------------------------
// $pagination-bg: #fff ;
// $pagination-border: #ddd ;
// $pagination-active-bg: #f5f5f5 ;
// Jumbotron
// -------------------------
// $jumbotron-bg: $gray-lighter ;
// $jumbotron-heading-color: inherit ;
// $jumbotron-lead-color: inherit ;
// Form states and alerts
// -------------------------
// $state-warning-text: #c09853 ;
// $state-warning-bg: #fcf8e3 ;
// $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%) ;
// $state-danger-text: #b94a48 ;
// $state-danger-bg: #f2dede ;
// $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%) ;
// $state-success-text: #468847 ;
// $state-success-bg: #dff0d8 ;
// $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) ;
// $state-info-text: #3a87ad ;
// $state-info-bg: #d9edf7 ;
// $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) ;
// Tooltips and popovers
// -------------------------
// $tooltip-color: #fff ;
// $tooltip-bg: rgba(0,0,0,.9) ;
// $tooltip-arrow-width: 5px ;
// $tooltip-arrow-color: $tooltip-bg ;
// $popover-bg: #fff ;
// $popover-arrow-width: 10px ;
// $popover-arrow-color: #fff ;
// $popover-title-bg: darken($popover-bg, 3%) ;
// Special enhancement for popovers
// $popover-arrow-outer-width: ($popover-arrow-width + 1) ;
// $popover-arrow-outer-color: rgba(0,0,0,.25) ;
// Labels
// -------------------------
// $label-success-bg: $brand-success ;
// $label-info-bg: $brand-info ;
// $label-warning-bg: $brand-warning ;
// $label-danger-bg: $brand-danger ;
// Modals
// -------------------------
// $modal-inner-padding: 20px ;
// $modal-title-padding: 15px ;
// $modal-title-line-height: $line-height-base ;
// Alerts
// -------------------------
// $alert-bg: $state-warning-bg ;
// $alert-text: $state-warning-text ;
// $alert-border: $state-warning-border ;
// $alert-border-radius: $border-radius-base ;
// $alert-success-bg: $state-success-bg ;
// $alert-success-text: $state-success-text ;
// $alert-success-border: $state-success-border ;
// $alert-danger-bg: $state-danger-bg ;
// $alert-danger-text: $state-danger-text ;
// $alert-danger-border: $state-danger-border ;
// $alert-info-bg: $state-info-bg ;
// $alert-info-text: $state-info-text ;
// $alert-info-border: $state-info-border ;
// Progress bars
// -------------------------
// $progress-bg: #f5f5f5 ;
// $progress-bar-bg: $brand-primary ;
// $progress-bar-success-bg: $brand-success ;
// $progress-bar-warning-bg: $brand-warning ;
// $progress-bar-danger-bg: $brand-danger ;
// $progress-bar-info-bg: $brand-info ;
// List group
// -------------------------
// $list-group-bg: #fff ;
// $list-group-border: #ddd ;
// $list-group-border-radius: $border-radius-base ;
// $list-group-hover-bg: #f5f5f5 ;
// $list-group-active-color: #fff ;
// $list-group-active-bg: $component-active-bg ;
// $list-group-active-border: $list-group-active-bg ;
// Panels
// -------------------------
// $panel-bg: #fff ;
// $panel-border: #ddd ;
// $panel-border-radius: $border-radius-base ;
// $panel-heading-bg: #f5f5f5 ;
// $panel-footer-bg: #f5f5f5 ;
// $panel-primary-text: #fff ;
// $panel-primary-border: $brand-primary ;
// $panel-primary-heading-bg: $brand-primary ;
// $panel-success-text: $state-success-text ;
// $panel-success-border: $state-success-border ;
// $panel-success-heading-bg: $state-success-bg ;
// $panel-warning-text: $state-warning-text ;
// $panel-warning-border: $state-warning-border ;
// $panel-warning-heading-bg: $state-warning-bg ;
// $panel-danger-text: $state-danger-text ;
// $panel-danger-border: $state-danger-border ;
// $panel-danger-heading-bg: $state-danger-bg ;
// $panel-info-text: $state-info-text ;
// $panel-info-border: $state-info-border ;
// $panel-info-heading-bg: $state-info-bg ;
// Thumbnails
// -------------------------
// $thumbnail-caption-color: $text-color ;
// $thumbnail-bg: $body-bg ;
// $thumbnail-border: #ddd ;
// $thumbnail-border-radius: $border-radius-base ;
// Wells
// -------------------------
$well-bg: darken($bg-content-color,5%) ;
// Miscellaneous
// -------------------------
// Hr border color
// $hr-border: $gray-lighter ;
// Horizontal forms & lists
// $component-offset-horizontal: 180px ;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
$screen-tiny: 480px ;
$screen-phone: $screen-tiny ;
// Small screen / tablet
$screen-small: 768px ;
$screen-tablet: $screen-small ;
// Medium screen / desktop
$screen-medium: 992px ;
$screen-desktop: $screen-medium ;
// So media queries don't overlap when required, provide a maximum
$screen-small-max: ($screen-medium - 1) ;
$screen-tablet-max: $screen-small-max ;
// Large screen / wide desktop
$screen-large: 1200px ;
$screen-large-desktop: $screen-large ;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
$container-tablet: 728px ;
// Medium screen / desktop
$container-desktop: 940px ;
// Large screen / wide desktop
$container-large-desktop: 1170px ;
// Grid system
// --------------------------------------------------
// Point at which the navbar stops collapsing
// $grid-float-breakpoint: $screen-tablet ;
File diff suppressed because it is too large Load Diff