@import "widgy_common.scss";


/* Mixins
-----------------------------------------*/

$table-cell-min-width: 120px;

@mixin button {
  @include rounded(3px);
  background: $blue;
  border: 0px;
  color: white;
  cursor: pointer;
  display: inline-block;
  height: auto;
  font-weight: bold;
  line-height: 12px;
  padding: 2px 4px;
  width: auto;

  &:hover {
    background: lighten($blue,10%);
    color: white;
  }

  &.cancel {
    background: $grey;
    color: white;
    
    &:hover {
      background: lighten($grey,10%);
    }
  }
  
  &.delete {
    background: $red;
    color: white;
    
    &:hover {
      background: lighten($red,10%);
    }
  }
  
  &.loading {
    @extend %loading;
  }
  
  &[type='submit'] {
    @include rounded(3px);
    background: $green;
    color: white;
    height: auto;
    line-height: 15px;
    font-weight: bold;
    padding: 0px 4px 1px !important;
    
    &:hover {
      background: lighten($green,10%);
    }
  }
  
}


/*| Basic Layout
-----------------------------------------*/
body {
  font-size: 62.5%;
  line-height: 62.5%;
}

body, html {
  line-height: normal;
}


/*| Overlay & Overrides
-----------------------------------------*/
.overlay {
  position: fixed;
  background-color: rgba(255, 255, 255, .3);
  z-index: 100;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.modal {
  @include rounded(5px);
  @include shadow(#999999, 0px, 0px, 10px);

  display: block;
  background-color: #ffffff;
  padding: 20px;
  position: fixed;
  width: 300px;
  height: 500px;
  z-index: 101;
  margin-top: -50px;
  margin-left: -150px;
}


// Mezzanine Override
input[type="text"],
input[type="password"],
input.vDateField,
input.vTimeField,
.change-list form table .vAutocompleteSearchField,
.change-list form table .vM2MAutocompleteSearchField,
.inline-tabular .vAutocompleteSearchField,
.inline-tabular .vM2MAutocompleteSearchField {
  width: 200px;
}

.change-form div.submit-row {
  z-index: 1000;
}

form .aligned p.keywords-field {
  clear: left;
}



/*| Forms
-----------------------------------------*/

$inputFields: "input[type='text'], input[type='password'], input[type='email'], input[type='search'], input[type='number'], textarea";

#{$inputFields}, button {
  &:focus {
    @include inset-shadow(lighten($purple,15%), 0px, 1px, 3px);
    border-color: $purple;
  }
}

#{$inputFields} {
  @include rounded(3px);
  @include inset-shadow($black10,0px,1px,2px);
  border: 1px solid $lightgrey;
  font-weight: normal !important;
  height: auto;
  padding: 6px 4px 5px;
}

textarea {
  height: 120px;
}

/* Widgy
-------------------*/
    
li.node_drop_target {
  @include rounded(3px);
  @include transition;

  border: none !important;
  background: lighten($green,25%) !important;
  font-size: 1.0em !important;
  font-style: italic !important;
  height: 1em !important;
  margin: -1em 1em !important;
  padding: 0em !important;
  text-align: center;

  span {
    display: none;
  }

  &:first-child {
    margin-top: 0 !important;
  }

  &:last-child,
  &.previous.nm {
    margin-bottom: 0 !important;
  }

  &.active {
    border: 1px dashed $green !important;
    background: lighten($green,40%) !important;
    color: darken($green,10%) !important;
    height: 3em !important;
    padding: 1em !important;

    span {
      display: block;
    }
  }

  &.previous {
    background: #FF9900 !important;
  }
}

