$color_actions: #16407c; $color_actions_border: #CCC; @mixin background-top-down($top, $bottom) { background: $top; 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.75rem; 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, .desativado * { text-decoration: line-through; color: #999 !important; table, table td { border: 1px dotted #ccc; } } .diff { .desativado, .desativado * { text-decoration: line-through; color: #dbb !important; } .added { color: #018; } } .dpt { font-size:1em; transition: all 0.2s ease-in-out; position: relative; .ementa { padding: 4em 0em 3em 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 { z-index: 89; 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; } a { color: #444444; &.link_alterador { color: #2980B9; font-size: 0.75em; &:hover { text-decoration: underline; } } &.desativado { @extend .desativado; } } .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-size: 0.8rem; font-weight: normal; line-height: 1rem; position: relative; p, ul { font-size: 0.8rem; font-weight: normal; line-height: 1rem; margin: 0 0 0 0; list-style: none; } .dnl { /* Lista Notas de Dispositivo*/ display: block; text-align: left !important; * { display: inline; } .bullet { padding: 0 0.333em; padding-bottom: 0.2em; 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.5em 0.5em 0em 0.5em; border: 1px solid #c7e3d3; border-top: 0px; li { display: table-cell; color: #aaa; &:hover { color: #787; a{ color: #27AE60 !important; } } .nowner { color: #27AE60 !important; } } } .ntitulo { font-weight: bold; color: #676; font-size: 90%; text-decoration: none; a{ color: #294 !important; } } .ntexto { color: #787; a{ color: #294 !important; } } } &:hover { display: block; * { display: block; } & > .bullet { display: none; } .dnli { margin-top: 0.5em; border-top: 1px solid #c7e3d3; } } } } .dptt { .dne { text-decoration: none; position: relative; display: block; font-size: 0.8rem; font-weight: normal; line-height: 1rem; text-align: left; height: 0; transform: scaleY(0); transform-origin: top; transition: all 0.3s ease; * { font-size: 0.8rem; font-weight: normal; line-height: 1rem; text-decoration: none !important; } ul.btns-action { position: absolute; margin: 0 0 0 0; display: table; list-style: none; clip: rect(0,0,0,0); opacity: 0; transition: opacity 1.5s linear, clip 1s linear; transition-delay: 0s; border-collapse:separate; border-spacing:0.5em; li { display: table-cell; a { background-color: #DDD; border-radius: 50%; width: 3rem; height: 3rem; display: inline-block; font-size: 203%; line-height: 3rem; text-align: center; &.btn-nota-create { background: #ddd url(/static/img/hand-note.png) no-repeat 50% 50%; } &.btn-vide-create { } &:hover { background-color: #Cdc ; } } } } } .dne-nota { box-shadow: -4px 15px 15px rgba(0, 0, 0, 0.1), 0px 6px 6px rgba(0, 0, 0, 0.23); @include background-top-down(#f5f5f5, #eee); transform: scaleY(1); height: auto; transition-delay: 0s; margin: 1em 0 2em 0; padding: 0em; ul.btns-action { display: none; } .dne-form { .asterisk { color: transparent; &::before { color: red; content: "\2b25"; padding: 0 0.333em; vertical-align: super; } } .title_form { font-size: 2.5em; padding: 0.5em 0.3em 0.3em; background: #e5e5e5; color: #777; margin-bottom: 0.4em; border-bottom: 1px solid #aaa; } fieldset { border: 0px; } select { background: url(/static/img/down_arrow_select.jpg) no-repeat right #ddd; border: 0px; outline:0px; } .alert-box { margin-bottom: 0; } .row:first-of-type { margin-top: 1em; display: inline-block; } .columns { padding: 0 0.5rem; } .input { border: 0px; border-bottom: 1px solid #ccc; margin: 0 0 0 0 ; padding: 0.5em; background: #eee; height: auto; box-shadow: 0 0 0; @include placeholder(#777, 1, 100%, normal); &:focus { background: #fafafa; @include placeholder(#456, 1, 100%, normal); } } .textinput{ @include placeholder(#777, 1, 90%, normal); &:focus { background: #fafafa; @include placeholder(#456, 1, 90%, normal); } } .textinput[name='titulo']{ @extend .input; font-size:130%; font-weight: bold; border-bottom: 0; @include placeholder(#777, 1, 100%, bold); &:focus { background: #fafafa; @include placeholder(#777, 1, 100%, bold); } } .textarea { @extend .input; resize: vertical; font-weight: normal; } .urlinput { @extend .input; margin-bottom: 1em; } .button { width: 100%; margin-top: 1.6em; padding: 0; height: 2.835em; } .btn-busca { margin-top: 1.25em; } .container-busca { ul{ list-style: none; display: table; margin-left: 0; border-collapse:separate; border-spacing:1px; li { display: table-row; &:nth-child(even) { background-color: rgba(0, 0, 0, 0.05); } &:nth-child(odd) { background-color: rgba(0, 0, 0, 0.08); } .iteminput { display: table-cell; padding: 0.5em; vertical-align: middle; text-align: center; input { margin: 0; } } .itemlabel { display: table-cell; padding: 0.5em; vertical-align: middle; width: 100%; } } } .ta_title { padding: 0.15em 0.7em; background-color: rgba(0, 0, 0, 0.15); margin: 0.1em 0.08em 0 0.1em; } .nomenclatura_heranca { font-size: 90%; color: #057dba; } } } } &:hover { .dne { height: 4.3em; transform: scaleY(1); transition-delay: 1s; ul.btns-action { clip: rect(-100px, 2000px, 2000px, -100px); opacity: 1; transition: opacity 0.5s linear, clip 0s 0.3s; transition-delay: 0.5s; li { a { } } } } .dne-nota { transition-delay: 0s; height: auto; } } } } /* and dpt */ .top-bar { line-height: 1.6rem; height: auto; background: #2980B9; z-index:1; margin: 0 auto; max-width: 62.5rem; } .top-bar-section { li:not(.has-form) { a:not(.button) { @extend .top-bar; padding: 0 0.43333rem; &.selected, &:hover { background: #1056A0; } } } } ul.nav { background: #2980B9; display:block; width: 100%; z-index:1; } .tipo-vigencias { border-top: 1px solid #62B5B5; position: fixed; bottom: 0; transform: translate(-50%,0); left: 50%; } .vigencias { margin: 2.5em 0 0 0; transition: all .4s ease-in-out; background: #2980B9; clear:both; } .fixed{ z-index:98; opacity: 0.2; transition: all 2s ease-in-out; -webkit-transition-delay: 3s; /* Safari */ transition-delay: 3s; &:hover { -webkit-transition-delay: 0s; /* Safari */ transition-delay: 0s; transition: all 0.3s ease-in-out; opacity: 0.9; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: rgba(0, 0, 0, 0.1); } } } } /* end cp */ .cpe { @extend .cp; margin-bottom: 15em; margin-left: 0.8em; a { text-decoration: none; } .dpt { position: relative; display:block; .semtexto { font-weight: bold; color: #BFD1F6; } .artigo { float: none; } & > .actions_left { color: #fff; position: absolute; left: -2.6em; opacity: 0; transition: all 0.4s ease-in-out; a { &.btn-edit { @include background-top-down(#3498DB, #2980C9); @include border-radius(7px); color: #ffffff !important; font-weight: bold; padding: 2px 7px 2px 7px; &:hover { @include background-top-down(#3cb0fd, #3498DB); } } } } &:hover > .actions_left { opacity: 0.5; background-color: transparent !important; &::before { content: ""; border: inset 0.375rem; border-color: transparent transparent transparent #3cb0fd; position: absolute; display: block; height: 0; width: 0; top: 0.4rem; right: -0.73rem; } &:hover { opacity: 1; &::before { border-color: transparent transparent transparent #3cf0ff; } } } .bloco { display: block; clear: both; *:hover { color: #27AE60; } .de { cursor: pointer; } } .articulacao{ margin-left: -0.8em; margin-top: 2em; &::before { content: "Articulação"; background-color: #eee; border-bottom: 1px solid #aaa; padding: 0.333em; padding-left: 1em; display:block; } } .bloco_alteracao { @extend .articulacao; margin: 0; padding-top: 3em; padding-left: 0em; background: #ddd; &::before { content: "Bloco de Alteração"; 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 { padding: 1em 0; opacity: 1; margin: 0 !important; } & > .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: 5; display: table; li { display: table-cell; } } .actions_parents { z-index: 1; 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: 9; 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: 10; 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%; &: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; } } } } .btn-busca { background-color: #0093dd; &:hover { background-color: #007ebe; } &:focus { background-color: #036190; } } .btn-close-container{ position: absolute; background-color: #AAA; width: 2em; height: 2em; border: 0.3em solid #FFF; top: -0.9em; right: -0.9em; border-radius: 50%; cursor: pointer; opacity: 0.7; transform: rotate(45deg); z-index: 98; .icon-close{ background: #FFF; height: 1.2em; position: absolute; width: 0.2em; top: 0.15em; left: 0.66em; &::after { background: #FFF; content: ""; height: 0.2em; left: -0.5em; position: absolute; top: 0.48em; width: 1.2em; } } &:hover{ opacity: 1; } } .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 { display:none; } }