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

     1  /*******************************
     2               Card
     3  *******************************/
     4  
     5  /*-------------------
     6           View
     7  --------------------*/
     8  
     9  /* Shadow */
    10  @shadowDistance: 3px;
    11  @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
    12  
    13  /* Card */
    14  @display: flex;
    15  @background: #FFFFFF;
    16  @borderRadius: @defaultBorderRadius;
    17  @margin: 1em 0em;
    18  @minHeight: 0px;
    19  @padding: 0em;
    20  @width: 290px;
    21  @borderWidth: 1px;
    22  @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
    23  @boxShadow:
    24    @shadowBoxShadow,
    25    @borderShadow
    26  ;
    27  @border: none;
    28  @zIndex: '';
    29  @transition: box-shadow @transitionDuration @transitionEasing;
    30  
    31  /* Card Group */
    32  @horizontalSpacing: 1em;
    33  @rowSpacing: 1.75em;
    34  
    35  @groupMargin: -(@rowSpacing / 2) -(@horizontalSpacing / 2);
    36  @groupDisplay: flex;
    37  
    38  @groupCardFloat: none;
    39  @groupCardDisplay: flex;
    40  @groupCardMargin: (@rowSpacing / 2) (@horizontalSpacing / 2);
    41  
    42  /* Consecutive Cards */
    43  @consecutiveGroupDistance: (@rowSpacing / 2);
    44  
    45  /*-------------------
    46         Content
    47  --------------------*/
    48  
    49  /* Image */
    50  @imageBackground: @transparentBlack;
    51  @imagePadding: 0em;
    52  @imageBorder: none;
    53  @imageBorderRadius: @borderRadius @borderRadius 0em 0em;
    54  @imageBoxShadow: none;
    55  @imageBorder: none;
    56  
    57  /* Content */
    58  @contentMargin: 0em;
    59  @contentBackground: none;
    60  @contentPadding: 1em 1em;
    61  @contentFontSize: 1em;
    62  @contentBorder: none;
    63  @contentBorderRadius: 0em;
    64  @contentBoxShadow: none;
    65  
    66  /* Header */
    67  @headerMargin: 0em;
    68  @headerFontWeight: bold;
    69  @headerFontSize: 1.2em;
    70  @headerLineHeight: 1.33em;
    71  @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
    72  @headerColor: @darkTextColor;
    73  
    74  /* Metadata */
    75  @metaFontSize: 0.9em;
    76  @metaSpacing: 0.3em;
    77  @metaColor: @lightTextColor;
    78  
    79  /* Icons */
    80  @actionOpacity: 0.75;
    81  @actionHoverOpacity: 1;
    82  @actionTransition: color @transitionDuration @transitionEasing;
    83  
    84  @starColor: #FFB70A;
    85  @starActiveColor: #FFE623;
    86  
    87  @likeColor: #FF2733;
    88  @likeActiveColor: #FF2733;
    89  
    90  /* Links */
    91  @contentLinkColor: '';
    92  @contentLinkHoverColor: '';
    93  @contentLinkTransition: color @transitionDuration @transitionEasing;
    94  
    95  @headerLinkColor: @headerColor;
    96  @headerLinkHoverColor: @linkHoverColor;
    97  
    98  @metaLinkColor: @lightTextColor;
    99  @metaLinkHoverColor: @textColor;
   100  
   101  /* Description */
   102  @descriptionDistance: 0.5em;
   103  @descriptionColor: rgba(0, 0, 0, 0.5);
   104  
   105  /* Content Image */
   106  @contentImageWidth: auto;
   107  @contentImageVerticalAlign: middle;
   108  
   109  /* Avatar Image */
   110  @avatarSize: 2.5em;
   111  @avatarBorderRadius: @circularRadius;
   112  
   113  /* Paragraph */
   114  @paragraphDistance: 0.5em;
   115  
   116  /* Dimmer */
   117  @dimmerZIndex: 10;
   118  @dimmerColor: '';
   119  
   120  /* Additional Content */
   121  @extraDivider: 1px solid rgba(0, 0, 0, 0.05);
   122  @extraBackground: none;
   123  @extraPosition: static;
   124  @extraWidth: auto;
   125  @extraTop: 0em;
   126  @extraLeft: 0em;
   127  @extraMargin: 0em 0em;
   128  @extraPadding: 0.75em 1em;
   129  @extraBoxShadow: none;
   130  @extraColor: @lightTextColor;
   131  @extraTransition: color @transitionDuration @transitionEasing;
   132  
   133  /* Extra Links */
   134  @extraLinkColor: @unselectedTextColor;
   135  @extraLinkHoverColor: @linkHoverColor;
   136  
   137  /* Buttons */
   138  @buttonMargin: 0em 0em -1px;
   139  @buttonWidth: 100%;
   140  
   141  /*-------------------
   142        Variations
   143  --------------------*/
   144  
   145  /* Link */
   146  @linkHoverBackground: '';
   147  @linkHoverBorder: none;
   148  @linkHoverZIndex: 5;
   149  
   150  @shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
   151  @linkHoverBoxShadow:
   152    @shadowHoverBoxShadow,
   153    0px 0px 0px 1px @selectedBorderColor
   154  ;
   155  
   156  /* Card Count */
   157  @wideCardSpacing: 1em;
   158  @cardSpacing: 0.75em;
   159  @smallCardSpacing: 0.5em;
   160  
   161  @oneCardSpacing: 0em;
   162  @twoCardSpacing: @wideCardSpacing;
   163  @threeCardSpacing: @wideCardSpacing;
   164  @fourCardSpacing: @cardSpacing;
   165  @fiveCardSpacing: @cardSpacing;
   166  @sixCardSpacing: @cardSpacing;
   167  @sevenCardSpacing: @smallCardSpacing;
   168  @eightCardSpacing: @smallCardSpacing;
   169  @nineCardSpacing: @smallCardSpacing;
   170  @tenCardSpacing: @smallCardSpacing;
   171  
   172  @oneCard: @oneColumn;
   173  @oneCardOffset: 0em;
   174  @twoCard: ~"calc("@twoColumn~" - "(@twoCardSpacing * 2)~")";
   175  @twoCardOffset: -@twoCardSpacing;
   176  @threeCard: ~"calc("@threeColumn~" - "(@threeCardSpacing * 2)~")";
   177  @threeCardOffset: -@threeCardSpacing;
   178  @fourCard: ~"calc("@fourColumn~" - "(@fourCardSpacing * 2)~")";
   179  @fourCardOffset: -@fourCardSpacing;
   180  @fiveCard: ~"calc("@fiveColumn~" - "(@fiveCardSpacing * 2)~")";
   181  @fiveCardOffset: -@fiveCardSpacing;
   182  @sixCard: ~"calc("@sixColumn~" - "(@sixCardSpacing * 2)~")";
   183  @sixCardOffset: -@sixCardSpacing;
   184  @sevenCard: ~"calc("@sevenColumn~" - "(@sevenCardSpacing * 2)~")";
   185  @sevenCardOffset: -@sevenCardSpacing;
   186  @eightCard: ~"calc("@eightColumn~" - "(@sevenCardSpacing * 2)~")";
   187  @eightCardOffset: -@sevenCardSpacing;
   188  @nineCard: ~"calc("@nineColumn~" - "(@nineCardSpacing * 2)~")";
   189  @nineCardOffset: -@nineCardSpacing;
   190  @tenCard: ~"calc("@tenColumn~" - "(@tenCardSpacing * 2)~")";
   191  @tenCardOffset: -@tenCardSpacing;
   192  
   193  /* Stackable */
   194  @stackableRowSpacing: 1em;
   195  @stackableCardSpacing: 1em;
   196  @stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")";
   197  
   198  /* Sizes */
   199  @medium: 1em;