@mixin widgetNodeChildren {
  margin: 0 !important;
  padding: 0 !important;
  
  // (basic editor nodes: li.node.form_builder.form...)
  li.node {
    @include rounded(4px);
    @include shadow($black10,1px,1px,0px);
    @include inset-shadow(transparent,0px,0px,0px);
    background: white;
    list-style: none;
    padding: 0px;
    margin: 0 0 1em 0;

    &:hover {
      cursor: pointer;
    }

    &.deleting {
      @include shadow($black50,0px,5px,15px);
      border-color: $red;

      div.widget {
        p.drag-row {
          span.title {
            color: $red;
          }
        }
      }
    }

    // specific node styles
    &.invisible {
      background-color: inherit;
      padding: 0;
      border: 0 none;

      & > .widget > .nodeChildren:empty {
        display: none;
      }
    }

    &.unknownwidget {
      background-size: 50px 50px;
      background-color: #CCCCCC;
      background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
      background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    }


    // drag & drop styles
    &.being_dragged {
      @include shadow(#999999, 2px, 2px, 5px);
      margin: 0 !important;
      position: fixed;
    }

    // tabbed form nodes
    &.tabbed {
      
      div.current {
        clear: both;
      }
      
      // tab container
      > .widget > .nodeChildren {
        @include default;
        border-bottom: 2px solid $grey;
        margin-bottom: 15px !important;
        padding: 15px 0px 0px 0px !important;
        width: 100% !important;
      
        li.node.formbody,
        li.node.formmeta {
          @include rounded(4px 4px 0px 0px);
          background: #eeeeee !important;
          border-color: #cccccc;
          border-width: 1px 1px 0px 1px;
          color: #999999;
          display: inline-block;
          float: left;
          margin: 0 0 0 .5em !important;
          padding: 0px !important;
          position: relative;
          top: 2px;
          z-index: 10;
    
          .widget {
            background: transparent !important;

            .drag-row {
              @include rounded(0px);
              background: transparent !important;
        
              span.title {
                color: inherit;
              }
            }
          }
    
          &:hover {
            background-color: #fafafa !important;
          }

          &.active {
            background-color: white !important;
            border-bottom: 2px solid white;
            color: #555555;
          }
        }
      }
    }
    
    &.image {
      div.widget {
        div {

          div {

            &.formField {
              position: relative;

              label {
                display: none;
              }
            
              a {
                img {
                  float: left;
                  margin-right: 10px;
                }
              }
              
              span {
                float: left;
                
              }
            
              a.related-lookup {
                position: absolute;
                height: 10px;
                left: 53px;
                top: 25px;
              }
            
              input {
                float: left;
                margin-top: 6px;
                width: 86%;
              }
            
            }
          }
        }
      }
    }
    
    div.widget {
      @include rounded(4px);
      background: white;
      padding: 0px;
      
      p.drag-row {
        @include clearfix;
        @include gradient(#eee,#fff);
        @include rounded(4px);
        display: block;
        float: none;
        height: auto;
        min-height: 20px;
        margin: 0px;
        padding: 2px;
        position: relative;
        width: auto;
        
        span.title {
          color: #666;
          font-size: 13px;
          font-weight: normal;
          line-height: 20px;
        }

        button.edit,
        button.delete {
          float: right;
          margin: 1px 1px 0px 3px;
        }

        .dragHandle {
          left: 0px;
          float: left;
          font-size: 14px;
          position: relative;
          top: 3px;
          cursor: pointer;
        }                      
      }

      // Widget Form / Editor
      div {
        div {
          @include clearfix;
          padding: 0px;
          position: relative;

          &.formField {
            margin-bottom: 10px;
            
            select {
              width: 212px;
            }

            .cke {
              float: left;
            }
            
            &.required {
              label:after {
                content: "*";
                color: $red;
              }
            }
            
            &.error {
              #{$inputFields}, textarea {
                border-color: $red;
              }
              
              ul.errorlist {
                li.error {
                  padding-left: 115px;
                }
              }
            }
            
            p.datetime {
              display: inline;
              float: left;
              width: 50%;
              
              br {
                display: inline;
              }
              
              input[type='text'] {
                margin: 0px 5px;
                width: 100px;
              }
            }
          }
          
          input {
            &[type='checkbox'],
            &[type='radio'] {
              margin-left: 0px;
            }
          }

          label {
            clear: left;
            padding: 0 10px 10px 0;
          }

          textarea {
            max-width: 98.5%;
            width: 98.5%;
          }
          
          .cancel {
            position: absolute;
            right: 55px;
            top: 0px;
          }
        }

        .pagedown-buttonbar {
          clear: both;
          margin: 0px 0px 10px 0px;

          ul {
            margin: 0px;
          }
        }

        .pagedown-preview {
          @include html;
          @include rounded(3px);
          border: dashed 1px $lightgrey;
          margin: 10px 0px;
          padding: 9px;
        }
      }

      input[type='submit'] {
        @include button;
        float: right;
      }

      div.preview {
        padding: 0;
  
        &:not(:empty) {
          padding: 1em;
        }
        
        div.htmlOutput {
          display: block !important;
          float: none !important;
          width: auto !important;
        }
      }
      
      // nested editors within editors
      ul.nodeChildren {
        li.node, li.node_drop_target  {
          margin: 1em;
          
          &.table {
            > div.widget {
              > ul.nodeChildren {
                // table container
                overflow: auto;
                overflow-y: hidden;
                padding-bottom: 20px !important;
              }
            }
          }
                  
          &.tableheader {
            border: 0px;
            margin: 0 1em;
            overflow: visible;
            padding: 0px 0px 0px 60px;
          
            > div.widget {
              > p.drag-row {
                background: white;
                padding: 0px;
                position: relative;
          
                span.dragHandle {
                  font-size: 15px;
                  left: 0px;
                  top: 2px;
                }
          
                span.title {
                  display: block;
                  font-size: 13px;
                  line-height: 22px;
                  padding: 0px;
                }
          
                button.delete {
                  font-size: 9px;
                  line-height: 1em;
                  padding: 1px;
                  position: absolute;
                  top: 4px;
                  right: 4px;
                  width: 15px;
                  z-index: 10;
            
                  i {
                    width: 1em;
                  }
                }
              }
              
              ul.nodeChildren {
                li.tableheaderdata {
                  @include rounded(0px);
                  min-width: $table-cell-min-width;
          
                  > div.widget {
                    > p.drag-row {
                      background: white;
                      padding: 0px;
                      position: relative;
                
                      span.dragHandle {
                        font-size: 15px;
                        left: 0px;
                        top: 2px;
                      }
                
                      span.title {
                        color: $grey;
                        display: block;
                        font-size: 11px;
                        line-height: 22px;
                        padding: 0px;
                      }
                
                      button.delete {
                        font-size: 9px;
                        line-height: 9px;
                        padding: 0px;
                        position: absolute;
                        top: 3px;
                        right: 3px;
                        height: 15px;
                        width: 15px;
                        z-index: 10;
                  
                        i {
                          width: 1em;
                        }
                      }
                    }
                  
                    // regular editors within table header cells
                    ul.nodeChildren {
                      width: auto !important;
                      
                      li {
                        div.widget {
                          p.drag-row {
                            span.dragHandle {
                              font-size: 13px;
                               left: 0px;
                               position: absolute;
                               top: 5px;
                            }
                            
                            span.title {
//                              font-size: 12px;
                              display: none;
//                              padding: 0 0 0 15px;
                            }
                            
                            button {
                              font-size: 9px;
                              line-height: 9px;
                              height: 15px;
                              margin: 0;
                              padding: 0px;
                              width: 15px;
            
                              i {
                                width: 1em;
                              }
                              
                              &.edit {
                                right: 22px;
                              }
                              
                              span {
                                display: none;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          } // tableheader
          
          &.invisible {
            background: transparent;
            border: 0px;
            margin: 0 1em;
            overflow: visible;
            padding: 0px 0px 0px 60px;
            
            div.widget {
              ul.nodeChildren {
                
                li.node.tablerow {
                  border: 0px;
                  margin: 0px;
                  overflow: visible;
                  
                  > div.widget {
                    
                    > p.drag-row {
                      height: 0px;
                      min-height: 0px;
                      padding: 0px;
                      
                      span.dragHandle {
                        font-size: 14px;
                        left: -20px;
                        position: absolute;
                        top: 3px;
                      }
                
                      button.delete {
                        font-size: 9px;
                        line-height: 9px;
                        height: 15px;
                        padding: 0px;
                        position: absolute;
                        top: 3px;
                        left: -40px;
                        width: 15px;
                        z-index: 10;
                  
                        i {
                          width: 1em;
                        }
                        
                        span {
                          display: none;
                        }
                      }

                      button.edit {
                        font-size: 9px;
                        line-height: 9px;
                        height: 15px;
                        padding: 0px;
                        position: absolute;
                        top: 3px;
                        left: -60px;
                        width: 15px;
                        z-index: 10;

                        i {
                          width: 1em;
                        }

                        span {
                          display: none;
                        }
                      }
                    }
                      
                    ul.nodeChildren {
                      border: 0px;
                      
                      > li.node.tabledata {
                        @include rounded(0px);
                        min-width: $table-cell-min-width;
                  
                        > div.widget {
                          min-height: 20px;
                          
                          > p.drag-row {
                            display: none;
                          }
                        }
                      }
                      
                      // Regular editors within table cells
                      li {
                        div.widget {
                          p.drag-row {
                            span.dragHandle {
                              font-size: 13px;
                               left: 2px;
                               position: absolute;
                               top: 3px;
                            }
                            
                            span.title {
//                              font-size: 12px;
                              display: none;
//                              padding: 0 0 0 15px;
                            }
                            
                            button {
                              font-size: 9px;
                              line-height: 9px;
                              height: 15px;
                              margin: 0;
                              padding: 0px;
                              width: 15px;
            
                              i {
                                width: 1em;
                              }
                              
                              &.edit {
                                right: 22px;
                              }
                              
                              span {
                                display: none;
                              }
                            }
                          }
                            
                          textarea {
                            height: 40px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
    
    // major section container styles
    &.maincontent,
    &.sidebar {
      background: transparent;
      padding: 10px;
      
      > div.widget {
        background-color: transparent;
        
        > p.drag-row {
          background: transparent;
          padding-bottom: 0px;
          
          > span.title {
            font-weight: bold;
            font-size: 20px;
            text-transform: capitalize;
          }
        }
      }
    }
    

    
    // internal shelves (form, email widget)
    div.shelf {
      border-bottom: 2px solid $lightgrey;
      display: block;
      float: none;
      margin: 10px;
      padding: 0px 0px 10px 0px;
      width: auto;
      overflow-y: hidden;

      p.title {
        display: none; // hide the form widgets label
      }
      
      > ul.list.nodeChildren {
        // inner shelfItem stacking
        
        li.shelfItem {
          display: inline-block;
          padding: 1px 1px 1px 1px;
          width: 210px !important;

          span.title {
            background-position: 5px 3px;
            font-size: 11px;
            max-width: 160px;
            padding: 4px 0px 2px 26px;
            text-transform: capitalize;
            width: 160px;
          }

          span.icon-move {
            float: right;
            margin-top: 4px;
          }
        }
      }
    }
    
  }
}

// widgy wrapper
div.widgy {
  @include clearfix;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
  

  &:empty, & > .editor:empty {
    @extend %loading;
    height: 100px;
  }

  // editor wrapper
  div.editor {
    background: $reallylightgrey;
    display: inline-block;
    width: 100%;
  
    // another wrapper
    section.node {
      @include rounded(0px);
      @include clearfix;

      display: block;
      float: none;
      margin: 0 !important;
      padding: 15px 10px;
      width: auto;

      // node overlay
      .overlay {
        position: absolute;
      }
      
      // only the first widget/title-bar goes full-width
      > div.widget {
        @include default;
        @include clearfix;
  
        span.title {
          font-family: "Open Sans";
          font-size: 2.4em;
          padding: 5px 0;
        }
        
        p.drag-row {
          button {
            position: relative;
            top: -5px;
          }
        }

        > ul.nodeChildren {
          clear: left;
          float: left;
          width: 63% !important;
        }

        > div.preview {
          // top-level forms
          width: 63%;

          > div {
            margin: 0px 0px 10px 0px;
          }

          .formField {
            clear: both;
            display: block;
            margin: 0px 0px 10px 0px;
          }

          button, input[type='submit'] {
            @include button;
            float: left;
            margin-left: 10px;

            &.cancel {
              line-height: 11px;
              margin-left: 130px;
            }
          }

          p.help_text {
            padding-left: 130px;
          }
        }
      }
      
      // yet another wrapper
      div.widget {
      
        // title bar
        p.drag-row {
          // first span.title does something? not sure what this is for...
          & > span.title {
            background: transparent;
            padding: 5px 0 5px 0px;
          }
        }
        // hidden preview bucket
        div.preview {}
        
        // (widget shelf buttons)
        div.shelf {
          display: inline;
          float: right;
          position: relative;
          width: 35%;
          overflow-y: auto;

          p.title {}
          
          ul.nodeChildren {
            display: inline;
            
            li.shelfItem {
              @include gradient(#eeeeee,#ffffff);
              @include rounded(4px);
              @include shadow($black10,1px,1px,0px);
              @include inset-shadow(#ffffff,-1px,1px,0px);
              border: 1px solid #E0E0E0;
              cursor: pointer;
              display: inline-block;
              height: auto;
              list-style: none;
              margin: 0 4px 4px 0;
              padding: 5px 10px 5px 5px;
              vertical-align: top;
              width: 185px;
    
              span.icon-move {
                color: #999999;
                display: inline;
                float: right;
                font-size: 1.4em;
                margin-top: 8px;
              }
    
              span.title {
                background-position: 5px 9px;
                display: inline;
                float: left;
                font-size: 1.2em;
                line-height: 1.4em;
                padding: 5px 0 5px 30px;
                text-transform: capitalize;
                max-width: 130px;
              }
              
              &.being_dragged {
                position: fixed;
              }
            }
          }
        }
        
        // (only the first nodeChildren gets floated left, the other nested nodeChildren are full-width)
        > ul.nodeChildren {  
          ul.nodeChildren {
            width: 100% !important;
          }
        }
         
        // (actual editor sections: all .nodeChildren, first one contains the left-hand editor area)
        // TOP INSTANCE of .nodeChildren
        ul.nodeChildren {
          @include widgetNodeChildren; // moving this around to test tabbed/callout layouts
          
          li.node {
            div.widget {
              ul.nodeChildren {
                
              }
            }
          }
        }
      }
    }                

    .node.poppedOut {
      .drag-row button,
      .drag-row a,
      .nodeChildren {
        display: none;
      }
    }
  }
}   

li.node,
li.shelfItem {   
  border: 1px solid #E0E0E0;
}



/*| HTML and Markdown Preview Pane
-----------------------------------------*/

.htmlOutput {
  @include default;
  @include html;
  
  code {
    font-family: monospace;
  }
  
  ul {
    list-style: disc;
    padding: 0px 0px 0px 30px !important;
    
    li {
      list-style-type: disc;
    }
    
    ol, ol li {
      list-style-type: decimal;
    }
  }
  
  ol {
    list-style: decimal;
    padding: 0px 0px 0px 30px !important;
    
    li {
      list-style-type: decimal;
    }
    
    ul, ul li {
      list-style-type: disc;
    }
  }
}


/*| Button Styles
-----------------------------------------*/

.button,
button {
  @include button;
}


div.submit-row p {
  width: auto;
}




/*| Text Classes
-----------------------------------------*/
h1, h2, h3, h4, p, div.list, blockquote {
  display: inline;
  float: left;
  height: auto;
  width: 100%;
}

h1, h2, h3, h4, p, blockquote, table {
  margin: 0px 0px 12px 0px;
}

p.breadcrumb {
  border-bottom: 1px dotted #B4A485;
  color: #a79273;
  font-size: 12px;
  padding-bottom: 15px;
  
  a:link,
  a:visited {
    color: #896f4b;
    text-decoration: none;
  }
  
  a:hover,
  a:active {
    color: #664411;
    text-decoration: underline;
  }
}

h1 {
  color: #535353;
  font-family: "Open Sans";
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
}

h2 {
  color: #535353;
  font-size: 22px;
  line-height: 28px;
}

h3 {
  color: #535353;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
}

h4 {
  color: #535353;
  font-size: 18px;
  font-weight: bold;
}

h5{
  color: #535353;
  margin: 0px 0px 4px 0px;
}


p.title {
  color: #353535;
  font-family: "Open Sans";
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
}

span.title {
  color: #353535;
  font-family: "Open Sans";
}

/*| PopOut Styles
-----------------------------------------*/

.popOut {
  background: $reallylightgrey;
  font-family: "Open Sans";
  font-size: 12px;
  line-height: 16px;
  
  
  div.widgy {
    
    div.editor {
      background: white;
      
      section.node {
        ul.nodeChildren {
          @include widgetNodeChildren;
          list-style: none !important;
          
          li.node {
            padding: 0 !important;
            
            &.being_dragged {
              div.preview, div.shelf, ul {
                display: none !important;
              }
            }
            
            div.widget {
              p.drag-row {
                @include important-gradient(#eee,#fff);
                
                span.title {
                  font-size: 15px !important;
                  font-weight: normal !important;
                }
              }
              
              ul.nodeChildren {
                li.node {
                  margin: 1em !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*| Popup Forms and Confirmation Styles
-----------------------------------------*/

.popUp {
  width: 500px;
  
  #{$inputFields} {
    width: 98%;
  }
  
  .submitRow {
    margin-top: 10px;
    
    input, a.button {
      float: right;
      margin-left: 5px;
    }
  }
  
  .button {
    font-size: 12px;
    padding: 4px;
  }

  .loading {
    @extend %loading;
  }
}

.vForeignKeyRawIdAdminField {
  display: none;
}
