Subversion Repositories web.active

/**
 * InputfieldForm
 *
 */


.InputfieldForm {

  margin-bottom: 1em;

  .Inputfields,
  .Inputfields > .Inputfield {
    list-style: none;
    padding: 0;
  }

  .Inputfields {

    .Inputfields {
      /* nested .Inputfields list needs no bottom margin since it'll already be offset from the parent's padding */
      margin-bottom: 0; 
    }

    > .InputfieldColumnWidth {
      /* an Inputfield that has a percentage width assigned to it */
      float: left; 
      clear: none; 
      margin-top: 0; 
    }

    .InputfieldColumnWidthFirst,
    .InputfieldColumnWidth + .InputfieldSubmit {
      /* first Inputfield with a percent width... */
      /* ...or the last percentage-width Inputifeld before the submit button */
      clear: both; 
      margin-left: 0; 
    }
      
    .InputfieldColumnWidthFirstTmp, 
    .InputfieldColumnWidthFirst.InputfieldStateHidden + .Inputfield {
      /* for support of inputfield dependencies */
      clear: both;
      margin-left: 0; 
    }

    .InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) .InputfieldHeader,
    .InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) .InputfieldContent {
      /* hide left border */ 
      margin-left: -1px; 
    }

    /**
     * Margin and padding tweaks to prevent doubled visual whitespace
     *
     */

    > .Inputfield:not(.InputfieldSubmit) > .InputfieldContent > *:first-child,
    > .Inputfield > .InputfieldContent > div > *:first-child,
    > .Inputfield:first-child {
      /* first child element of an Inputfield or it's content needs no top margin since it is already padded */
      margin-top: 0;
    }

    // .Inputfields > .Inputfield:last-child, // removed per #305
    > .Inputfield > .InputfieldContent > *:last-child {
      /* last child element in an Inputfield content needs no margin since it is already padded */
      margin-bottom: 0;
    }
    
  }

}

