sapl/static/styles/compilacao.scss

$color_actions: #16407c;
$color_actions_border: #CCC;
$color_buttons: #2980B9;

@mixin background-top-down($top, $bottom) {
  background-image: -webkit-linear-gradient(top, $top, $bottom);
  background-image: -moz-linear-gradient(top, $top, $bottom);
  background-image: -ms-linear-gradient(top, $top, $bottom);
  background-image: -o-linear-gradient(top, $top, $bottom);
  background-image: linear-gradient(to bottom, $top, $bottom);
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
@mixin placeholder($color, $opacity, $fontsize, $fontweight) {

  &::-webkit-input-placeholder {
    color: $color !important;
    opacity: $opacity;
    font-size:$fontsize;
    font-weight: $fontweight;
  }
  &::-moz-placeholder {
    color: $color !important;
    opacity: $opacity;
    font-size:$fontsize;
    font-weight: $fontweight;
  }
  &::-moz-placeholder {
    color: $color !important;
    opacity: $opacity;
    font-size:$fontsize;
    font-weight: $fontweight;
  }
  &:-ms-input-placeholder {
    color: $color !important;
    opacity: $opacity;
    font-size:$fontsize;
    font-weight: $fontweight;
  }
}

a:link:after, a:visited:after {
  content: "";
}

@mixin li_flutuante() {

  & > ul {
    transform: translateY(30px);
    transition: transform 0.1s linear, opacity 0.1s linear, clip 0s 0.3s;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    position:absolute;
    margin-left: 0.5em;
    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.23);

    -webkit-transition-delay: 0.4s; /* Safari */
    transition-delay: 0.4s;
    li {
      a {
        border-right: 0px !important;
      }


      &:first-child {

        &::before {
          border-width: 0.375rem;
          border-style: inset inset solid;
          content: "";
          display: block;
          height: 0px;
          width: 0px;
          border-color: transparent transparent #3385CA;
          position: absolute;
          top: -0.71rem;
          left: 0.9375rem;
        }
        &:hover::before {
          border-color: transparent transparent #0A5EA4;
        }
      }
    }
    // This bridges the gap between the top bar and a dropdown.
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 0;
      top: rem-calc(-25px);
      height: rem-calc(25px);
      width: 100%;
      // This transition is for hover-on.
      transition: all 0.3s cubic-bezier(0.55,0,0.1,1);
    }
  }
  &:hover > ul {

    transform: translateY(7px);
    // This transition is actually for when we hover-out of the dropdown.
    transition: transform 0.4s linear,
    opacity 0.4s linear,
    clip 0s 0.2s;
    opacity: 1;
    clip: rect(-100px, 2000px, 2000px, -100px);

  }

}
.test_import:nth-child(even) {
  background-color: #ccc;
}
#message_block {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(220, 220, 220, 0.75);
  z-index:99;

  #msg{
    position: relative;
    margin: 20% auto;
    padding: 1.2em 2em;
    max-width: 600px;
    text-align: center;
    font-size: 1.5em;
    color: #677;

    border: 1px solid #eee;
    background-color: #fff !important;
    box-shadow: 0 1px 2px #999;
  }
}


