| // |
| // 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; |
| } |