Tim Schumacher
parent
3f1e728781
commit
4385f1acbc
425 changed files with 59924 additions and 37200 deletions
|
|
@ -2,46 +2,57 @@
|
|||
Label
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Element
|
||||
--------------------*/
|
||||
|
||||
|
||||
@verticalAlign: baseline;
|
||||
@verticalMargin: 0em;
|
||||
@horizontalMargin: 0.125em;
|
||||
@horizontalMargin: @relative2px;
|
||||
@backgroundColor: #E8E8E8;
|
||||
@color: @mutedTextColor;
|
||||
@backgroundImage: none;
|
||||
@labelTextColor: rgba(0, 0, 0, 0.6);
|
||||
@verticalPadding: 0.6em;
|
||||
@horizontalPadding: 0.8em;
|
||||
@verticalPadding: 0.5833em; /* medium is not @emSize custom value required */
|
||||
@horizontalPadding: 0.833em;
|
||||
@borderRadius: @absoluteBorderRadius;
|
||||
@textTransform: none;
|
||||
@fontWeight: bold;
|
||||
@borderWidth: 1px;
|
||||
@border: 0px solid transparent;
|
||||
|
||||
@labelTransitionDuration: @transitionDuration;
|
||||
@labelTransitionEasing: @transitionEasing;
|
||||
@lineHeightOffset: -(@verticalPadding / 2);
|
||||
|
||||
@labelTransitionDuration: @defaultDuration;
|
||||
@labelTransitionEasing: @defaultEasing;
|
||||
@transition: background @labelTransitionDuration @labelTransitionEasing;
|
||||
|
||||
/* Group */
|
||||
@groupVerticalMargin: 0.75em;
|
||||
@groupVerticalMargin: 0.5em;
|
||||
@groupHorizontalMargin: 0.5em;
|
||||
|
||||
/*-------------------
|
||||
Parts
|
||||
--------------------*/
|
||||
|
||||
@linkOpacity: 0.8;
|
||||
/* Link */
|
||||
@linkOpacity: 0.5;
|
||||
@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
|
||||
|
||||
/* Icon */
|
||||
@iconDistance: 0.75em;
|
||||
|
||||
/* Image */
|
||||
@imageHeight: (1em + @verticalPadding * 2);
|
||||
|
||||
/* Detail */
|
||||
@detailFontWeight: bold;
|
||||
@detailOpacity: 0.8;
|
||||
@detailIconDistance: 0.25em;
|
||||
@detailMargin: 1em;
|
||||
|
||||
/* Delete */
|
||||
@deleteOpacity: @linkOpacity;
|
||||
@deleteSize: @relativeSmall;
|
||||
@deleteMargin: 0.5em;
|
||||
@deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
|
||||
|
||||
|
|
@ -51,19 +62,19 @@
|
|||
|
||||
/* Image Label */
|
||||
@imageLabelBackground: @backgroundColor;
|
||||
@imageLabelBorderRadius: @circularRadius;
|
||||
@imageLabelVerticalPadding: @verticalPadding;
|
||||
@imageLabelHorizontalPadding: @horizontalPadding;
|
||||
@imageLabelTextDistance: 0.5em;
|
||||
@imageLabelDetailDistance: @imageLabelTextDistance;
|
||||
@imageLabelBorderRadius: @borderRadius;
|
||||
@imageLabelBoxShadow: none;
|
||||
@imageLabelDetailBackground: @strongTransparentBlack;
|
||||
|
||||
/* Computed Values */
|
||||
@imageLabelImageHeight: (1em + @verticalPadding * 2);
|
||||
@imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance;
|
||||
|
||||
@imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance;
|
||||
@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius;
|
||||
@imageLabelImageHeight: @imageHeight;
|
||||
|
||||
@imageLabelDetailBackground: @strongTransparentBlack;
|
||||
@imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding;
|
||||
@imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance;
|
||||
|
||||
|
|
@ -71,26 +82,50 @@
|
|||
States
|
||||
--------------------*/
|
||||
|
||||
/* Hover */
|
||||
@labelHoverBackgroundColor: #E0E0E0;
|
||||
@labelHoverBackgroundImage: none;
|
||||
@labelHoverTextColor: @hoveredTextColor;
|
||||
|
||||
/* Active */
|
||||
@labelActiveBackgroundColor: #D0D0D0;
|
||||
@labelActiveBackgroundImage: none;
|
||||
@labelActiveTextColor: @selectedTextColor;
|
||||
|
||||
/* Active Hover */
|
||||
@labelActiveHoverBackgroundColor: #C8C8C8;
|
||||
@labelActiveHoverBackgroundImage: none;
|
||||
@labelActiveHoverTextColor: @selectedTextColor;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Variations
|
||||
--------------------*/
|
||||
|
||||
/* Basic */
|
||||
@basicBackground: none @white;
|
||||
@basicBorderWidth: 1px;
|
||||
@basicBorder: @basicBorderWidth solid @borderColor;
|
||||
@basicColor: @textColor;
|
||||
@basicBoxShadow: none;
|
||||
|
||||
@basicHoverBackground: @basicBackground;
|
||||
@basicHoverColor: @linkHoverColor;
|
||||
@basicHoverBorder: @basicBorder;
|
||||
@basicHoverBoxShadow: @basicBoxShadow;
|
||||
|
||||
/* Tag */
|
||||
@tagCircleColor: #FFFFFF;
|
||||
@tagCircleColor: @white;
|
||||
@tagCircleSize: 0.5em;
|
||||
@tagHorizontalPadding: 1.5em;
|
||||
@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
|
||||
@tagTriangleRightOffset: 100%;
|
||||
@tagTriangleTopOffset: 50%;
|
||||
@tagTriangleSize: 1.56em;
|
||||
@tagTransition: background @labelTransitionDuration @labelTransitionEasing;
|
||||
@tagTriangleBackgroundImage: none;
|
||||
@tagTransition: none; /* Avoids error with background: inherit; on animation */
|
||||
|
||||
/* Ribbon */
|
||||
@ribbonImageTopDistance: 1rem;
|
||||
@ribbonTriangleSize: 1.2em;
|
||||
@ribbonShadowColor: rgba(0, 0, 0, 0.15);
|
||||
|
||||
|
|
@ -99,36 +134,77 @@
|
|||
@ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
|
||||
@rightRibbonOffset: ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
|
||||
|
||||
@ribbonImageTopDistance: 1rem;
|
||||
@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
|
||||
@ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
|
||||
@ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")";
|
||||
@rightRibbonImageOffset: ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
|
||||
|
||||
@blackRibbonShadow: darken(@black, 10);
|
||||
@blueRibbonShadow: darken(@blue, 10);
|
||||
@greenRibbonShadow: darken(@green, 10);
|
||||
@orangeRibbonShadow: darken(@orange, 10);
|
||||
@pinkRibbonShadow: darken(@pink, 10);
|
||||
@purpleRibbonShadow: darken(@purple, 10);
|
||||
@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
|
||||
@ribbonTableOffset: ~"calc("-@ribbonTableMargin~" - "@ribbonTriangleSize~")";
|
||||
@rightRibbonTableOffset: ~"calc(100% + "@ribbonTableMargin~" + "@ribbonTriangleSize~")";
|
||||
|
||||
|
||||
/* Colors */
|
||||
@redTextColor: @white;
|
||||
@orangeTextColor: @white;
|
||||
@yellowTextColor: @white;
|
||||
@oliveTextColor: @white;
|
||||
@greenTextColor: @white;
|
||||
@tealTextColor: @white;
|
||||
@blueTextColor: @white;
|
||||
@violetTextColor: @white;
|
||||
@purpleTextColor: @white;
|
||||
@pinkTextColor: @white;
|
||||
@brownTextColor: @white;
|
||||
@greyTextColor: @white;
|
||||
@blackTextColor: @white;
|
||||
|
||||
@redHoverTextColor: @white;
|
||||
@orangeHoverTextColor: @white;
|
||||
@yellowHoverTextColor: @white;
|
||||
@oliveHoverTextColor: @white;
|
||||
@greenHoverTextColor: @white;
|
||||
@tealHoverTextColor: @white;
|
||||
@blueHoverTextColor: @white;
|
||||
@violetHoverTextColor: @white;
|
||||
@purpleHoverTextColor: @white;
|
||||
@pinkHoverTextColor: @white;
|
||||
@brownHoverTextColor: @white;
|
||||
@greyHoverTextColor: @white;
|
||||
@blackHoverTextColor: @white;
|
||||
|
||||
@redRibbonShadow: darken(@red, 10);
|
||||
@tealRibbonShadow: darken(@teal, 10);
|
||||
@orangeRibbonShadow: darken(@orange, 10);
|
||||
@yellowRibbonShadow: darken(@yellow, 10);
|
||||
@oliveRibbonShadow: darken(@olive, 10);
|
||||
@greenRibbonShadow: darken(@green, 10);
|
||||
@tealRibbonShadow: darken(@teal, 10);
|
||||
@blueRibbonShadow: darken(@blue, 10);
|
||||
@violetRibbonShadow: darken(@violet, 10);
|
||||
@purpleRibbonShadow: darken(@purple, 10);
|
||||
@pinkRibbonShadow: darken(@pink, 10);
|
||||
@brownRibbonShadow: darken(@brown, 10);
|
||||
@greyRibbonShadow: darken(@grey, 10);
|
||||
@blackRibbonShadow: darken(@black, 10);
|
||||
|
||||
/* Attached */
|
||||
@attachedSegmentPadding: 2rem;
|
||||
@attachedVerticalPadding: 0.75em;
|
||||
@attachedHorizontalPadding: 1em;
|
||||
|
||||
@attachedCornerBorderRadius: @3px;
|
||||
@attachedBorderRadius: @borderRadius;
|
||||
|
||||
/* Corner */
|
||||
@cornerSizeRatio: 1;
|
||||
@cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
|
||||
@cornerTriangleSize: 3.25em;
|
||||
@cornerTriangleSize: 4em;
|
||||
@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
|
||||
@cornerTriangleZIndex: 1;
|
||||
|
||||
@cornerIconSize: 1em;
|
||||
@cornerIconTopOffset: 0.4em;
|
||||
@cornerIconLeftOffset: 0.75em;
|
||||
@cornerIconSize: @relativeLarge;
|
||||
@cornerIconTopOffset: @relative9px;
|
||||
@cornerIconLeftOffset: @relative11px;
|
||||
|
||||
/* Corner Text */
|
||||
@cornerTextWidth: 3em;
|
||||
|
|
@ -146,14 +222,18 @@
|
|||
@emptyCircleSize: 0.5em;
|
||||
|
||||
/* Pointing */
|
||||
@pointingBorderColor: inherit;
|
||||
@pointingBorderWidth: @borderWidth;
|
||||
@pointingVerticalDistance: 1em;
|
||||
@pointingTriangleSize: 0.6em;
|
||||
@pointingTriangleSize: 0.6666em;
|
||||
@pointingHorizontalDistance: @pointingTriangleSize;
|
||||
|
||||
@pointingTriangleOffset: (@pointingTriangleSize / 2);
|
||||
@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing;
|
||||
@pointingTriangleZIndex: 2;
|
||||
|
||||
/* Basic Pointing */
|
||||
@basicPointingTriangleOffset: -@pointingBorderWidth;
|
||||
|
||||
/* Floating */
|
||||
@floatingTopOffset: -1em;
|
||||
@floatingLeftOffset: -1.5em;
|
||||
|
|
@ -164,11 +244,11 @@
|
|||
--------------------*/
|
||||
|
||||
/* Sizing */
|
||||
@mini : 0.6428rem;
|
||||
@tiny : 0.7142rem;
|
||||
@small : 0.7857rem;
|
||||
@medium : 0.8571rem;
|
||||
@large : 1rem;
|
||||
@big : 1.1428rem;
|
||||
@huge : 1.2857rem;
|
||||
@massive : 1.4285rem;
|
||||
@mini : @9px;
|
||||
@tiny : @10px;
|
||||
@small : @11px;
|
||||
@medium : @12px;
|
||||
@large : @absoluteMedium;
|
||||
@big : @absoluteBig;
|
||||
@huge : @absoluteHuge;
|
||||
@massive : @absoluteMassive;
|
||||
|
|
|
|||
Reference in a new issue