github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/elements/label.variables (about)

     1  /*******************************
     2               Label
     3  *******************************/
     4  
     5  
     6  /*-------------------
     7         Element
     8  --------------------*/
     9  
    10  
    11  @verticalAlign: baseline;
    12  @verticalMargin: 0em;
    13  @horizontalMargin: 0.125em;
    14  @backgroundColor: #E8E8E8;
    15  @backgroundImage: none;
    16  @labelTextColor: rgba(0, 0, 0, 0.6);
    17  @verticalPadding: 0.6em;
    18  @horizontalPadding: 0.8em;
    19  @borderRadius: @absoluteBorderRadius;
    20  @textTransform: none;
    21  @fontWeight: bold;
    22  
    23  @labelTransitionDuration: @transitionDuration;
    24  @labelTransitionEasing: @transitionEasing;
    25  @transition: background @labelTransitionDuration @labelTransitionEasing;
    26  
    27  /* Group */
    28  @groupVerticalMargin: 0.75em;
    29  @groupHorizontalMargin: 0.5em;
    30  
    31  /*-------------------
    32          Parts
    33  --------------------*/
    34  
    35  @linkOpacity: 0.8;
    36  @linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
    37  
    38  @iconDistance: 0.75em;
    39  
    40  @detailFontWeight: bold;
    41  @detailOpacity: 0.8;
    42  @detailIconDistance: 0.25em;
    43  @detailMargin: 1em;
    44  
    45  @deleteMargin: 0.5em;
    46  @deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
    47  
    48  /*-------------------
    49          Types
    50  --------------------*/
    51  
    52  /* Image Label */
    53  @imageLabelBackground: @backgroundColor;
    54  @imageLabelBorderRadius: @circularRadius;
    55  @imageLabelVerticalPadding: @verticalPadding;
    56  @imageLabelHorizontalPadding: @horizontalPadding;
    57  @imageLabelTextDistance: 0.5em;
    58  @imageLabelDetailDistance: @imageLabelTextDistance;
    59  @imageLabelBorderRadius: @borderRadius;
    60  @imageLabelBoxShadow: none;
    61  @imageLabelDetailBackground: @strongTransparentBlack;
    62  
    63  /* Computed Values */
    64  @imageLabelImageHeight: (1em + @verticalPadding * 2);
    65  @imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance;
    66  @imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance;
    67  @imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding;
    68  @imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance;
    69  
    70  /*-------------------
    71          States
    72  --------------------*/
    73  
    74  @labelHoverBackgroundColor: #E0E0E0;
    75  @labelHoverBackgroundImage: none;
    76  @labelHoverTextColor: @hoveredTextColor;
    77  
    78  /*-------------------
    79        Variations
    80  --------------------*/
    81  
    82  /* Tag */
    83  @tagCircleColor: #FFFFFF;
    84  @tagCircleSize: 0.5em;
    85  @tagHorizontalPadding: 1.5em;
    86  @tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
    87  @tagTriangleRightOffset: 100%;
    88  @tagTriangleTopOffset: 50%;
    89  @tagTriangleSize: 1.56em;
    90  @tagTransition: background @labelTransitionDuration @labelTransitionEasing;
    91  
    92  /* Ribbon */
    93  @ribbonImageTopDistance: 1rem;
    94  @ribbonTriangleSize: 1.2em;
    95  @ribbonShadowColor: rgba(0, 0, 0, 0.15);
    96  
    97  @ribbonMargin: 1rem;
    98  @ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
    99  @ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
   100  @rightRibbonOffset:  ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
   101  
   102  @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
   103  @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
   104  @ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")";
   105  @rightRibbonImageOffset:  ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
   106  
   107  @blackRibbonShadow: darken(@black, 10);
   108  @blueRibbonShadow: darken(@blue, 10);
   109  @greenRibbonShadow: darken(@green, 10);
   110  @orangeRibbonShadow: darken(@orange, 10);
   111  @pinkRibbonShadow: darken(@pink, 10);
   112  @purpleRibbonShadow: darken(@purple, 10);
   113  @redRibbonShadow: darken(@red, 10);
   114  @tealRibbonShadow: darken(@teal, 10);
   115  @yellowRibbonShadow: darken(@yellow, 10);
   116  
   117  /* Attached */
   118  @attachedSegmentPadding: 2rem;
   119  @attachedVerticalPadding: 0.75em;
   120  @attachedHorizontalPadding: 1em;
   121  
   122  /* Corner */
   123  @cornerSizeRatio: 1;
   124  @cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
   125  @cornerTriangleSize: 3.25em;
   126  @cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
   127  @cornerTriangleZIndex: 1;
   128  
   129  @cornerIconSize: 1em;
   130  @cornerIconTopOffset: 0.4em;
   131  @cornerIconLeftOffset: 0.75em;
   132  
   133  /* Corner Text */
   134  @cornerTextWidth: 3em;
   135  @cornerTextWeight: bold;
   136  @cornerTextSize: 1em;
   137  
   138  /* Horizontal */
   139  @horizontalLabelMinWidth: 3em;
   140  @horizontalLabelMargin: 0.5em;
   141  @horizontalLabelVerticalPadding: 0.4em;
   142  
   143  /* Circular Padding */
   144  @circularPadding: 0.5em;
   145  @circularMinSize: 2em;
   146  @emptyCircleSize: 0.5em;
   147  
   148  /* Pointing */
   149  @pointingVerticalDistance: 1em;
   150  @pointingTriangleSize: 0.6em;
   151  @pointingHorizontalDistance: @pointingTriangleSize;
   152  
   153  @pointingTriangleOffset: (@pointingTriangleSize / 2);
   154  @pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing;
   155  @pointingTriangleZIndex: 2;
   156  
   157  /* Floating */
   158  @floatingTopOffset: -1em;
   159  @floatingLeftOffset: -1.5em;
   160  @floatingZIndex: 100;
   161  
   162  /*-------------------
   163          Group
   164  --------------------*/
   165  
   166  /* Sizing */
   167  @mini    : 0.6428rem;
   168  @tiny    : 0.7142rem;
   169  @small   : 0.7857rem;
   170  @medium  : 0.8571rem;
   171  @large   : 1rem;
   172  @big     : 1.1428rem;
   173  @huge    : 1.2857rem;
   174  @massive : 1.4285rem;