.Inputfields {

  height: auto;

  label {
    display: block;
  }

  .Inputfield {
    margin-bottom: -1px; /* non doubled border */
    margin-top: 0;
    background: $text-bg; 
    color: $text-color; 

    p.notes {
      margin-bottom: 0; 
    }

    &.ui-state-error {
      border: none; 
    }

    select + ol {
      /* i.e. asmSelect */ 
      margin-top: 0.1em;
    }

  }

  > .Inputfield {
    display: block;
    clear: both; 
  }

  .InputfieldStateToggle {
    cursor: pointer;

    span.ui-icon:first-child,
    i.toggle-icon {
      /* the open/close icon that goes with most Inputfields */
      float: right; 
      padding-right: 0.25em; 
    }
    .ui-icon + .ui-icon,
    i + i {
      margin-right: 0.5em; 
      margin-left: none; 
    }
    i.toggle-icon {
      padding-right: 0.5em;
      margin-right: 0;
      color: lighten($label-link-color, 60%);
      line-height: 1.7em;
    }
  }

  .InputfieldStateCollapsed {

    .InputfieldHeader {
      /* different style for collapsed header */
      display: block;
      padding-bottom: 0.75em;
      background: $label-link-collapsed-bg; 
      border: 1px solid $subtle-border; 
      color: $label-link-collapsed-color; 
    
      &:hover {
        /* style for collapsed header when hovered */
        color: $label-link-hover-color; 
        border-color: $subtle-border; 
        background: $text-bg; 
      }

      /* Add ellipsis to collapsed fields per ceberlin */
      &:after{
        content: " \2026";
      }

    }
    .InputfieldContent {
      /* collapsed Inputfields don't show their content (only header) */
      display: none;
    }
  }

  .InputfieldHeader,
  .InputfieldWrapper > .description {
    background: $label-link-bg; 
    border: 1px solid $subtle-border; 
    border-bottom: none; 
    color: $label-link-color; 
  }
    .InputfieldHeader:hover {
      color: $label-link-hover-color; 
    }
    .InputfieldWrapper > .description {
      margin: 0;
      padding-bottom: 1em; 
      margin-bottom: -1em; 
    }

  .InputfieldHeader + .InputfieldContent {
    padding: 0.25em 1em 1.25em 1em;
    border: 1px solid $subtle-border; 
    border-top: none; 
    background: $text-bg; 

  }

  /**
   * InputfieldMarkup
   *
   */

  .InputfieldMarkup .InputfieldContent {
    border: 1px solid $subtle-border; 
    margin-top: 1em; 
    padding: 1em;
  }
    .InputfieldMarkup .InputfieldHeader + .InputfieldContent {
      border-top: none; 
      margin-top: 0;
      padding-top: 0;
    }

  /**
   * Repeaters
   *
   */

  .InputfieldRepeater > .InputfieldContent {

    .InputfieldRepeaterItem {
      margin-bottom: 1.25em;

      > .InputfieldHeader {
        border: none;
        background: $item-header-bg; 
        color: $item-header-color; 

        a {
          color: $item-header-color; 
          cursor: pointer; 
          
          &:hover {
            background: $item-header-hover-bg; 
            color: $item-header-hover-color; 
            border: none; 
          }
        }
          
        i.toggle-icon {
          color: $item-header-color; 
        }

        &.ui-state-error {
          text-decoration: line-through; 
          background: $error-bg; 
          border: none; 
        }

      }

      > .InputfieldContent {
        padding: 0;
        border: none; 
      }

      &.InputfieldStateCollapsed {
        margin-bottom: 1em; 
      }
    }
  }

  /**
   * Item and file lists
   *
   */

  .InputfieldFileList {
    > li {
      margin-top: 0;
    }
    .InputfieldFileItem {
      border: $item-border; 

      .ui-widget-content {
        border: none; 
      }
    }
  }

  .InputfieldItemList {

    .InputfieldItemHeader {
      /* file or repeater item header */
      border: none;
      background: $item-header-bg; 
      color: $item-header-color; 
      padding: 0.5em;
      cursor: move; 
      font-weight: $normal-weight;

      a {
        /* link in file or repeater item header */
        color: $item-header-color; /* WHITE */
      }

      &:hover {
        /* file or repeater item header in hover state */
        background: $item-header-hover-bg; 
        color: $item-header-hover-color; 
        border: none; 

        a {
          color: $item-header-hover-color; 
        }
      }

      .ui-icon {
        margin-top: 3px; 
      }

      &.ui-state-error {
        /* deleted item state */
        text-decoration: line-through; 
        background: $error-bg; 
        border: none; 
      }
    }

    .InputfieldItemList {
      /* nested item list */ 
      .InputfieldItemHeader:not(:hover):not(.ui-state-error) {
        /* lighten up nested item list headers use a different color */
        background: $ui-state-default-bg; 
        color: $ui-state-default-color; 
      }
    }

  }

  .InputfieldItemList:not(.InputfieldStateCollapsed) > .InputfieldHeader,
  .InputfieldFieldset:not(.InputfieldStateCollapsed) > .InputfieldHeader,
  .InputfieldFieldsetOpen:not(.InputfieldStateCollapsed) > .InputfieldHeader,
  .InputfieldItemList > .InputfieldHeader + .InputfieldContent,
  .InputfieldFieldset > .InputfieldHeader + .InputfieldContent,
  .InputfieldFieldsetOpen > .InputfieldHeader + .InputfieldContent {
    /* Inputfields containing other items get a different background color */
    background: transparentize($subtle-bg, 0.2); 
  }

  .hasLangTabs:not(.InputfieldStateCollapsed) > .InputfieldHeader, 
  .InputfieldItemList:not(.InputfieldStateCollapsed) > .InputfieldHeader,
  .InputfieldFieldset:not(.InputfieldStateCollapsed):not(.InputfieldRepeaterItem) > .InputfieldHeader,
  .InputfieldFieldsetOpen:not(.InputfieldStateCollapsed) > .InputfieldHeader {
    background: transparentize($subtle-bg, 0.5); 
    background: -moz-linear-gradient(top, transparentize($subtle-bg, 0.8) 0%, transparentize($subtle-bg, 0.2) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, transparentize($subtle-bg, 0.8) 0%, transparentize($subtle-bg, 0.2) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, transparentize($subtle-bg, 0.8) 0%, transparentize($subtle-bg, 0.2) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, transparentize($subtle-bg, 0.8) 0%, transparentize($subtle-bg, 0.2) 100%); /* IE10+ */
    background: linear-gradient(top, transparentize($subtle-bg, 0.8) 0%, transparentize($subtle-bg, 0.2) 100%); /* W3C */
  }

  .InputfieldItemList .InputfieldItemList:not(.InputfieldStateCollapsed) > .InputfieldHeader,
  .InputfieldItemList .InputfieldItemList > .InputfieldHeader + .InputfieldContent {
    /* unless the item is already a nested item list, then we are a little mroe subtle with it */ 
    background: transparentize($subtle-bg, 0.6); 
  }

  .InputfieldItemList > .InputfieldHeader + .InputfieldContent.ui-state-hover {
    /* drag n drop upload */
    background: darken($subtle-bg, 5%);
  }

  .InputfieldPageNameURL {
    /* page name */
    font-size: 0.875em; 
  }

}

/**
 * Soma clearfix for inputfields
 *
 */

.Inputfields > .Inputfield > .InputfieldContent:before,
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
    content: " ";
    display: table;
}
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
    clear: both;
}

/**
 * Inputfield containers (InputfieldHeader, InputfieldContent) 
 *
 */

.Inputfields .InputfieldHeader, 
.InputfieldForm .InputfieldHeader, 
.InputfieldForm label.InputfieldHeader,
.InputfieldWrapper > .description {
  /* typically the Inputfield's <label> */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none; /* prevent selection of this element */

  display: block;
  padding: 0.75em 0.25em 0.25em 1em;
  margin: 0;
  font-weight: $bold-weight; 
}

.Inputfields .Inputfield:not(.InputfieldStateCollapsed) > .InputfieldHeaderHidden > span {
  display: none; 
}

