2012-11-21 22:01:02 +01:00
|
|
|
/********************************************
|
|
|
|
|
|
|
|
Defines the styles for the action tabset, found on the site tree,
|
|
|
|
and as a single (more options) tab in page view. This is a special
|
|
|
|
use case of tabs, so the default tab styling should not apply
|
|
|
|
|
|
|
|
|
|
|
|
**********************************************/
|
|
|
|
|
|
|
|
|
|
|
|
$border: 1px solid darken(#D9D9D9, 15%);
|
|
|
|
|
|
|
|
.cms {
|
|
|
|
.ss-ui-action-tabset{
|
|
|
|
position:relative;
|
|
|
|
float:left;
|
|
|
|
|
2012-11-29 04:26:50 +01:00
|
|
|
/*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/
|
2012-11-21 22:01:02 +01:00
|
|
|
ul.ui-tabs-nav{
|
|
|
|
@include clearfix;
|
|
|
|
padding:0;
|
|
|
|
overflow:visible;
|
|
|
|
float:left;
|
|
|
|
height: 28px;
|
|
|
|
border:$border;
|
|
|
|
@include border-radius(3px);
|
|
|
|
&:focus,&:active{
|
|
|
|
outline:none;
|
|
|
|
box-shadow:none;
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
}
|
|
|
|
li{
|
|
|
|
&:focus, &:active{
|
|
|
|
outline:none;
|
|
|
|
box-shadow:none;
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
}
|
|
|
|
width: 110px;
|
|
|
|
overflow:visible;
|
|
|
|
background:#eaeaea;
|
|
|
|
@include background-image(linear-gradient(top, #f8f8f8, #D9D9D9));
|
|
|
|
border-radius: none;
|
|
|
|
@include border-radius(0);
|
|
|
|
border: none;
|
|
|
|
border-right:1px solid #eee;
|
|
|
|
border-left: $border;
|
|
|
|
margin:0;
|
|
|
|
&.ui-state-active{
|
|
|
|
background:#f8f8f8;
|
|
|
|
border-bottom:none !important; //jquery-ui style has important on it
|
|
|
|
@include border-bottom-left-radius(0px);
|
|
|
|
@include border-bottom-right-radius(0px);
|
|
|
|
a {
|
|
|
|
@include border-bottom-left-radius(0px);
|
|
|
|
@include border-bottom-right-radius(0px);
|
|
|
|
&:focus, span:focus,&:active, span:active{
|
|
|
|
outline:none;
|
|
|
|
box-shadow:none;
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.first{
|
|
|
|
@include border-top-left-radius(3px);
|
|
|
|
@include border-bottom-left-radius(3px);
|
|
|
|
border-left:none;
|
|
|
|
}
|
|
|
|
&.last{
|
|
|
|
@include border-top-right-radius(3px);
|
|
|
|
@include border-bottom-right-radius(3px);
|
|
|
|
border-right:none;
|
|
|
|
}
|
|
|
|
a.tab-nav-link{
|
|
|
|
color:$color-text;
|
|
|
|
font-weight:bold;
|
|
|
|
line-height:16px;
|
|
|
|
display:inline-block;
|
|
|
|
padding: 5px 10px;
|
|
|
|
.ui-no-icon {
|
|
|
|
display:inline-block;
|
|
|
|
float:left;
|
|
|
|
padding: 0 2px;
|
|
|
|
width:16px;
|
|
|
|
height:16px;
|
|
|
|
}
|
|
|
|
.title{
|
|
|
|
display:inline-block;
|
|
|
|
line-height: 18px;
|
|
|
|
}
|
|
|
|
&.view-mode-batchactions-wrapper .title {
|
|
|
|
margin-left: 22px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.tabset-open {
|
|
|
|
ul.ui-tabs-nav,
|
|
|
|
ul.ui-tabs-nav li.first {
|
|
|
|
@include border-bottom-left-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.tabset-open-last {
|
|
|
|
ul.ui-tabs-nav li.last {
|
|
|
|
@include border-bottom-right-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.batch-check, .ui-icon { /* position a checkbox & icon within a tab */
|
|
|
|
display: inline-block;
|
|
|
|
float:left;
|
|
|
|
margin-left: -2px;
|
|
|
|
padding-right: 6px;
|
|
|
|
}
|
|
|
|
.batch-check {
|
|
|
|
margin: 6px 0px 5px 9px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
2012-11-29 04:26:50 +01:00
|
|
|
&.action-menus{ //Styles for actions-menu implementation
|
2012-11-21 22:01:02 +01:00
|
|
|
ul.ui-tabs-nav{
|
|
|
|
background:none;
|
|
|
|
border:none;
|
|
|
|
display:inline;
|
|
|
|
padding:0;
|
|
|
|
float:left;
|
|
|
|
li{
|
|
|
|
display:inline;
|
|
|
|
background:none;
|
|
|
|
border:none;
|
|
|
|
padding:0;
|
2012-11-29 04:26:50 +01:00
|
|
|
border-bottom:none !important; //over-ride jquery-ui style (which also has important)
|
2012-11-21 22:01:02 +01:00
|
|
|
|
|
|
|
&:hover, &:focus, &:active{
|
|
|
|
@include box-shadow(none);
|
|
|
|
outline:none;
|
|
|
|
}
|
|
|
|
a{
|
|
|
|
color: $color-text-blue-link;
|
|
|
|
@include text-shadow(#fff 0 1px 1px);
|
|
|
|
padding:0 0 0 10px;
|
|
|
|
line-height:24px;
|
|
|
|
|
|
|
|
&:hover, &:focus, &:active{
|
|
|
|
@include box-shadow(none);
|
|
|
|
outline:none;
|
|
|
|
}
|
|
|
|
&:hover{
|
|
|
|
@include text-shadow(#fff 0 10px 10px);
|
|
|
|
color: darken($color-text-blue-link,8%);
|
|
|
|
&:after{
|
|
|
|
border-bottom: 4px solid darken($color-text-blue-link,8%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Style the tab panels */
|
|
|
|
.ss-ui-action-tab.ui-tabs-panel{
|
2012-11-29 04:26:50 +01:00
|
|
|
@include tightSpacing;
|
|
|
|
background:#f8f8f8 !important; //Because ie7 doesn't understand what the 'C' in CSS stands for
|
2012-11-21 22:01:02 +01:00
|
|
|
border:$border;
|
|
|
|
border-top:none;
|
2012-11-29 04:26:50 +01:00
|
|
|
clear:both;
|
|
|
|
display:block;
|
|
|
|
float:left;
|
|
|
|
margin:0;
|
2012-11-21 22:01:02 +01:00
|
|
|
padding:10px;
|
|
|
|
padding-top:15px;
|
2012-11-29 04:26:50 +01:00
|
|
|
position:absolute;
|
|
|
|
top:30px;
|
|
|
|
width:202px;
|
|
|
|
z-index:1;
|
2012-11-21 22:01:02 +01:00
|
|
|
&.first {
|
|
|
|
left: 0;
|
|
|
|
width: 203px;
|
|
|
|
}
|
|
|
|
.ui-icon {
|
|
|
|
padding-right: 0;
|
|
|
|
}
|
|
|
|
.tab-nav-link, .ss-ui-button {
|
|
|
|
font-size: 12px;
|
2012-11-29 04:26:50 +01:00
|
|
|
}
|
|
|
|
#PageType ul{
|
|
|
|
padding:0;
|
|
|
|
li{
|
|
|
|
padding:4px 5px;
|
|
|
|
}
|
|
|
|
}
|
2012-11-21 22:01:02 +01:00
|
|
|
}
|
|
|
|
.last .ss-ui-action-tab{
|
|
|
|
right:-1px;
|
|
|
|
left:auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**********************
|
2012-11-29 04:26:50 +01:00
|
|
|
Styles for edit page action menus
|
2012-11-21 22:01:02 +01:00
|
|
|
************************/
|
2012-11-29 04:26:50 +01:00
|
|
|
.cms-content-actions .Actions{
|
|
|
|
overflow:visible; //for testing (changed in another branch)
|
2012-11-21 22:01:02 +01:00
|
|
|
|
2012-11-30 01:42:43 +01:00
|
|
|
.ss-ui-action-tabset{
|
2012-11-21 22:01:02 +01:00
|
|
|
ul.ui-tabs-nav {
|
|
|
|
margin: 0;
|
|
|
|
li {
|
|
|
|
a.ui-tabs-anchor {
|
|
|
|
font-weight: normal;
|
|
|
|
font-size: 13px;
|
|
|
|
line-height: 24px;
|
|
|
|
padding-right: 25px;
|
|
|
|
&:after {
|
|
|
|
background: sprite($sprites32, arrow_down_lighter) no-repeat;
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
content: "";
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 6px;
|
|
|
|
border-bottom: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
&:hover:after {
|
|
|
|
border-bottom: 0;
|
|
|
|
background: sprite($sprites32, arrow_down_darker) no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
&.ui-state-active a.ui-tabs-anchor {
|
|
|
|
&:after {
|
|
|
|
background: sprite($sprites32, arrow_up_lighter) no-repeat;
|
|
|
|
}
|
|
|
|
&:hover:after {
|
|
|
|
background: sprite($sprites32, arrow_up_darker) no-repeat;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.ui-tabs-panel{
|
|
|
|
@include clearfix;
|
|
|
|
@include border-top-radius(3px);
|
|
|
|
@include border-bottom-radius(0);
|
|
|
|
@include tightSpacing;
|
|
|
|
background-color: $tab-panel-texture-color;
|
|
|
|
border:1px solid #ccc;
|
|
|
|
border-bottom:1px solid $tab-panel-texture-color;
|
|
|
|
clear:both;
|
|
|
|
display:block;
|
|
|
|
position:absolute;
|
|
|
|
top:-204px;
|
|
|
|
width:190px; /* same width as buttons within panel */
|
|
|
|
z-index:1;
|
|
|
|
padding:10px;
|
|
|
|
margin:0;
|
|
|
|
margin-top:1px;
|
|
|
|
.chzn-container-single .chzn-single{
|
|
|
|
padding: 0 0 0 5px;
|
|
|
|
float:none;
|
|
|
|
}
|
|
|
|
@extend .button-no-style;
|
|
|
|
button.ss-ui-button{
|
|
|
|
&:hover, &:focus, &:active{
|
|
|
|
/*text-decoration:underline;*/
|
|
|
|
background-color: darken($tab-panel-texture-color,4%);
|
|
|
|
@include box-shadow(none);
|
|
|
|
outline:none;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.cms-sitetree-information {
|
|
|
|
border-bottom: 1px solid $color-light-separator;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
p.meta-info {
|
|
|
|
color: #999;
|
|
|
|
font-size: 11px;
|
|
|
|
line-height: 16px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.last .ui-tabs-panel.ss-ui-action-tab{
|
|
|
|
right:-1px;
|
|
|
|
left:auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Styles for the cms-actions in tree view, to use more limited space.
|
|
|
|
Title hidden in tree view, until hover/active state added. Active is applied
|
|
|
|
to the first tab within the template, so there should always be one title
|
|
|
|
visible. Added and removed with js in TabSet.js */
|
|
|
|
.cms-tree-view-sidebar{
|
|
|
|
min-width: 176px; /* for when the scrollbar is present & find dropdown open */
|
2012-11-29 04:26:50 +01:00
|
|
|
.ss-ui-action-tabset{
|
2012-11-21 22:01:02 +01:00
|
|
|
ul.ui-tabs-nav{
|
|
|
|
>li{
|
|
|
|
width: auto;
|
|
|
|
a.tab-nav-link{
|
|
|
|
width:30px;
|
|
|
|
overflow:hidden;
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
padding-right:0;
|
|
|
|
@include duration(0.5s);
|
|
|
|
&.active{
|
|
|
|
width:110px;
|
|
|
|
@include duration(0.5s);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.tabset-open, &.tabset-open-last {
|
|
|
|
ul.ui-tabs-nav,
|
|
|
|
ul.ui-tabs-nav li.first,
|
|
|
|
ul.ui-tabs-nav li.last {
|
|
|
|
@include border-bottom-right-radius(0);
|
|
|
|
@include border-bottom-left-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-panel.ss-ui-action-tab {
|
|
|
|
width:162px;
|
|
|
|
padding:10px 6px;
|
|
|
|
.field {
|
|
|
|
max-width:160px;
|
|
|
|
}
|
|
|
|
.ui-icon {
|
|
|
|
padding-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.last .ui-tabs-panel.ss-ui-action-tab {
|
|
|
|
right:0;
|
|
|
|
left:auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|