// // Bootstrap TagManager // -------------------------------------------------- // Tag Variables // -------------------------------------------------- // Colors // ------------------------- @white: #ffffff; @black: #000000; @gray: #555555; @grayDark: #333333; @textColor: @grayDark; @tagText: @gray; @tagBackground: #f5f5f5; @tagBorder: #bbb; @tagWarningText: #945203; @tagWarningBackground: #f2c889; @tagWarningBorder: #f0a12f; @tagErrorText: #84212e; @tagErrorBackground: #e69ca6; @tagErrorBorder: #d24a5d; @tagSuccessText: #638421; @tagSuccessBackground: #cde69c; @tagSuccessBorder: #a5d24a; @tagInfoText: #4594b5; @tagInfoBackground: #c5eefa; @tagInfoBorder: #5dc8f7; @tagInverseText: #ccc; @tagInverseBackground: @gray; @tagInverseBorder: @grayDark; @tagDisabledText: #aaa; @tagDisabledBackground: #e6e6e6; @tagDisabledBorder: #ccc; // Sizing // ------------------------- @tagFontSize: 13px; @tagFontSizeLarge: @tagFontSize * 1.25; // ~16px @tagFontSizeSmall: @tagFontSize * 0.85; // ~11px @tagFontSizeMini: @tagFontSize * 0.75; // ~10px @tagPadding: 4px; @tagMargin: 5px; @borderRadiusSmall: 3px; @baseBorderRadius: 4px; @baseLineHeight: 20px; // Tag Classes // -------------------------------------------------- // Fonts // -------------------------------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; // Base tag class // ------------------------- .tm-tag { color: @tagText; background-color: @tagBackground; border: @tagBorder 1px solid; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; display: inline-block; border-radius: @borderRadiusSmall; font-family: @sansFontFamily; font-size: @tagFontSize; margin: 0 @tagMargin @tagMargin 0; padding: @tagPadding; text-decoration: none; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; vertical-align: middle; // Remove button // ------------------------- .tm-tag-remove { color: @black; font-weight: bold; margin-left: @tagPadding; opacity: 0.2; &:hover { color: @black; text-decoration: none; opacity: 0.4; } } // Semantic Colors // ------------------------- &.tm-tag-warning { color: @tagWarningText; background-color: @tagWarningBackground; border-color: @tagWarningBorder; } &.tm-tag-error { color: @tagErrorText; background-color: @tagErrorBackground; border-color: @tagErrorBorder; } &.tm-tag-success { color: @tagSuccessText; background-color: @tagSuccessBackground; border-color: @tagSuccessBorder; } &.tm-tag-info { color: @tagInfoText; background-color: @tagInfoBackground; border-color: @tagInfoBorder; } &.tm-tag-inverse { color: @tagInverseText; background-color: @tagInverseBackground; border-color: @tagInverseBorder; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset; .tm-tag-remove { color: @white; } } // Sizes // ------------------------- &.tm-tag-large { font-size: @tagFontSizeLarge; border-radius: @baseBorderRadius; padding: 11px 7px; } &.tm-tag-small { font-size: @tagFontSizeSmall; border-radius: @borderRadiusSmall; padding: 2px 4px; } &.tm-tag-mini { font-size: @tagFontSizeMini; border-radius: 2px; padding: 0px 2px; } // Miscellaneous Styles // ------------------------- &.tm-tag-plain { color: @textColor; box-shadow: none; background: none; border: none; } &.tm-tag-disabled { color: @tagDisabledText; background-color: @tagDisabledBackground; border-color: @tagDisabledBorder; box-shadow: none; .tm-tag-remove { display: none; } } } // Forms // -------------------------------------------------- // Input style (Recommended) // ------------------------- input[type="text"].tm-input { margin-bottom: @tagMargin; } // Form wrappers (Optional) // ------------------------- .control-group.tm-group { margin-bottom: (@baseLineHeight / 2) - @tagMargin; } .form-horizontal .control-group.tm-group { margin-bottom: @baseLineHeight - @tagMargin; }