/**
 * Required state
 *
 */

.InputfieldStateRequired > .InputfieldHeader:first-child:after {
  /* Add asterisk to indicate field is required */
  content: ' *';
  color: $red; 
}

/****************************************************************************
 * Specific Inputfield types
 *
 * Defined here rather than as separate CSS files because their styles are 
 * shared or there may be relationships with other Inputfields
 *
 */

.Inputfields .InputfieldHidden {
  display: none; 
}

/**
 * Buttons
 *
 */

.InputfieldForm .Inputfields .InputfieldSubmit,
.InputfieldForm .Inputfields .InputfieldButton {
  /* enable horizontal stack of buttons */
  margin-top: 0;
  padding-top: 0;
  clear: none; 
  background: none; 

  .InputfieldHeader {
    /* no need for a header with buttons */
    display: none; 
  }

  .InputfieldContent {
    /* we don't need our visual furniture for buttons */
    padding: 0; 
    margin: 0;
    margin-top: 1em; 
    background: none; 
    border: none; 
  }
}


.Inputfields > .InputfieldButton,
.Inputfields > .InputfieldSubmit {
  float: left; 
  margin-bottom: 0.5em; 
  margin-top: 0;
}
  .Inputfields .InputfieldButton + .InputfieldButton, 
  .Inputfields .InputfieldSubmit + .InputfieldSubmit {
    /* two buttons next to each other */
    float: left; 
    margin-left: 0.5em; 
    margin-top: 0;
  }

  .Inputfields .Inputfield:not(.InputfieldSubmit):not(.InputfieldButton) + .InputfieldButton,
  .Inputfields .Inputfield:not(.InputfieldSubmit):not(.InputfieldButton) + .InputfieldSubmit {
    clear: left; 
  }


.Inputfield .LanguageSupport {
  margin-bottom: 1em; 
}
.Inputfield .LanguageSupport:last-child {
  margin-bottom: 0;
}

/****************************************************************************
 * Render Value Mode 
 *
 * Used when only values are being rendered in the form (no inputs)
 *
 */

.InputfieldRenderValueMode {

  .InputfieldSelect li,
  .InputfieldRadios li,
  .InputfieldCheckboxes li {
        margin-top: 0;
    margin-bottom: 0;
  }

  .InputfieldSubmit,
  .InputfieldButton {
    display: none; 
  }
}


/****************************************************************************
 * ui-tabs and Language Tabs
 *
 */

$ui-tabs-container-bg: transparentize($subtle-bg, 0.3); /* note same as item nested item list header */

.Inputfields .langTabsContainer,
#content .Inputfields .langTabsContainer {
  padding: 0;

  p.description {
    background: $ui-tabs-container-bg;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    margin-bottom: 0;
  }
  p.notes {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-top: 0;
  }
}

.ui-tabs,
#content .ui-tabs {

  border-color: $subtle-border;
  border: none;

  .ui-tabs-nav {
    background: $ui-tabs-container-bg;
    border: none; 
    padding-bottom: 0; 
    padding-right: 1em;
    padding-left: 0.5em;
    border-bottom: 1px solid $subtle-border;
    @include border-radius(0);

    > li {
      position: relative;
      top: 1px;
      margin-top: 0.15em; 

      &:first-child {
        margin-left: 0.5em; 
      }
    }

    .ui-state-default {
      background: $wiretab-link-bg;   
      border: $wiretab-link-border;
      border-bottom:none;

      a.ui-tabs-anchor {
        color: $wiretab-link-color;
      }
    }

    .ui-tabs-active {
      background: $wiretab-link-current-bg; 
      border: $wiretab-link-current-border;
      border-bottom:none;

      a.ui-tabs-anchor {
        color: $wiretab-link-current-color;
        /*
        position: relative;
        top: 1px; 
        */
      }
    }
    .ui-state-hover {
      background: $wiretab-link-hover-bg; 
      border: $wiretab-link-hover-border;
      border-bottom:none;

      a.ui-tabs-anchor {
        color: $wiretab-link-hover-color;
      }
    }

    a.ui-tabs-anchor {
      font-weight: normal;
      background: none; 

    }
  }
}
.InputfieldFile .ui-tabs,
.InputfieldImage .ui-tabs,
#content .InputfieldFile .ui-tabs,
#content .InputfieldImage .ui-tabs {
  border: 1px solid $subtle-border;
  border-radius: 0;
}
.InputfieldFile .langTabsContainer + .InputfieldFileTags,
.InputfieldImage .langTabsContainer + .InputfieldFileTags {
  margin-top: 0.5em;
}

.ui-tabs-panel,
#content .ui-tabs-panel {
  margin-bottom: 0;
}

.pw-fouc-fix .Inputfields .InputfieldHeader, 
#content.pw-fouc-fix .Inputfields .InputfieldHeader {
  // don't show right-aligned header icons when page is rendering 
  .toggle-icon, 
  .langTabsToggle {
    display: none; 
  }
}