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

     1  /*******************************
     2               Modal
     3  *******************************/
     4  
     5  @background: @white;
     6  @border: none;
     7  @width: 90%;
     8  @zIndex: 1001;
     9  @xOffset: -(@width / 2);
    10  @borderRadius: @defaultBorderRadius;
    11  @boxShadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
    12  
    13  /* Close Icon */
    14  @closeOpacity: 0.8;
    15  @closeSize: 1.25em;
    16  @closeColor: @white;
    17  
    18  @closeHitbox: 2.25rem;
    19  @closeDistance: 0.25rem;
    20  @closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
    21  @closePadding: @closeHitBoxOffset 0rem 0rem 0rem;
    22  @closeTop: -(@closeDistance + @closeHitbox);
    23  @closeRight: -(@closeDistance + @closeHitbox);
    24  
    25  /* Header */
    26  @headerMargin: 0em;
    27  @headerVerticalPadding: 1.2rem;
    28  @headerHorizontalPadding: 2rem;
    29  @headerPadding: @headerVerticalPadding @headerHorizontalPadding;
    30  @headerBackground: @subtleGradient @white;
    31  @headerColor: @darkTextColor;
    32  @headerFontSize: 1.6em;
    33  @headerLineHeight: 1.3em;
    34  @headerBoxShadow: @subtleShadow;
    35  @headerFontWeight: bold;
    36  @headerFontFamily: @headerFont;
    37  @headerBorder: 1px solid @borderColor;
    38  
    39  /* Content */
    40  @contentFontSize: 1em;
    41  @contentPadding: 2rem;
    42  @contentLineHeight: 1.4;
    43  @contentBackground: #FFFFFF;
    44  
    45  /* Image / Description */
    46  @imageWidth: '';
    47  @imageIconSize: 8rem;
    48  @imageVerticalAlign: top;
    49  
    50  @descriptionDistance: 2em;
    51  @descriptionMinWidth: '';
    52  @descriptionWidth: 80%;
    53  @descriptionVerticalAlign: top;
    54  
    55  /* Modal Actions */
    56  @actionBorder: 1px solid @borderColor;
    57  @actionBackground: #EFEFEF;
    58  @actionPadding: 1rem 2rem;
    59  @actionAlign: right;
    60  
    61  @buttonDistance: 0.75em;
    62  
    63  /* Inner Close Position (Tablet/Mobile) */
    64  @innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
    65  @innerCloseRight: 1rem;
    66  @innerCloseColor: @textColor;
    67  
    68  /* Mobile Positions */
    69  @mobileHeaderPadding: 0.75rem 1rem;
    70  @mobileContentPadding: 1rem;
    71  @mobileImagePadding: 0rem 0rem 1rem;
    72  @mobileDescriptionPadding: 1rem 0rem ;
    73  @mobileButtonDistance: 1rem;
    74  @mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
    75  @mobileImageIconSize: 5rem;
    76  @mobileCloseTop: 0.5rem;
    77  @mobileCloseRight: 0.5rem;
    78  
    79  
    80  /* Responsive Widths */
    81  @mobileWidth: 95%;
    82  @tabletWidth: 88%;
    83  @computerWidth: 74%;
    84  @largeMonitorWidth: 56%;
    85  @widescreenMonitorWidth: 42%;
    86  
    87  @mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
    88  @tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
    89  @computerMargin: 0em 0em 0em -(@computerWidth / 2);
    90  @largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
    91  @widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
    92  
    93  @fullScreenWidth: 95%;
    94  @fullScreenOffset: (100% - @fullScreenWidth) / 2;
    95  @fullScreenMargin: 1em auto;
    96  
    97  /*-------------------
    98          Types
    99  --------------------*/
   100  
   101  /* Basic */
   102  @basicModalHeaderColor: @white;
   103  @basicModalColor: @white;
   104  @basicModalCloseTop: 1rem;
   105  @basicModalCloseRight: 1.5rem;
   106  @basicInnerCloseColor: @white;
   107  
   108  /* Scrolling Margin */
   109  @scrollingMargin: 3.5rem;
   110  @mobileScrollingMargin: 1rem;
   111  
   112  /*-------------------
   113        Variations
   114  --------------------*/
   115  
   116  /* Size Widths */
   117  @smallRatio: 0.6;
   118  @largeRatio: 1.2;
   119  
   120  /* Derived Responsive Sizes */
   121  @smallHeaderSize: 1.3em;
   122  @smallMobileWidth: @mobileWidth;
   123  @smallTabletWidth: (@tabletWidth * @smallRatio);
   124  @smallComputerWidth: (@computerWidth * @smallRatio);
   125  @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
   126  @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
   127  
   128  @smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
   129  @smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
   130  @smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
   131  @smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
   132  @smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
   133  
   134  @largeHeaderSize: 1.6em;
   135  @largeMobileWidth: @mobileWidth;
   136  @largeTabletWidth: @tabletWidth;
   137  @largeComputerWidth: (@computerWidth * @largeRatio);
   138  @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
   139  @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
   140  
   141  @largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
   142  @largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
   143  @largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
   144  @largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
   145  @largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);