silex-website-builder-goodevent/src/css/property-tool.less

Free and easy website builder for everyone.

.format-buttons {
  label {
    &.p {
      font-size: 13px;
    }
    &.b {
      font-weight: bold;
    }
    &.u {
      text-decoration: underline;
    }
    &.i {
      font-style: italic;
    }
    &.h1 {
      font-weight: bold;
      font-size: 18px;
      padding-top: 4px;
      padding-bottom: 6px;
    }
    &.h {
      font-weight: bold;
      font-size: 16px;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    &.h {
      font-weight: bold;
      font-size: 14px;
      padding-top: 7px;
      padding-bottom: 3px;
    }
    &.a {
      font-size: 14px;
      padding-top: 7px;
      padding-bottom: 3px;
    }
  }
}

.small-text-input {
  width: 52px;
  float: left;
  margin: 0 4px;
}

.silex-property-tool {
  color: @silexlightergrey;
  position: fixed;
  right: 0;
  left: @propertiesToolWidth;
  top: 0;
  overflow: hidden;
  bottom: 0;
  background-color: @silexmediumgrey;
  font-size: small;
  a.help-section, a.help-section:visited {
    /* help links */
    color: @silexlightergrey;
    outline: none;
    text-align: right;
    display: block;
    padding: 0 10px;
  }
  hr {
    margin: 7px 0 3px;
    max-width: none;
    border: none;
    border-top: 1px solid @silexdarkergrey;
    clear: both;
  }

  &.design-tab {
    input {
      display: block;
    }
  }

  /* visibility of the content depends on tabs */
  &.params-tab .main-container > span {
    display: none;
    &.prodotype-component-editor {
      display: initial;
    }
    .image-preview {
      min-height: 100px;
      background-size: cover;
      background-position: center;
    }
    input[type=file] {
      color: @silexdarkgrey; /* no need to display "no file chosen" */
    }
  }
  .main-container span.prodotype-component-editor {
    display: none;
  }
  .main-container span.prodotype-style-editor {
    display: none;
  }
  /* visibility of the content depends on tabs */
  &.style-tab .main-container > span {
    display: none;
    &.prodotype-style-editor {
      display: initial;
    }
  }
  .tabs {
    border-bottom: 1px solid @silexdarkergrey;
    z-index: 1; /* over the scroll bar */
    position: absolute;
    width: 100%;

    height: @contextMenuHeight;
    background-color: @silexdarkgrey;

    .tab {
      cursor: pointer;
      padding: 12px;
      border-right: 1px solid @silexdarkgrey;
      background-color: @silexmediumdarkgrey;
      &.on {
        background-color: @silexmediumgrey;
        border: 1px solid @silexdarkgrey;
        border-bottom-color: @silexmediumgrey;
      }
    }
  }

  /* */

  .main-container {
    padding: 0;
    width: 100%;
    border-bottom: 1px solid @silexdarkgrey;
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    bottom: 0;
    top: @contextMenuHeight;
    position: absolute;

    .expandable > *, section > * {
      max-width: 97%; /* avoid horizontal scroll bar in the property tool */
    }
    h1.name {
      display: inline-block;
      margin-top: 10px;
    }
    .help {
      float: right;
      margin: 10px;
      padding: 10px;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      line-height: 0;
    }
    .prop-editor-base {
      width: 100%;
      flex: 1 1 auto;
      &.half-col {
        width: 50%;
      }
    }
    .prodotype-component-editor {
      .sub-editors .prop-editor-base {
        padding: 5px 0;
        border: none;
      }
    }

    /* size set by workspace.js when the user resizes the property tool */
    &.size1 {
    }

    &.size2 {
    }

    &.size3 {
    }

    select {
      background-color: @silexlightgrey;
    }
    input, select {
      height: 30px;
      width: 93%;
      overflow: hidden;
      // margin-left: 2.5%;

      &:focus {
        outline: none;
        border: 1px solid @silexdarkgrey;
      }
    }
    > span {
      clear: both;
    }
    input.checkbox {
      width: 15px;
      height: 15px;
      margin: 6px;
      float: left;
      min-width: 0;
    }
    .pages-container {
      margin-top: 10px;
      input.checkbox+label {
        display: block;
        padding: 13px 0;
        line-height: 0;
      }
      .page-label {
        // trucate page names
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 0;
        line-height: 1px; // needed for firefox to show ellipsis
      }
    }
    .view-on-mobile {
      input.checkbox+label {
        float: left;
      }
    }
    .button {
      .small-combo;
      display: inline;
      &.disabled {
        color: graytext;
        background-color: @silexmediumdarkgrey;
      }
    }

  }

  fieldset {
    margin: 15px 0;
    border: 1px solid @silexlightergrey;
    display: inline;
  }

  /* only the inline editor stays 100% width */
  fieldset.style-property {
    max-width: none;
  }

  .help-icon {
    color: #a9a9a9;
    font-size: medium;
    margin-left: 10px;
  }

  .xsmall-font {
    font-size: 13px;
    font-weight: lighter;
    color: #FFF;
    line-height: 22px;
  }

  .color-button {
    display: block;
    width: 30px;
    float: left;
    padding-top: 2px;

    .goog-inline-block {
      display: block;
    }

  }

  .image-url-input {
    float: left;
    margin-top: 2px;
    width: 185px;
  }

  .expandable {
    margin-top: -4px;
    display: inline-block;
    width: 100%;
    legend, .expandable-legend {
      background-color: @silexmediumgrey;
      font-weight: 700;
      font-size: 13px;
      padding-top: 8px;
      cursor: default;
      line-height: 2;
      width: 100%;
      cursor: pointer;
      border-top: 1px solid @silexdarkgrey;
      margin-top: 2px;
      .fa {
        margin-right: 5px;
      }
    }
    .body {
      margin: 0;
      margin-top: 5px;
      max-height: 0;
      overflow: hidden;
      transition: max-height @silexUiTransitions;
    }
    &.expanded .body {
      max-height: inherit;
      margin: 10px;
    }
  }
  .expandable:last-child,
  .prodotype-component-editor .prop-editor-base:last-child {
    border-bottom: 1px solid @silexdarkgrey; /* last "accordion" header has a border */
  }

  .tab-page {
    .border-placement-container {
      border-bottom: 1px solid @silexdarkgrey;
      margin-bottom: 5px;
      padding-bottom: 15px;
      clear: both;
    }

    label.corner-placement-label,
    label.border-placement-label {
      display: block;
      width: 100%;
      margin: 0;
      line-height: 22px;
    }

    .half-col {
        display: inline-block;
        width: 45%;
      }

  }

  .background-property {
    line-height: 22px;

    input.checkbox {
      margin: 3px;
    }
  }

  .background-editor {
    .background-image {
      select.combobox {
        .small-combo;
        margin-right: 5px;
        margin-top: 5px;
      }

    }

  }

  .opacity-input {
    width: 91px;
  }

  fieldset {
    margin-bottom: 10px;
  }

  /*
    a box to edit color:
    * label + text for alpha
    * color input tag
   */
  .color-edit-container {
    .color-edit-label {
      float: left;
      margin: 4px;
      &.alpha {
        margin: 6px 0;
      }
    }
    .color-edit-color-input,
    .color-edit-text-input {
      .small-text-input();
    }
    .color-edit-text-input {
      clear: left;
    }
    .color-edit-transparent-check {
      clear: left;
      margin: 6px;
      float: left;
      width: 15px;
      height: 15px;
    }
  }

  .position-editor {

    label {
      float: left;
      margin: 5px 5px 5px 0px;
      width: 10px;
      text-align: right;
      color: @silexlightergrey;
      font-size: 11px;
    }
    .two-col label,
    .two-col input {
      width: 42%;
      margin: 5px;
      text-align: left;
    }

    .right-bottom {
      width: 25px;
    }

    .z-index-label {
      text-align: center;
      width: 69px;
    }

    .new-line {
      clear: left;
    }
    .input-with-unit {
      display: inline-block;
      width: 44%;
      margin: 0px 10px 0px 0;
      label.unit {
        font-size: 70%;
        margin-left: 0;
        margin-top: 5px;
        padding: 4px;
        width: 0;
      }
      input {
        width: 75%;
        float: left;
        font-size: 12px;
        text-align: left;
        margin: 0;
      }
    }
  }

  .page-container {
    margin: 4px 0;
  }

  .title1 {
    color: @silexlightergrey;
    margin: 0;
    font-weight: bold;
    padding: 10px 0 0 19px;
    height: 15px;
    font-size: 14px;
    text-transform: uppercase;
    background-color: @silexmediumgrey;
  }

  .element-style-editor{
    margin-top: 10px;
    height: 400px;
  }
  .silex-input {
    // this is the tags-input component for css classes
    height: auto;
    .tag {
      color: @silexlightergrey;
      background-color: @silexmediumgrey;
      border: none;
      padding-bottom: 3px;
    }
  }

  .opacity-property {

    .opacity-input {
      .small-text-input();
    }

  }


  .border-property {

    .border-width-container {
      width: 100%;
      clear: both;
      display: block;

      label {
        .small-text-input();
        margin: 4px;
      }

      input.border-width-input {
        .small-text-input();
        clear: left;
      }
    }
    select.combobox {
      .small-combo;
    }
    select.combobox {
      .small-combo;
      margin: 5px 10px;
    }

    .border-type-conainer {
      float: left;
      width: 100%;

      div.border-type-label {
        float: left;
        margin: 8px;
      }
      .border-type-combo-box {
        background: #FFF;
        .small-text-input();
      }
    }

    .border-radius-container {

      .border-radius-width-container {
        float: left;
        width: 100%;
        margin: 5px 0;

        label.border-radius-label {
          float: left;
          margin: 8px;
        }

        input.corner-radius-input {
          .small-text-input();
        }

      }

    }
  }
  .editor-container {
    top: @contextMenuHeight;
    bottom: 0;
  }
  .prodotype-style-editor-menu > div {
    padding: 10px;
  }
  .prodotype-style-editor-menu .labels {
    .format-buttons;
    label {
      &.h1 {
        font-size: 16px;
        height: 0;
      }
      &.h2, &.h3 { font-weight: bold; }

    }
  }
  /* */
  .prodotype-component-editor, .prodotype-style-editor {
    .expandable;
    .style-editor-tag-form {
      .button-bar-container-template;
      // margin-left: 2.5%;
      padding-bottom: 15px;
      label {
        width: 15.8%;
        min-width: 30px;
        min-height: 17px;
      }
    }
    border-top: 1px solid @silexdarkgrey;
    &.hide-panel {
      display: none;
    }
    & > section > ul,
    & > .prodotype-container > section > ul {
      padding-left: 0;
      display: flex;
      flex-wrap: wrap;
    }
    /* prodotype editors labels, e.g. Heading1 */
    .prop-editor-base > label, .class-name-style-label {
      .expandable-legend;
      display: block;
      padding-bottom: 5px;
    }
    .prop-editor-base.prop-editor-no-expandable > label {
      font-size: 10px;
    }
  }
  .prodotype-style-editor .prodotype-style-editor-menu > label:first-child {
    border-top: none; /* no border just bellow the tabs */
  }
  .prodotype-style-editor {
    /* buttons */
    .icon-btn {
      .button-template;
      width: 13px;
      height: 7px;
      padding: 7px 7px 13px 7px;
      margin: 4px 2px 10px 0;
    }
    .icon-btn-first {
      margin-left: 7px;
    }
    .icon-btn-last {
      margin-right: 8px;
    }
    .icon-btn-left {
      float: left;
    }
    .icon-btn-right {
      float: right;
    }
    /* all labels in the style editor */
    .prodotype-container .prop-editor-name.prop-editor-no-expandable {
      cursor: default;
      border-top: none;
    }
    /* style the title of the ditor, i.e. "Paragraph", "Link"... */
    .prodotype-container > .editor > ul > .prop-editor-base > .prop-editor-name {
      border-top: 1px solid @silexdarkergrey;
      font-size: 12px;
      text-align: center;
      color: @silexlightblue;
      font-weight: normal;
      cursor: default;
    }

    /* highlight selected label, e.g. H1 */
    .hidden { display: none; }

    /* Pure CSS to show / hide prodotype editors (tags H1, H2, H3, P, A) */
    .prodotype-container .editor > ul > .prop-editor-base { display: none; }

    .loop(@counter) when (@counter > 0) {
      /* highlight selected label, e.g. H1 */
      .style-editor-tag-form input:checked:nth-child(@{counter}) ~
      .labels label:nth-child(@{counter}) { .button-template-selected }

      /* Pure CSS to show / hide prodotype editors (tags H1, H2, H3, P, A) */
      .style-editor-tag-form input:checked:nth-child(@{counter}) ~
      .prodotype-container .editor > ul > .prop-editor-base:nth-child(@{counter}) { display: initial; }

      .loop((@counter - 1));    // next iteration
    }
    .loop(18);
    // hide text styles and edit notext
    .style-editor-notext {
      .style-editor-text {
        display: none !important;
      }
      .style-editor-tag-notext {
        display: block !important;
      }
    }

    /* vivibility checkbox (mobile only or not) */
    .visibility-style-label {
      .button-template;
      margin: 0;
      padding: 0;
      height: 28px;
      width: 28px;
      font-size: 25px;
    }
    .visibility-style-checkbox:checked ~ .visibility-style-label {
      .button-template-selected;
    }
    .class-name-block {
      display: flex;
      padding: 0 2.5%; /* select boxes have width:95% => padding of this container is 5% => 2.5% each side */
      select {
        border-left: none;
        margin: 0;
      }
    }
    .class-name-style-label {
      display: flex;
      justify-content: space-between;
      padding: 0;
      margin: 5px auto;
      width: 95%;
    }
    select.combobox.pseudoclass-style-combo-box {
      width: 103px;
      height: 25px;
      text-align: center;
      background-color: @silexlightgrey;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0;
      margin-top: 2px;
    }
    .selection-info-container {
      .dot {
        margin: 0 7px;
        cursor: default;
      }
      span {
        cursor: pointer;
        margin-right: 3px;
      }
      span:hover span {
        text-decoration: underline;
      }
    }
    .toggle-button {
      .button-bar-template;
      height: 30px;
      min-width: 30px;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 18px;
      &:first-child {
        .button-bar-first;
      }
      &:last-child {
        .button-bar-last;
      }
      &[data-selected=true] {
        .button-template-selected;
      }
    }
    .prop-editor-container {
      display: inline-block; /* for toggle buttons which are floated */
      width: 100%;
    }
    .half-width {
      width: 49%;
      display: inline-block;
    }
    .quarter-width {
      width: 24%;
      display: inline-block;
    }
    .medium-width {
      width: 66%;
      display: inline-block;
    }
    .small-width {
      width: 33%;
      float: right;
    }
    .no-style .style-editor-tag-form {
      visibility: hidden;
    }
  }

}