%PDF- %PDF-
Direktori : /home/tjamichg/portal.tjamich.gob.mx/adminit2018/assets/less/modules/ |
Current File : /home/tjamichg/portal.tjamich.gob.mx/adminit2018/assets/less/modules/base.bootstrap-overwrite.less |
// // Bootstrap Overwrite & Extend // -------------------------------------------------- // Scaffolding html, body { height: 100%; } body { font-family: @font-family-base; font-size: @font-size-base; color: @text-color; background-color: @body-bg; } .no-focus *:focus { // Disabling focus outline is not a good practice for accessibility reasons // It is disabled for better demostrating template's design by making it simpler // Elements have their own focus styles but consider enabling the outline in // production by removing .no-focus class from <html> tag outline: 0 !important; } // Links a { color: @link-color; .transition(color .12s ease-out); &.link-effect { position: relative; &:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; content: ""; background-color: @link-hover-color; visibility: hidden; .scaleX(0); .transition-transform(.12s ease-out); } } &.link-effect-opacity { .transition(opacity .25s ease-out); } &:hover, &:focus { color: @link-hover-color; text-decoration: @link-hover-decoration; &.link-effect:before { visibility: visible; .scaleX(1); } &.link-effect-opacity { opacity: .5; } } &:active { color: @link-color; } &.inactive { cursor: not-allowed; &:focus { background-color: transparent !important; } } } // Typography h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; font-family: @headings-font-family; font-weight: @headings-font-weight; line-height: @headings-line-height; color: @headings-color; small, .small { font-weight: @headings-font-weight; font-size: 85%; color: @headings-small-color; } } .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: inherit; } h1, .h1 { font-size: @font-size-h1; } h2, .h2 { font-size: @font-size-h2; } h3, .h3 { font-size: @font-size-h3; } h4, .h4 { font-size: @font-size-h4; } h5, .h5 { font-size: @font-size-h5; } h6, .h6 { font-size: @font-size-h6; } .page-heading { color: @text-color-dark; font-size: 28px; font-weight: 400; line-height: 1.24; small { margin-top: 5px; display: block; color: #777; font-size: 16px; font-weight: 400; line-height: 1.4; @media screen and (min-width: @screen-sm-min) { margin-top: 0; display: inline; line-height: inherit; } } } .content-heading { margin-top: 15px; margin-bottom: 15px; font-weight: 600; font-size: 15px; color: darken(@gray-dark, 5%); text-transform: uppercase; small { font-size: 13px; font-weight: normal; color: @gray-dark; text-transform: none; } @media screen and (min-width: @screen-sm-min) { margin-top: 25px; } } .font-w300 { font-weight: 300 !important; } .font-w400 { font-weight: 400 !important; } .font-w600 { font-weight: 600 !important; } .font-w700 { font-weight: 700 !important; } .font-s12 { font-size: 12px !important; } .font-s13 { font-size: 13px !important; } .font-s36 { font-size: 36px !important; } .font-s48 { font-size: 48px !important; } .font-s64 { font-size: 64px !important; } .font-s96 { font-size: 96px !important; } .font-s128 { font-size: 128px !important; } p { line-height: @line-height-base; &.nice-copy, .nice-copy & { line-height: 1.8; } &.nice-copy-story, .nice-copy-story & { line-height: 1.8; font-size: 16px; } } // Emphasis .text { &-muted { .text-emphasis-variant(@gray-dark); } &-primary { .text-emphasis-variant(@brand-primary); } &-primary-dark { .text-emphasis-variant(@brand-dark); } &-primary-darker { .text-emphasis-variant(@brand-darker); } &-primary-light { .text-emphasis-variant(@brand-light); } &-primary-lighter { .text-emphasis-variant(@brand-lighter); } &-success { .text-emphasis-variant(@brand-success); } &-warning { .text-emphasis-variant(@brand-warning); } &-info { .text-emphasis-variant(@brand-info); } &-danger { .text-emphasis-variant(@brand-danger); } &-success-light { .text-emphasis-variant(@brand-success-light); } &-warning-light { .text-emphasis-variant(@brand-warning-light); } &-info-light { .text-emphasis-variant(@brand-info-light); } &-danger-light { .text-emphasis-variant(@brand-danger-light); } &-white { .text-emphasis-variant(#fff); } &-white-op { .text-emphasis-variant(rgba(255,255,255,.85)); } &-black { .text-emphasis-variant(#000); } &-black-op { .text-emphasis-variant(rgba(0,0,0,.5)); } &-gray { .text-emphasis-variant(@gray-base); } &-gray-dark { .text-emphasis-variant(@gray-dark); } &-gray-darker { .text-emphasis-variant(@gray-darker); } &-gray-light { .text-emphasis-variant(@gray-light); } &-gray-lighter { .text-emphasis-variant(@gray-lighter); } } // Emphasis background colors .bg { &-muted { .bg-variant(@gray-dark); } &-primary { .bg-variant(@brand-primary); } &-primary-op { .bg-variant(fade(@brand-primary, 75%)); } &-primary-dark { .bg-variant(@brand-dark); } &-primary-dark-op { .bg-variant(fade(@brand-dark, 83%)); } &-primary-darker { .bg-variant(@brand-darker); } &-primary-light { .bg-variant(@brand-light); } &-primary-lighter { .bg-variant(@brand-lighter); } &-body { background-color: @body-bg; } &-success { .bg-variant(@brand-success); } &-warning { .bg-variant(@brand-warning); } &-info { .bg-variant(@brand-info); } &-danger { .bg-variant(@brand-danger); } &-success-light { .bg-variant(@brand-success-light); } &-warning-light { .bg-variant(@brand-warning-light); } &-info-light { .bg-variant(@brand-info-light); } &-danger-light { .bg-variant(@brand-danger-light); } &-white { .bg-variant(#fff); } &-white-op { background-color: rgba(255,255,255,.075); } &-crystal-op { background-color: rgba(255,255,255,.15); } &-black { .bg-variant(#000); } &-black-op { background-color: rgba(0,0,0,.4); } &-gray { .bg-variant(@gray-base); } &-gray-dark { .bg-variant(@gray-dark); } &-gray-darker { .bg-variant(@gray-darker); } &-gray-light { .bg-variant(@gray-light); } &-gray-lighter { .bg-variant(@gray-lighter); } } // Buttons .btn { font-weight: 600; border-radius: 2px; .transition(all .15s ease-out); &:active, &.active { .box-shadow(none); } &.btn-square { border-radius: 0; } &.btn-rounded { border-radius: 20px; } &.btn-minw { min-width: 110px; } &.btn-noborder { border: none !important; } &.btn-image { position: relative; padding-left: 40px; > img { position: absolute; top: 3px; left: 3px; display: block; width: 26px; height: 26px; border-radius: 3px; } } > i { &.pull-left { margin-top: 3px; margin-right: 5px; } &.pull-right { margin-top: 3px; margin-left: 5px; } } } .btn-link, .btn-link:hover, .btn-link:focus { text-decoration: none; } .btn-default { .button-variant(@text-color-dark; #f5f5f5; #e9e9e9); } .btn-primary { .button-variant(#fff; @brand-primary; darken(@brand-primary, 10%)); } .btn-success { .button-variant(#fff; @brand-success; darken(@brand-success, 10%)); } .btn-info { .button-variant(#fff; @brand-info; darken(@brand-info, 10%)); } .btn-warning { .button-variant(#fff; @brand-warning; darken(@brand-warning, 10%)); } .btn-danger { .button-variant(#fff; @brand-danger; darken(@brand-danger, 10%)); } // Forms label { font-size: 13px; font-weight: 600; } .form-control { color: @text-color; border: 1px solid @form-border-color; border-radius: 3px; .box-shadow(none); .transition(all .15s ease-out); .placeholder(#aaa); &:focus { border-color: @form-border-focus-color; background-color: @form-bg-focus-color; .box-shadow(none); } textarea& { max-width: 100%; } input[type="text"]&, input[type="password"]&, input[type="email"]& { -webkit-appearance: none; } &.input-sm { border-radius: 3px; } &.input-lg { font-size: 14px; border-radius: 3px; } .input-group-lg & { font-size: 14px; } } .form-group { margin-bottom: 20px; .form-bordered & { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid @gray-light; &.form-actions { border-bottom: none; } } } .help-block { margin-top: 5px; margin-bottom: 0; font-style: italic; font-size: 13px; color: lighten(@text-color, 25%); } .has-success { .form-control-validation(@brand-success; @brand-success; #fff); } .has-info { .form-control-validation(@brand-info; @brand-info; #fff); } .has-warning { .form-control-validation(@brand-warning; @brand-warning; #fff); } .has-error { .form-control-validation(@brand-danger; @brand-danger; #fff); } // Input groups .input-group-addon { color: @text-color; background-color: #f9f9f9; border-color: @form-border-color; border-radius: 3px; &.input-sm, &.input-lg { border-radius: 3px; } } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { border-radius: 3px; } .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; } // Labels .label-primary { .label-variant(@brand-primary); } .label-success { .label-variant(@brand-success); } .label-info { .label-variant(@brand-info); } .label-warning { .label-variant(@brand-warning); } .label-danger { .label-variant(@brand-danger); } // Badges .badge-primary { background-color: @brand-primary; } .badge-success { background-color: @brand-success; } .badge-info { background-color: @brand-info; } .badge-warning { background-color: @brand-warning; } .badge-danger { background-color: @brand-danger; } // Alerts .alert { padding-bottom: 10px; border-radius: 2px; border: none; p { margin-bottom: 5px !important; } } .alert-success { .alert-variant(@brand-success-light; darken(@brand-success, 10%)); } .alert-info { .alert-variant(@brand-info-light; darken(@brand-info, 10%)); } .alert-warning { .alert-variant(@brand-warning-light; darken(@brand-warning, 10%)); } .alert-danger { .alert-variant(@brand-danger-light; darken(@brand-danger, 10%)); } // Progress Bars .progress { height: 24px; border-radius: 2px; .box-shadow(none); &&-mini { height: 5px; .progress-bar { line-height: 5px; } } } .progress-bar { line-height: 24px; font-weight: 600; .box-shadow(none); } .progress-bar-primary { background-color: @brand-primary; } .progress-bar-success { background-color: @brand-success; } .progress-bar-info { background-color: @brand-info; } .progress-bar-warning { background-color: @brand-warning; } .progress-bar-danger { background-color: @brand-danger; } // Nav Pills .nav-pills { > li { > a { font-weight: 600; color: @text-color; border-radius: 3px; &:hover, &:focus { color: @text-color; background-color: @gray-lighter; } } &.active > a { &, &:hover, &:focus { color: #fff; background-color: @brand-primary; } > .badge { color: @brand-primary; } } } } // Pagination .pagination { border-radius: 0; > li { display: block; float: left; margin: 0 0 5px 5px; > a, > span { display: block; float: none; margin: 0; padding-right: 8px; padding-left: 8px; color: @text-color; font-weight: 600; border: none; } &:first-child { > a, > span { .border-left-radius(0); } } &:last-child { > a, > span { .border-right-radius(0); } } } > li > a, > li > span { &:hover, &:focus { color: @brand-primary; background-color: transparent; .box-shadow(0 2px @brand-primary); } } > .active > a, > .active > span { &, &:hover, &:focus { color: @brand-primary; background-color: @gray-lighter; .box-shadow(0 2px @brand-primary); } } > .disabled { > span, > span:hover, > span:focus, > a, > a:hover, > a:focus { color: @gray-base; .box-shadow(none); } } } .pager li { > a, > span { padding: 6px 14px; font-weight: 600; color: @text-color; border: 1px solid #eee; border-radius: 3px; } > a { &:hover, &:focus { color: @brand-primary; background-color: @gray-lighter; } } &.disabled { > span, > span:hover, > span:focus, > a, > a:hover, > a:focus { color: @gray-base; .box-shadow(none); } } } // List Group .list-group-item { padding: 10px 15px; border-color: #eee; } a.list-group-item { font-weight: 600; color: @text-color; &:hover, &:focus { color: @brand-primary; } } .list-group-item.active { &, &:hover, &:focus { background-color: @brand-primary; border-color: @brand-primary; } > .badge { color: @brand-primary; } } // Breadcrumb .breadcrumb { padding: 0; margin-bottom: 0; text-transform: uppercase; font-size: 12px; font-weight: 600; color: @gray-dark; background-color: transparent; > li + li:before { display: inline-block; padding: 0; font-family: "FontAwesome"; color: rgba(0,0,0,.5); content: "\f105"; width: 20px; text-align: center; vertical-align: top; } } // Tooltip .tooltip-inner { padding: 6px 8px; background-color: @brand-darker; border-radius: 0; } .tooltip { &.top .tooltip-arrow { border-top-color: @brand-darker; } &.right .tooltip-arrow { border-right-color: @brand-darker; } &.left .tooltip-arrow { border-left-color: @brand-darker; } &.bottom .tooltip-arrow { border-bottom-color: @brand-darker; } } // Popovers .popover { border-color: #ddd; border-radius: 2px; .box-shadow(0 10px 30px rgba(0,0,0,.05)); } .popover-title { padding: 10px 10px 1px; font-family: @headings-font-family; background-color: #fff; border-bottom: none; border-radius: 1px 1px 0 0; } .popover-content { padding: 10px; } // Dropdowns .dropdown-menu { min-width: 180px; padding: 5px 0; border-color: #ddd; border-radius: 2px; .box-shadow(0 10px 30px rgba(0,0,0,.05)); // Links within the dropdown menu > li > a { padding: 7px 12px; &:hover { background-color: #f9f9f9; } i, .badge { &.pull-right { right: 0; margin-top: 3px; margin-left: 10px; } &.pull-left { left: 0; margin-top: 3px; margin-right: 10px; } } .badge { &.pull-right { margin-top: 1px; } &.pull-left { margin-top: 1px; } } } > .active > a { &, &:hover, &:focus { color: @text-color-dark; background-color: #f0f0f0; } } } .dropdown-header { padding: 5px 12px 4px; font-weight: 600; color: @gray-dark; text-transform: uppercase; } // Tables .table { > thead, > tbody, > tfoot { > tr { > th, > td { padding: 12px 10px; border-top: 1px solid #f0f0f0; } > th { padding: 16px 10px 12px; font-family: @headings-font-family; font-size: 15px; font-weight: 600; text-transform: uppercase; } } } > thead > tr > th { border-bottom: 1px solid #ddd; } > tbody + tbody { border-top: 1px solid #ddd; } } .table-condensed { > thead, > tbody, > tfoot { > tr { > td { padding: 6px 8px; } } } } .table-bordered { border: 1px solid #e9e9e9; > thead, > tbody, > tfoot { > tr { > th, > td { border: 1px solid #f0f0f0; } } } > thead > tr { > th, > td { border-bottom-width: 1px; border-bottom-color: #e9e9e9; } } } .table-borderless { border: none; > thead, > tbody, > tfoot { > tr { > th, > td { border: none; } } } > thead > tr { > th, > td { border-bottom: 1px solid #ddd; } } } .table-vcenter { > thead, > tbody, > tfoot { > tr { > th, > td { vertical-align: middle; } } } } .table-striped { > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; } } .table-hover { > tbody > tr:hover { background-color: #f5f5f5; } } .table-header-bg { > thead > tr { > th, > td { color: #fff; background-color: @brand-primary; border-bottom-color: @brand-primary; } } } .table-row-variant(active; #f9f9f9); .table-row-variant(success; @brand-success-light); .table-row-variant(info; @brand-info-light); .table-row-variant(warning; @brand-warning-light); .table-row-variant(danger; @brand-danger-light); .table-responsive { -webkit-overflow-scrolling: touch; } // Table Tools .js-table-checkable tbody tr, .js-table-sections-header > tr { cursor: pointer; } .js-table-sections-header { > tr > td:first-child > i { .transition-transform(.15s ease-out); } + tbody { display: none; } &.open { > tr { background-color: #f9f9f9; } > tr > td:first-child > i { .rotate(90deg); } + tbody { display: table-row-group; } } } // Modals .modal { &.fade .modal-dialog { .transition(all .12s ease-out); &.modal-dialog-popin { .scale(1.1); } &.modal-dialog-popout { .scale(.9); } &.modal-dialog-slideup { .translate(0, 10%); } &.modal-dialog-slideright { .translate(-10%, 0); } &.modal-dialog-slideleft { .translate(10%, 0); } &.modal-dialog-fromright { -webkit-transform: translateX(25%) rotate(10deg) scale(.9); -ms-transform: translateX(25%) rotate(10deg) scale(.9); transform: translateX(25%) rotate(10deg) scale(.9); } &.modal-dialog-fromleft { -webkit-transform: translateX(-25%) rotate(-10deg) scale(.9); -ms-transform: translateX(-25%) rotate(-10deg) scale(.9); transform: translateX(-25%) rotate(-10deg) scale(.9); } } &.in .modal-dialog { &.modal-dialog-popin, &.modal-dialog-popout { .scale(1); } &.modal-dialog-slideup, &.modal-dialog-slideright, &.modal-dialog-slideleft { .translate(0, 0); } &.modal-dialog-fromright, &.modal-dialog-fromleft { -webkit-transform: translateX(0) rotate(0) scale(1); -ms-transform: translateX(0) rotate(0) scale(1); transform: translateX(0) rotate(0) scale(1); } } } .modal-dialog { &&-top { margin-top: 0; padding: 0 !important; .modal-content { .border-top-radius(0); } } } .modal-content { border: none; border-radius: 0; .box-shadow(none); } .modal-backdrop.in { opacity: .25; } .modal-header { padding: 18px 20px; border-bottom-color: #eee; } .modal-body { padding: 20px; } .modal-footer { padding: 12px 20px; border-top-color: #eee; } .modal-title { font-weight: normal; } // Animations .fade { &&-up { opacity: 0; .transition(all .25s ease-out); .translateY(100px); &.in { opacity: 1; .translateY(0); } } &&-right { opacity: 0; .transition(all .25s ease-out); .translateX(-100px); &.in { opacity: 1; .translateX(0); } } &&-left { opacity: 0; .transition(all .25s ease-out); .translateX(100px); &.in { opacity: 1; .translateX(0); } } } // Panels .panel { border-radius: 3px; .box-shadow(none); } .panel-group { .panel { border-radius: 3px; + .panel { margin-top: 10px; } } } .panel-default { .panel-variant(#f0f0f0; @text-color; #f9f9f9; #f0f0f0); } .panel-primary { .panel-variant(@brand-lighter; @brand-primary; lighten(@brand-lighter, 7%); @brand-lighter); } .panel-success { .panel-variant(darken(@brand-success-light, 5%); @brand-success; @brand-success-light; darken(@brand-success-light, 5%)); } .panel-info { .panel-variant(darken(@brand-info-light, 5%); @brand-info; @brand-info-light; darken(@brand-info-light, 5%)); } .panel-warning { .panel-variant(darken(@brand-warning-light, 5%); @brand-warning; @brand-warning-light; darken(@brand-warning-light, 5%)); } .panel-danger { .panel-variant(darken(@brand-danger-light, 5%); @brand-danger; @brand-danger-light; darken(@brand-danger-light, 5%)); } // Helpers .img-responsive { width: 100%; }