// // General UI // -------------------------------------------------- /* * * * * * * * * * * * * Alerts * * * * * * * * * * * */ .alert { .border-radius(0); margin-bottom: 15px; .close { font-size: 11px; line-height: 25px; } } /* * * * * * * * * * * * * Images * * * * * * * * * * * */ img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /* * * * * * * * * * * * * Code * * * * * * * * * * * */ code { color: @blue; background-color: @grayLighter; border: 1px solid @grayLightBorder; .border-radius(0); } /* * * * * * * * * * * * * Labels and Badges * * * * * * * * * * * */ .label, .badge { font-size: (@baseFontSize - 3px); font-weight: normal; } .label, .badge { .border-radius(0); } /* Colors */ .label-info { background-color: @blueLight; } .label-success { background-color: @green; } .label-danger { background-color: @red; } /* * * * * * * * * * * * * Tooltips * * * * * * * * * * * */ .tooltip-inner { .border-radius(0); } /* * * * * * * * * * * * * Popovers * * * * * * * * * * * */ .popover { .border-radius(0); .box-shadow(0 1px 3px rgba(0, 0, 0, 0.2)); border-bottom-color: #B3B3B3; } /* * * * * * * * * * * * * Help Blocks * * * * * * * * * * * */ .help-inline { display: inline-block; *display: inline; padding-left: 5px; vertical-align: middle; *zoom: 1; } /* * * * * * * * * * * * * Feed List * * * * * * * * * * * */ @col2Width: 100px; .feeds { margin: 0px; padding: 0px; list-style: none; li { background-color: @grayLighter; border-bottom: 1px solid @grayLightBorder; margin-bottom: 7px; &.hoverable:hover, &.hoverable:focus { background-color: darken(@grayLighter, 2%); } &.hoverable:active { background-color: darken(@grayLighter, 4%); border-top: 1px solid @grayLightBorder; border-bottom: none; } &:before, &:after { display: table; content: ""; line-height: 0; clear: both; } } .col1 { float: left; width: 100%; clear: both; .content { float: left; margin-right: @col2Width; overflow: hidden; .content-col1 { float: left; margin-right: -100%; .label { float: left; width: 14px; padding: 7px; text-align: center; line-height: 14px; .box-sizing(content-box); } } .content-col2 { float: left; width: 100%; .desc { margin-left: 35px; padding-top: 4px; padding-bottom: 4px; overflow: hidden; span { margin-left: 3px; } } } } } .col2 { float: left; width: @col2Width; margin-left: -@col2Width; .date { padding: 4px 9px 4px 4px; text-align: right; color: @gray; font-size: (@baseFontSize - 2px); } } } /* * * * * * * * * * * * * Panels * * * * * * * * * * * */ .panel, .panel-group .panel { .border-radius(0); .box-shadow(none); } .panel-title { font-size: @baseFontSize; font-weight: 600; } /* * * * * * * * * * * * * List Groups * * * * * * * * * * * */ .list-group-item { &:first-child, &:last-child { .border-radius(0); } &.no-padding { padding: 0; } } a.list-group-item.active { border-color: darken(@mainColor, 5%); background-color: @mainColor; } .list-group-header { text-transform: uppercase; font-weight: 600; font-size: (@baseFontSize - 2px); background-color: @grayLighter; } .widget.box > .widget-content.no-padding > .list-group { margin-bottom: 0px; > .list-group-item { border-left: 0px; border-right: 0px; &:first-child { border-top: 0px; } &:last-child { border-bottom: 0px; } } } /* * * * * * * * * * * * * Wells * * * * * * * * * * * */ .well { .border-radius(0); .box-shadow(none); background-color: @grayLighter; border-color: @grayLightBorder; } /* * * * * * * * * * * * * Profile Info * * * * * * * * * * * */ .profile-info { h1 { font-size: (@baseFontSize + 7px); font-weight: 600; } p, dl { color: lighten(@textColor, 15%); } } /* * * * * * * * * * * * * Google Maps * * * * * * * * * * * */ .gmaps { height: 300px; width: 100%; img { max-width: none !important; } } /* * * * * * * * * * * * * Ribbons * * * * * * * * * * * */ .ribbon-wrapper { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; &.ribbon-top-right { right: -3px; .ribbon { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); left: -5px; top: 15px; } } &.ribbon-top-left { left: -3px; .ribbon { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); left: -29px; top: 15px; } } .ribbon { font-size: 11px; font-weight: 600; color: #fff; text-align: center; position: relative; padding: 7px 0; width: 120px; &:before, &:after { content: ""; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } &:before { left: 0; } &:after { right: 0; } // Colors &.red { &:before, &:after { border-top: 3px solid darken(@red, 20%); } background-color: @red; } &.blue { &:before, &:after { border-top: 3px solid darken(@blue, 20%); } background-color: @blue; } &.green { &:before, &:after { border-top: 3px solid darken(@green, 20%); } background-color: @green; } &.orange { &:before, &:after { border-top: 3px solid darken(@orange, 20%); } background-color: @orange; } } }