.cp {
  .desativado {

    .dtxt, .dtxt * {
      text-decoration: line-through;
      color: #999 !important;

      table, table td {
        border: 1px dotted #ccc;
      }
    }
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }
  .diff {
    .desativado, .desativado * {
      text-decoration: line-through;
      color: #ddd !important;
      font-size: 90%;
    }
    .added {
      color: #04DE2C;
    }
  }

  .dpt {
    font-size:1em;
    transition: all 0.2s ease-in-out;
    position: relative;

    .ementa {
      padding: 2em 0em 2em 35%;
      font-weight: bold;
    }

    .titulo_generico {
      text-align: center;
      font-weight: bold;
      margin-bottom: 1em;
      font-size: 1.5em;
      margin-top: 3em;
    }

    .anexo,
    .disp_preliminares,
    .disp_gerais,
    .disp_transitorias,
    .disp_finais,
    .parte,
    .livro {
      @extend .titulo_generico;
    }

    .titulo {
      @extend .titulo_generico;
      margin-top: 2em;
    }

    .capitulo {
      @extend .titulo_generico;
      margin-top: 1.5em;
      font-size: 1.3em;
    }

    .secao {
      @extend .titulo_generico;
      margin-top: 1.2em;
      margin-bottom: 0.7em;
      font-size: 1.2em;
    }

    .subsecao,
    .itemsecao {
      @extend .titulo_generico;
      margin-top: 1em;
      margin-bottom: 0.6em;
      font-size: 1.2em;
      font-style: italic;
    }

    .artigo {
      font-size: 1.15em;
      float:left;
      .dptt {
        position: relative;
      }
    }

    .caput {
      margin-top: 0.3333em;
      font-size: 1.15em;
    }

    .paragrafo {
      padding-left: 1.5em;
      font-size: 1.1em;
      margin-top: 0.2222em;
    }

    .inciso {
      font-size: 1.1em;
      padding-left: 2.5em;
      margin-top: 0.1667em;
    }

    .alinea {
      font-size: 1.0em;
      padding-left: 3.5em;
      margin-top: 2px;
    }

    .item {
      font-size: 1.0em;
      padding-left: 4.5em;
      margin-top: 2px;
    }


    .bloco_alteracao {
      padding-left: 10%;
      font-style: italic;
      color: #018;

      a {
        text-decoration: underline;
      }

      a, table, table td {
        color: #018 !important;
      }
    }

    .dn { /* Notas de Dispositivo*/
      font-weight: normal;
      position: relative;
      font-size: 70%;
      p, ul {
        font-weight: normal;
        margin: 0 0 0 0;
        list-style: none;
        padding: 0;
      }

      .dnl { /* Lista Notas de Dispositivo*/
        display: block;
        text-align: left !important;

        * {
          display: inline;
        }

        .bullet {
          padding: 0 0.333em;
          display: inline-block;
        }
        .dnli {
          min-height: 2.5em;
          &:hover {
            ul {
              transition: opacity 0.5s linear, clip 0s 0.3s;
              clip: auto;
              opacity: 1;
              background: rgba(230,230,230, 0.9);
            }
          }

          ul {
            transition: opacity 0.5s linear, clip 0s 0.3s;
            clip: rect(0, 0, 0, 0);
            opacity: 0;
            position: absolute;
            background: transparent;
            right: 0;
            padding: 0.2em 0.5em 0em 0.5em;
            border: 1px solid #c7e3d3;
            border-top: 0px;
            font-size: 1.5rem;
            li {
              display: table-cell;
              color: #aaa;

              &:hover {
                color: #787;
                a{
                  color: #27AE60 !important;
                }
              }
              .nowner {
                color: #27AE60 !important;
              }
            }
          }

          .ntitulo {
            font-weight: bold;
            color: #03A203;
            text-decoration: none;
            a {
              color: #294 !important;
            }
          }
          .ntexto {

            color: #06D806;
            a{
              color: #03A203 !important;
            }
          }
        }
        &:hover {
          display: block;


          * {
            display: block;
          }
          & > .bullet {
            display: none;
          }
          .dnli {
            margin-top: 0.5em;
            border-top: 1px solid #c7e3d3;
          }
        }
      }

    }

    .dptt {

      & > a {
        color: #444444;
        &.link_alterador {
          color: #2980B9;
          font-size: 0.75em;
          &:hover {
            text-decoration: underline;
          }
        }
        &.desativado {
          @extend .desativado;
        }
      }

      .dne {
        position: absolute;
        display: block;
        right: 0;
        left: 0;
        top: 0;
        height: 0;
        transform: scaleX(0);
        transform-origin: right;
        transition: all 0.3s ease;
        border-top: 1px solid $color_buttons;


        ul.btns-action {
          list-style: none;
          padding: 0;
          position: absolute;
          right: 0;
          background-color: $color_buttons;
          li {
            float: left;
            &:hover {
              background-color: rgba(#000, 0.1);
            }
            a {
              color: white;
              padding: 0.15em 1em 0;
              display: inline-block;
              &:hover {
              }
            }
          }
        }
      }

      .dne-nota {
        position: relative;
        transform: scaleX(1);
        height: auto;
        border-top: 0px;

        ul.btns-action {
          display: none;
        }

        .dne-form {
          margin: 1em -2em 0em;
          text-align: left;
          font-size: 1.6rem;
        }
      }

      &:hover {
        .dne {
          height: 0.1667rem;
          transform: scaleX(1);
          transition-delay: 1s;
        }
        .dne-nota {
          height: auto;
          transition-delay: 0s;
        }
      }
    }
  } /* and dpt */


  .tipo-vigencias {
    list-style: none;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 0;
    padding: 0;
    background-color: $color_buttons;
    z-index: 1000;

    opacity: 0.9;
    transition: all 0.3s ease-in-out;

    li {
      display: inline-block;
      border-left: 1px solid #fff;
      float: left;
      a {
        color: white;
        padding: 0.3em 1em 0;
        display: inline-block;
        font-size: 110%;
        cursor: pointer;
        &.selected {
          background-color: rgba(0, 0, 0, 0.5);
        }
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
    &:hover {
      opacity: 1;
    }
  }

} /* end cp */

.cp.cpe {


  margin-bottom: 15em;

  .desativado, .desativado * {

    text-decoration: line-through;
    color: #999 !important;

    table, table td {
      border: 1px dotted #ccc;
    }
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }

  .dpt {
    position: relative;
    display:block;

    .semtexto {
      font-weight: bold;
      color: #BFD1F6;
    }
    .artigo {
      float: none;
    }
    .caput {
      margin-top: 0;
    }
    & > .actions_left {
      color: #fff;
      left: 0em;
      position: absolute;
      opacity: 0;
      transition: all 0.4s ease-in-out;
      z-index: 1;
      a {
        &.btn-edit {
          @include background-top-down(#3498DB, #2980C9);
          color: #ffffff !important;
          font-weight: bold;
          padding: 5px 7px 3px;
          display: inline-block;
          line-height: 1;

        }
      }
    }

    &:hover > .actions_left {
      opacity: 1;
    }

    .bloco {
      display: block;
      clear: both;
      *:hover {
        color: #27AE60;
      }
      .de {
        cursor: pointer;
      }
    }
    .articulacao {
      border-top: 2px solid #e5e5e5;
      margin: 2em 0;
    }
    .bloco_alteracao {
      border: 1px solid #ddd;
      margin: -1px 0 0;
      padding: 1em;
    }

    .articulacao1 {
      margin-top: 2em;
      &::before {
        content: "Articulação";
        background-color: #eee;
        border-bottom: 1px dotted #E88C8C;
        padding: 0.333em;
        padding-left: 1em;
        display:block;
      }
    }
    .bloco_alteracao1 {
      @extend .articulacao1;
      margin: -1px 0 0;
      padding: 1em;
      border: 1px dotted #E88C8C;
      overflow: hidden;
      &::before {
        content: "Bloco de Alteração";
        margin: -1em -1em 0;
        display: block;
      }
    }

  } /* fim dpt */

  .dpt-selected {
    font-size: 1em;
    border: 0px solid $color_actions_border;
    margin: 1em -2em 1em -2.8em;
    padding: 2.2em 2.2em 1.6em 2.2em;
    box-shadow: -4px 15px 15px rgba(0, 0, 0, 0.1), 0px 6px 6px rgba(0, 0, 0, 0.23);


    @include background-top-down(#eaeaee, #ddd);


    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .semtexto {
      color: #999;
    }

    .bloco {
      opacity: 0.5;
      &:hover {
        opacity: 1;
      }
      a:hover {
        background: transparent;
      }
    }

    & > .bloco {
      opacity: 1;
      margin: 1em !important;
    }

    .bloco_alteracao {
      padding-top: 2em;
    }



    & > .dpt {
      padding: 0;
      &:last-child {
        padding-bottom: 1em;
      }
    }

    & > .actions_left {
      display: none;
    }

    .csform {  /* compilacao simple form */
      display: block;
      clear: both;
      z-index: 9;
      position: static;

      .btns-action {
        -webkit-animation: fadeIn 1s ease-in-out;
        -moz-animation: fadeIn 1s ease-in-out;
        -o-animation: fadeIn 1s ease-in-out;
        opacity: 1;

        position: absolute;
        display: table;
        transition: all 0.4s ease-in-out;

        a {
          color: $color_actions;
          display: block;
          background: transparent;
          vertical-align: middle;
          text-align: center;
          font-weight: normal;
          text-shadow: 0 0 10px rgba(0,0,0,0.3);
          padding: 0.33em 0.4em;
        }

        & > li {
          position: relative;
          display: table-cell;
          vertical-align: top;
          &:hover {
            background-color: rgba(255, 255, 255, 0.5);
            & > a {
              text-shadow: 0 0 5px #777;
              color: #0a5;
            }
          }
        }
      }

      .label_status {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #889;
        padding: 0.3em;
        font-size: 80%;
        text-align: right;
        z-index: 15;
        display: table;
        li {
          display: table-cell;
          padding: 0 0.5em;
        }
      }

      .actions_parents {
        z-index: 11;
        top: 0em;
        left: 0em;
        a {
          padding: 0.62em;
        }
        div, li {
          font-size: 80%;
          display: table-cell;
          vertical-align: middle;
          border-right: 1px solid $color_actions_border;
        }
        div {
          padding: 0 0.4em;
          font-stretch: condensed;
          font-variant: small-caps;
          font-weight: bold;
          text-shadow: 0 0 10px #fff;
        }
        & > li {
          &:hover a{
            color: $color_actions;
            font-weight: normal;
          }
        }
      }

      .actions_top {
        top: 0em;
        right: 0em;
        a {
          padding-right: 1em;
          padding-left: 1em;
        }
        li {
          display: table-cell;
          vertical-align: middle;
          border-left: 1px solid $color_actions_border;
        }
      }

      .actions_bottom {
        @extend .actions_top;
        top: auto;
        left: 0;
        bottom: 0;
        display: inline-block;
        border-top: 1px solid $color_actions_border;
        a {
          padding: 0 0.4em;
        }
        li {
          border: 0px;
          border-right: 1px solid $color_actions_border;
        }
      }

      .actions_right {
        top: 2.2em;
        right: 0em;
        bottom:0;
        display: block;
        li {
          width: 2.2em;
          display: block;
          border-bottom: 1px solid $color_actions_border;
          &:first-child {
            border-top: 1px solid $color_actions_border;
          }
        }
      }

      .actions_left {
        @extend .actions_right;
        right: auto;
        left: 0em;
      }

      .actions_inserts {
        background: transparent;
        position: relative;
        z-index: 19;
        display: table;
        width: 100%;

        & > li {
          display: table-cell;

          &:hover > a {
            @include background-top-down(#1c81c4, #0b6dad);
          }
          & > a {
            @include background-top-down(#3498DB, #2980C9);
            border-right: 1px solid #fff;
            padding: 0.2em;
            display: block;
            color: white;
            text-align: center;
            white-space: nowrap;

            &.btn-excluir {
              text-align: left;
              background: #A70808;
              color: #c99;
              padding-left: 1.7em;
              position: relative;

              &:hover {
                background-color: #c70808;
                color: #ecc;
              }

              &::before {
                z-index: 20;
                position: absolute;
                background: url(/static/img/icon_delete_white.png) no-repeat 50% 50%;
                content:"";
                top: 0;
                left: 0;
                display: block;
                color: black;
                margin-left: 0.4em;
                height: 100%;
                width: 2em;
              }

            } /* btn-excluir */

            &.btn-salvar {
              @extend .btn-excluir;
              background: #1f8b4d;
              color: white;
              &:hover {
                background: #2d9c5c;
                color: white;
              }
              &::before {
                background: url(/static/img/icon_save_white.png) no-repeat 50% 50%;
              }
            }
            span {
              padding: 0 0.7em;
            }
          }

          &:last-child > a{
            border-right: 0px solid #fff;
          }

          & > ul {
            li {
              &:nth-child(even) a {
                background: #3385CA;
              }
              a {
                border-right: 1px solid #fff;
                display: block;
                color: white;
                background: #2980C9;
                font-size: 80%;
                padding: 0.23em 1em;
                &:hover {
                  background: #0a5ea4;
                }
              }

            }
          }
          &.add_prior {
            @include li_flutuante();
            table-layout: fixed;
          }
          &.menu_excluir {
            @include li_flutuante();
            display: block;
            position: static;

            & > ul {
              right: 0.5em;
              li {
                a {
                  background-color: #A70808;
                  &:hover {
                    background: #c70808;
                  }
                }
                &:first-child {
                  &::before {
                    border-color: transparent transparent #A70808;
                    right: 10%;
                    left: auto;
                  }
                  &:hover::before {
                    border-color: transparent transparent #c70808;
                  }
                }
              }
            }

          }

        }
      } /* actions_inserts */


      .menu_flutuante  {
        & > li {
          @include li_flutuante();


          &.menu_excluir {
            & > ul {
              li {
                &:first-child {
                  &::before {
                    right: auto;
                    left: 0.9375rem;
                  }
                }
              }
            }
          }
        }
      }

      textarea {
        margin: 0;
        resize: vertical;
        min-height: 12.6em;
        border: 0px;
        font-size: 120%;
        width: 100%;
        &:focus {
          background: #fff;
        }
        &::-webkit-input-placeholder {
          color: #c70808;
          opacity: 0.6;
          font-size: 80%;
        }
        &:-moz-placeholder { /* Firefox 18- */
          color: #c70808;
        }
        &::-moz-placeholder {  /* Firefox 19+ */
          color: #c70808;
        }
        &:-ms-input-placeholder {
          color: #c70808;
          opacity: 0.6;
        }
      }
    } /* fim csform*/
  }

  .selected {
    background-color: rgba(255, 255, 255, 0.5);
    a {
      &:hover {
        color: $color_actions !important;
        font-weight: normal !important;
      }
    }
  }
}

.result-busca-dispositivo, .lista-dispositvo {

  padding: 0 0 1em;
  min-height: 3em;
  ul {
    list-style: none;
    margin: 0;
    padding: 1em 0 0;
    transition: all 2s linear;
    clear: both;

    li {
      display: table;

      border-collapse:separate;
      border-bottom: 1px solid white;

      &.ta_title {
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 4px 4px 0 0;
        width: 100%;

        span {
          padding: 0.5em;
        }
      }
      &:last-child .itemlabel {
        border-radius: 0 0 4px 0px;
        margin: 0px;
      }

      &:last-child .iteminput {
        border-radius: 0 0 0px 4px;
      }

      .iteminput {
        background-color: rgba(0, 0, 0, 0.1);
        border-right: 1px solid white;
        display: table-cell;
        padding: 0.5em;
        vertical-align: middle;
        text-align: center;

        input {
          margin: 0;
        }
      }

      .itemlabel {
        background-color: rgba(0, 0, 0, 0.1);
        display: table-cell;
        padding: 0.5em;
        vertical-align: middle;
        width: 100%;
        label {
          line-height: 1;
          font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
          display: block;
          margin: 0px;
        }
      }
    }
  }
  .nomenclatura_heranca {
    font-size: 90%;
    color: #057dba;
    display: inline;
  }
}
.cp-nav-parents {
  & > .dropdown-menu {
    left: 0;
    right: auto;
    &::before {
      content: '';
      position: absolute;
      top: -11px;
      width: 100%;
      height: 11px;
    }
  }
  &:hover {
    & > .dropdown-menu {
      display: block;
    }
  }
}

.btn-modal-open {
  float: right;
}


.class_color_container {
  background: #ddd !important;
}
.clear {
  clear:both;
}
.mce-panel {
  /*border: 0px solid #ccc !important;*/
}
.mce-btn button:hover {
  background-color: rgba(0,0,0,0.1) !important;
  text-shadow: 0 0 5px #fff;
  box-shadow: 0 0 5px #777;
}
.mce-menu {
  background: #eee !important;
}

.displaynone {
  display: none !important;
}

@media only screen and (max-width: 40.0625em) {

  .cp .fixed{
    z-index:98;
    position: relative;
  }

  .cpe {
    .dpt-selected {
      margin:1em -1em 1em -1.8em;

      .csform {
        .actions_parents, .label_status {
          font-size: 80%;
          position:static !important;
          display: block !important;
          padding: 0em;
          height: auto !important;
          div, li {
            display: inline-block !important;
          }
        }

        .actions_inserts {
          & > li {
            @include li_flutuante();

            & > a {
              span {
                display: none;
              }
              &.btn-excluir, &.btn-salvar {
                padding-left: 0;
                min-width: 1em;
                &::before {
                  width: 100%;
                  margin: 0;
                }
              }
            }
            &.add_in, &.add_next, &.add_prior {
              position: static;
            }
            &.add_in > ul {
              left: 1em !important;
              right: 1em !important;
              margin-left: 0;
              li:first-child::before {
                left: 37%;
              }
            }
            &.add_next > ul {
              left: 0 !important;
              right: 1em !important;
            }
            &.add_prior > ul {
              left: 1em !important;
              right: 0 !important;
              margin-left: 0;
              margin-right: 0.5em;
              li:first-child::before {
                right: 42%;
                left: auto;
              }
            }
            &.menu_excluir > ul {
              left: 10% !important;
              right: 0 !important;
              margin-left: 0;
              margin-right: 0.5em;
              li:first-child::before {
                right: 27%;
                left: auto;
              }
            }
          }
        }
      }
    }
  }
}

@media print {
  .cp .vigencias, .toggle-topbar, .menu-icon, .button {
    display:none;
  }

}