Dotclear


Ignore:
Timestamp:
10/29/16 08:52:27 (9 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Switch magnific-popup jQuery plugin CSS to Sass/Compass?

File:
1 edited

Legend:

Unmodified
Added
Removed

  • admin/style/scss/vendor/_magnific-popup.scss

    r3368 r3370  
    11/* Magnific Popup CSS */ 
     2 
     3//////////////////////// 
     4//      Settings      // 
     5//////////////////////// 
     6 
     7// overlay 
     8$mfp-overlay-color:                   #0b0b0b !default;                    // Color of overlay screen 
     9$mfp-overlay-opacity:                 0.8 !default;                        // Opacity of overlay screen 
     10$mfp-shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // Shadow on image or iframe 
     11 
     12// spacing 
     13$mfp-popup-padding-left:              8px !default;                        // Padding from left and from right side 
     14$mfp-popup-padding-left-mobile:       6px !default;                        // Same as above, but is applied when width of window is less than 800px 
     15 
     16$mfp-z-index-base:                    1040 !default;                       // Base z-index of popup 
     17 
     18// controls 
     19$mfp-include-arrows:                  true !default;                       // Include styles for nav arrows 
     20$mfp-controls-opacity:                0.65 !default;                       // Opacity of controls 
     21$mfp-controls-color:                  #FFF !default;                       // Color of controls 
     22$mfp-controls-border-color:           #3F3F3F !default;                    // Border color of controls 
     23$mfp-inner-close-icon-color:          #333 !default;                       // Color of close button when inside 
     24$mfp-controls-text-color:             #CCC !default;                       // Color of preloader and "1 of X" indicator 
     25$mfp-controls-text-color-hover:       #FFF !default;                       // Hover color of preloader and "1 of X" indicator 
     26 
     27// Iframe-type options 
     28$mfp-include-iframe-type:             true !default;                       // Enable Iframe-type popups 
     29$mfp-iframe-padding-top:              40px !default;                       // Iframe padding top 
     30$mfp-iframe-background:               #000 !default;                       // Background color of iframes 
     31$mfp-iframe-max-width:                98%; // 900px !default;                      // Maximum width of iframes 
     32$mfp-iframe-ratio:                    9/16 !default;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) 
     33 
     34// Image-type options 
     35$mfp-include-image-type:              true !default;                       // Enable Image-type popups 
     36$mfp-image-background:                #444 !default; 
     37$mfp-image-padding-top:               40px !default;                       // Image padding top 
     38$mfp-image-padding-bottom:            40px !default;                       // Image padding bottom 
     39$mfp-include-mobile-layout-for-image: true !default;                       // Removes paddings from top and bottom 
     40 
     41// Image caption options 
     42$mfp-caption-title-color:             #F3F3F3 !default;                    // Caption title color 
     43$mfp-caption-subtitle-color:          #BDBDBD !default;                    // Caption subtitle color 
     44 
     45// A11y 
     46$mfp-use-visuallyhidden:              false !default;                      // Hide content from browsers, but make it available for screen readers 
     47 
     48//////////////////////// 
     49// 
     50// Contents: 
     51// 
     52// 1. General styles 
     53//    - Transluscent overlay 
     54//    - Containers, wrappers 
     55//    - Cursors 
     56//    - Helper classes 
     57// 2. Appearance 
     58//    - Preloader & text that displays error messages 
     59//    - CSS reset for buttons 
     60//    - Close icon 
     61//    - "1 of X" counter 
     62//    - Navigation (left/right) arrows 
     63//    - Iframe content type styles 
     64//    - Image content type styles 
     65//    - Media query where size of arrows is reduced 
     66//    - IE7 support 
     67// 
     68//////////////////////// 
     69 
     70 
     71 
     72//////////////////////// 
     73// 1. General styles 
     74//////////////////////// 
     75 
     76// Transluscent overlay 
    277.mfp-bg { 
    378  top: 0; 
    … …  
    580  width: 100%; 
    681  height: 100%; 
    7   z-index: 1042; 
     82  z-index: $mfp-z-index-base + 2; 
    883  overflow: hidden; 
    984  position: fixed; 
    10   background: #0b0b0b; 
    11   opacity: 0.8; } 
    12  
     85 
     86  background: $mfp-overlay-color; 
     87  opacity: $mfp-overlay-opacity; 
     88} 
     89 
     90// Wrapper for popup 
    1391.mfp-wrap { 
    1492  top: 0; 
    … …  
    1694  width: 100%; 
    1795  height: 100%; 
    18   z-index: 1043; 
     96  z-index: $mfp-z-index-base + 3; 
    1997  position: fixed; 
    2098  outline: none !important; 
    21   -webkit-backface-visibility: hidden; } 
    22  
     99  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar 
     100} 
     101 
     102// Root container 
    23103.mfp-container { 
    24104  text-align: center; 
    … …  
    28108  left: 0; 
    29109  top: 0; 
    30   padding: 0 8px; 
    31   box-sizing: border-box; } 
    32  
    33 .mfp-container:before { 
    34   content: ''; 
    35   display: inline-block; 
    36   height: 100%; 
    37   vertical-align: middle; } 
    38  
    39 .mfp-align-top .mfp-container:before { 
    40   display: none; } 
    41  
     110  padding: 0 $mfp-popup-padding-left; 
     111  box-sizing: border-box; 
     112} 
     113 
     114// Vertical centerer helper 
     115.mfp-container { 
     116  &:before { 
     117    content: ''; 
     118    display: inline-block; 
     119    height: 100%; 
     120    vertical-align: middle; 
     121  } 
     122} 
     123 
     124// Remove vertical centering when popup has class `mfp-align-top` 
     125.mfp-align-top { 
     126  .mfp-container { 
     127    &:before { 
     128      display: none; 
     129    } 
     130  } 
     131} 
     132 
     133// Popup content holder 
    42134.mfp-content { 
    43135  position: relative; 
    … …  
    46138  margin: 0 auto; 
    47139  text-align: left; 
    48   z-index: 1045; } 
    49  
    50 .mfp-inline-holder .mfp-content, 
    51 .mfp-ajax-holder .mfp-content { 
    52   width: 100%; 
    53   cursor: auto; } 
    54  
     140  z-index: $mfp-z-index-base + 5; 
     141} 
     142.mfp-inline-holder, 
     143.mfp-ajax-holder { 
     144  .mfp-content { 
     145    width: 100%; 
     146    cursor: auto; 
     147  } 
     148} 
     149 
     150// Cursors 
    55151.mfp-ajax-cur { 
    56   cursor: progress; } 
    57  
    58 .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { 
    59   cursor: -moz-zoom-out; 
    60   cursor: -webkit-zoom-out; 
    61   cursor: zoom-out; } 
    62  
     152  cursor: progress; 
     153} 
     154.mfp-zoom-out-cur { 
     155  &, .mfp-image-holder .mfp-close { 
     156    cursor: -moz-zoom-out; 
     157    cursor: -webkit-zoom-out; 
     158    cursor: zoom-out; 
     159  } 
     160} 
    63161.mfp-zoom { 
    64162  cursor: pointer; 
    65163  cursor: -webkit-zoom-in; 
    66164  cursor: -moz-zoom-in; 
    67   cursor: zoom-in; } 
    68  
    69 .mfp-auto-cursor .mfp-content { 
    70   cursor: auto; } 
     165  cursor: zoom-in; 
     166} 
     167.mfp-auto-cursor { 
     168  .mfp-content { 
     169    cursor: auto; 
     170  } 
     171} 
    71172 
    72173.mfp-close, 
    … …  
    74175.mfp-preloader, 
    75176.mfp-counter { 
    76   -webkit-user-select: none; 
     177  -webkit-user-select:none; 
    77178  -moz-user-select: none; 
    78   user-select: none; } 
    79  
    80 .mfp-loading.mfp-figure { 
    81   display: none; } 
    82  
    83 .mfp-hide { 
    84   display: none !important; } 
    85  
     179  user-select: none; 
     180} 
     181 
     182// Hide the image during the loading 
     183.mfp-loading { 
     184  &.mfp-figure { 
     185    display: none; 
     186  } 
     187} 
     188 
     189// Helper class that hides stuff 
     190@if $mfp-use-visuallyhidden { 
     191  // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden 
     192  .mfp-hide { 
     193    border: 0 !important; 
     194    clip: rect(0 0 0 0) !important; 
     195    height: 1px !important; 
     196    margin: -1px !important; 
     197    overflow: hidden !important; 
     198    padding: 0 !important; 
     199    position: absolute !important; 
     200    width: 1px !important; 
     201  } 
     202} @else { 
     203  .mfp-hide { 
     204    display: none !important; 
     205  } 
     206} 
     207 
     208 
     209//////////////////////// 
     210// 2. Appearance 
     211//////////////////////// 
     212 
     213// Preloader and text that displays error messages 
    86214.mfp-preloader { 
    87   color: #CCC; 
     215  color: $mfp-controls-text-color; 
    88216  position: absolute; 
    89217  top: 50%; 
    … …  
    93221  left: 8px; 
    94222  right: 8px; 
    95   z-index: 1044; } 
    96   .mfp-preloader a { 
    97     color: #CCC; } 
    98     .mfp-preloader a:hover { 
    99       color: #FFF; } 
    100  
    101 .mfp-s-ready .mfp-preloader { 
    102   display: none; } 
    103  
    104 .mfp-s-error .mfp-content { 
    105   display: none; } 
    106  
    107 button.mfp-close, 
    108 button.mfp-arrow { 
    109   overflow: visible; 
    110   cursor: pointer; 
    111   background: transparent; 
    112   border: 0; 
    113   -webkit-appearance: none; 
    114   display: block; 
    115   outline: none; 
    116   padding: 0; 
    117   z-index: 1046; 
    118   box-shadow: none; 
    119   touch-action: manipulation; } 
    120  
    121 button::-moz-focus-inner { 
    122   padding: 0; 
    123   border: 0; } 
    124  
     223  z-index: $mfp-z-index-base + 4; 
     224  a { 
     225    color: $mfp-controls-text-color; 
     226    &:hover { 
     227      color: $mfp-controls-text-color-hover; 
     228    } 
     229  } 
     230} 
     231 
     232// Hide preloader when content successfully loaded 
     233.mfp-s-ready { 
     234  .mfp-preloader { 
     235    display: none; 
     236  } 
     237} 
     238 
     239// Hide content when it was not loaded 
     240.mfp-s-error { 
     241  .mfp-content { 
     242    display: none; 
     243  } 
     244} 
     245 
     246// CSS-reset for buttons 
     247button { 
     248  &.mfp-close, 
     249  &.mfp-arrow { 
     250    overflow: visible; 
     251    cursor: pointer; 
     252    background: transparent; 
     253    border: 0; 
     254    -webkit-appearance: none; 
     255    display: block; 
     256    outline: none; 
     257    padding: 0; 
     258    z-index: $mfp-z-index-base + 6; 
     259    box-shadow: none; 
     260    touch-action: manipulation; 
     261  } 
     262  &::-moz-focus-inner { 
     263      padding: 0; 
     264      border: 0 
     265  } 
     266} 
     267 
     268 
     269// Close icon 
    125270.mfp-close { 
    126271  width: 44px; 
    127272  height: 44px; 
    128273  line-height: 44px; 
     274 
    129275  position: absolute; 
    130276  right: 0; 
    … …  
    132278  text-decoration: none; 
    133279  text-align: center; 
    134   opacity: 0.65; 
     280  opacity: $mfp-controls-opacity; 
    135281  padding: 0 0 18px 10px; 
    136   color: #FFF; 
     282  color: $mfp-controls-color; 
     283 
    137284  font-style: normal; 
    138285  font-size: 28px; 
    139   font-family: Arial, Baskerville, monospace; } 
    140   .mfp-close:hover, 
    141   .mfp-close:focus { 
    142     opacity: 1; } 
    143   .mfp-close:active { 
    144     top: 1px; } 
    145  
    146 .mfp-close-btn-in .mfp-close { 
    147   color: #333; } 
    148  
    149 .mfp-image-holder .mfp-close, 
    150 .mfp-iframe-holder .mfp-close { 
    151   color: #FFF; 
    152   right: -6px; 
    153   text-align: right; 
    154   padding-right: 6px; 
    155   width: 100%; } 
    156  
     286  font-family: Arial, Baskerville, monospace; 
     287 
     288  &:hover, 
     289  &:focus { 
     290    opacity: 1; 
     291  } 
     292 
     293  &:active { 
     294    top: 1px; 
     295  } 
     296} 
     297.mfp-close-btn-in { 
     298  .mfp-close { 
     299    color: $mfp-inner-close-icon-color; 
     300  } 
     301} 
     302.mfp-image-holder, 
     303.mfp-iframe-holder { 
     304  .mfp-close { 
     305    color: $mfp-controls-color; 
     306    right: -6px; 
     307    text-align: right; 
     308    padding-right: 6px; 
     309    width: 100%; 
     310  } 
     311} 
     312 
     313// "1 of X" counter 
    157314.mfp-counter { 
    158315  position: absolute; 
    159316  top: 0; 
    160317  right: 0; 
    161   color: #CCC; 
     318  color: $mfp-controls-text-color; 
    162319  font-size: 12px; 
    163320  line-height: 18px; 
    164   white-space: nowrap; } 
    165  
    166 .mfp-arrow { 
    167   position: absolute; 
    168   opacity: 0.65; 
    169   margin: 0; 
    170   top: 50%; 
    171   margin-top: -55px; 
    172   padding: 0; 
    173   width: 90px; 
    174   height: 110px; 
    175   -webkit-tap-highlight-color: transparent; } 
    176   .mfp-arrow:active { 
    177     margin-top: -54px; } 
    178   .mfp-arrow:hover, 
    179   .mfp-arrow:focus { 
    180     opacity: 1; } 
    181   .mfp-arrow:before, 
    182   .mfp-arrow:after { 
    183     content: ''; 
    184     display: block; 
    185     width: 0; 
     321  white-space: nowrap; 
     322} 
     323 
     324// Navigation arrows 
     325@if $mfp-include-arrows { 
     326  .mfp-arrow { 
     327    position: absolute; 
     328    opacity: $mfp-controls-opacity; 
     329    margin: 0; 
     330    top: 50%; 
     331    margin-top: -55px; 
     332    padding: 0; 
     333    width: 90px; 
     334    height: 110px; 
     335    -webkit-tap-highlight-color: rgba(0,0,0,0); 
     336    &:active { 
     337      margin-top: -54px; 
     338    } 
     339    &:hover, 
     340    &:focus { 
     341      opacity: 1; 
     342    } 
     343    &:before, 
     344    &:after { 
     345      content: ''; 
     346      display: block; 
     347      width: 0; 
     348      height: 0; 
     349      position: absolute; 
     350      left: 0; 
     351      top: 0; 
     352      margin-top: 35px; 
     353      margin-left: 35px; 
     354      border: medium inset transparent; 
     355    } 
     356 
     357    &:after { 
     358 
     359      border-top-width: 13px; 
     360      border-bottom-width: 13px; 
     361      top:8px; 
     362    } 
     363 
     364    &:before { 
     365      border-top-width: 21px; 
     366      border-bottom-width: 21px; 
     367      opacity: 0.7; 
     368    } 
     369 
     370  } 
     371 
     372  .mfp-arrow-left { 
     373    left: 0; 
     374    &:after { 
     375      border-right: 17px solid $mfp-controls-color; 
     376      margin-left: 31px; 
     377    } 
     378    &:before { 
     379      margin-left: 25px; 
     380      border-right: 27px solid $mfp-controls-border-color; 
     381    } 
     382  } 
     383 
     384  .mfp-arrow-right { 
     385    right: 0; 
     386    &:after { 
     387      border-left: 17px solid $mfp-controls-color; 
     388      margin-left: 39px 
     389    } 
     390    &:before { 
     391      border-left: 27px solid $mfp-controls-border-color; 
     392    } 
     393  } 
     394} 
     395 
     396 
     397 
     398// Iframe content type 
     399@if $mfp-include-iframe-type { 
     400  .mfp-iframe-holder { 
     401    padding-top: $mfp-iframe-padding-top; 
     402    padding-bottom: $mfp-iframe-padding-top; 
     403    .mfp-content { 
     404      line-height: 0; 
     405      width: 100%; 
     406      max-width: $mfp-iframe-max-width; 
     407    } 
     408    .mfp-close { 
     409      top: -40px; 
     410    } 
     411  } 
     412  .mfp-iframe-scaler { 
     413    width: 100%; 
    186414    height: 0; 
     415    overflow: hidden; 
     416    padding-top: $mfp-iframe-ratio * 100%; 
     417    iframe { 
     418      position: absolute; 
     419      display: block; 
     420      top: 0; 
     421      left: 0; 
     422      width: 100%; 
     423      height: 100%; 
     424      box-shadow: $mfp-shadow; 
     425      background: $mfp-iframe-background; 
     426    } 
     427  } 
     428} 
     429 
     430 
     431 
     432// Image content type 
     433@if $mfp-include-image-type { 
     434 
     435  /* Main image in popup */ 
     436  img { 
     437    &.mfp-img { 
     438      width: auto; 
     439      max-width: 100%; 
     440      height: auto; 
     441      display: block; 
     442      line-height: 0; 
     443      box-sizing: border-box; 
     444      padding: $mfp-image-padding-top 0 $mfp-image-padding-bottom; 
     445      margin: 0 auto; 
     446    } 
     447  } 
     448 
     449  /* The shadow behind the image */ 
     450  .mfp-figure { 
     451    line-height: 0; 
     452    &:after { 
     453      content: ''; 
     454      position: absolute; 
     455      left: 0; 
     456      top: $mfp-image-padding-top; 
     457      bottom: $mfp-image-padding-bottom; 
     458      display: block; 
     459      right: 0; 
     460      width: auto; 
     461      height: auto; 
     462      z-index: -1; 
     463      box-shadow: $mfp-shadow; 
     464      background: $mfp-image-background; 
     465    } 
     466    small { 
     467      color: $mfp-caption-subtitle-color; 
     468      display: block; 
     469      font-size: 12px; 
     470      line-height: 14px; 
     471    } 
     472    figure { 
     473      margin: 0; 
     474    } 
     475  } 
     476  .mfp-bottom-bar { 
     477    margin-top: -$mfp-image-padding-bottom + 4; 
    187478    position: absolute; 
    188     left: 0; 
    189     top: 0; 
    190     margin-top: 35px; 
    191     margin-left: 35px; 
    192     border: medium inset transparent; } 
    193   .mfp-arrow:after { 
    194     border-top-width: 13px; 
    195     border-bottom-width: 13px; 
    196     top: 8px; } 
    197   .mfp-arrow:before { 
    198     border-top-width: 21px; 
    199     border-bottom-width: 21px; 
    200     opacity: 0.7; } 
    201  
    202 .mfp-arrow-left { 
    203   left: 0; } 
    204   .mfp-arrow-left:after { 
    205     border-right: 17px solid #FFF; 
    206     margin-left: 31px; } 
    207   .mfp-arrow-left:before { 
    208     margin-left: 25px; 
    209     border-right: 27px solid #3F3F3F; } 
    210  
    211 .mfp-arrow-right { 
    212   right: 0; } 
    213   .mfp-arrow-right:after { 
    214     border-left: 17px solid #FFF; 
    215     margin-left: 39px; } 
    216   .mfp-arrow-right:before { 
    217     border-left: 27px solid #3F3F3F; } 
    218  
    219 .mfp-iframe-holder { 
    220   padding-top: 40px; 
    221   padding-bottom: 40px; } 
    222   .mfp-iframe-holder .mfp-content { 
    223     line-height: 0; 
    224     width: 100%; 
    225     max-width: 98% /* was 900px; */ } 
    226   .mfp-iframe-holder .mfp-close { 
    227     top: -40px; } 
    228  
    229 .mfp-iframe-scaler { 
    230   width: 100%; 
    231   height: 0; 
    232   overflow: hidden; 
    233   padding-top: 56.25%; } 
    234   .mfp-iframe-scaler iframe { 
    235     position: absolute; 
    236     display: block; 
    237     top: 0; 
     479    top: 100%; 
    238480    left: 0; 
    239481    width: 100%; 
    240     height: 100%; 
    241     box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); 
    242     background: #000; } 
    243  
    244 /* Main image in popup */ 
    245 img.mfp-img { 
    246   width: auto; 
    247   max-width: 100%; 
    248   height: auto; 
    249   display: block; 
    250   line-height: 0; 
    251   box-sizing: border-box; 
    252   padding: 40px 0 40px; 
    253   margin: 0 auto; } 
    254  
    255 /* The shadow behind the image */ 
    256 .mfp-figure { 
    257   line-height: 0; } 
    258   .mfp-figure:after { 
    259     content: ''; 
    260     position: absolute; 
    261     left: 0; 
    262     top: 40px; 
    263     bottom: 40px; 
    264     display: block; 
    265     right: 0; 
    266     width: auto; 
    267     height: auto; 
    268     z-index: -1; 
    269     box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); 
    270     background: #444; } 
    271   .mfp-figure small { 
    272     color: #BDBDBD; 
    273     display: block; 
    274     font-size: 12px; 
    275     line-height: 14px; } 
    276   .mfp-figure figure { 
    277     margin: 0; } 
    278  
    279 .mfp-bottom-bar { 
    280   margin-top: -36px; 
    281   position: absolute; 
    282   top: 100%; 
    283   left: 0; 
    284   width: 100%; 
    285   cursor: auto; } 
    286  
    287 .mfp-title { 
    288   text-align: left; 
    289   line-height: 18px; 
    290   color: #F3F3F3; 
    291   word-wrap: break-word; 
    292   padding-right: 36px; } 
    293  
    294 .mfp-image-holder .mfp-content { 
    295   max-width: 100%; } 
    296  
    297 .mfp-gallery .mfp-image-holder .mfp-figure { 
    298   cursor: pointer; } 
    299  
    300 @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { 
    301   /** 
     482    cursor: auto; 
     483  } 
     484  .mfp-title { 
     485    text-align: left; 
     486    line-height: 18px; 
     487    color: $mfp-caption-title-color; 
     488    word-wrap: break-word; 
     489    padding-right: 36px; // leave some space for counter at right side 
     490  } 
     491 
     492  .mfp-image-holder { 
     493    .mfp-content { 
     494      max-width: 100%; 
     495    } 
     496  } 
     497 
     498  .mfp-gallery { 
     499    .mfp-image-holder { 
     500      .mfp-figure { 
     501        cursor: pointer; 
     502      } 
     503    } 
     504  } 
     505 
     506 
     507  @if $mfp-include-mobile-layout-for-image { 
     508    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { 
     509      /** 
    302510       * Remove all paddings around the image on small screen 
    303511       */ 
    304   .mfp-img-mobile .mfp-image-holder { 
    305     padding-left: 0; 
    306     padding-right: 0; } 
    307   .mfp-img-mobile img.mfp-img { 
    308     padding: 0; } 
    309   .mfp-img-mobile .mfp-figure:after { 
    310     top: 0; 
    311     bottom: 0; } 
    312   .mfp-img-mobile .mfp-figure small { 
    313     display: inline; 
    314     margin-left: 5px; } 
    315   .mfp-img-mobile .mfp-bottom-bar { 
    316     background: rgba(0, 0, 0, 0.6); 
    317     bottom: 0; 
    318     margin: 0; 
    319     top: auto; 
    320     padding: 3px 5px; 
    321     position: fixed; 
    322     box-sizing: border-box; } 
    323     .mfp-img-mobile .mfp-bottom-bar:empty { 
    324       padding: 0; } 
    325   .mfp-img-mobile .mfp-counter { 
    326     right: 5px; 
    327     top: 3px; } 
    328   .mfp-img-mobile .mfp-close { 
    329     top: 0; 
    330     right: 0; 
    331     width: 35px; 
    332     height: 35px; 
    333     line-height: 35px; 
    334     background: rgba(0, 0, 0, 0.6); 
    335     position: fixed; 
    336     text-align: center; 
    337     padding: 0; } } 
    338  
     512      .mfp-img-mobile { 
     513        .mfp-image-holder { 
     514          padding-left: 0; 
     515          padding-right: 0; 
     516        } 
     517        img { 
     518          &.mfp-img { 
     519            padding: 0; 
     520          } 
     521        } 
     522        .mfp-figure { 
     523          // The shadow behind the image 
     524          &:after { 
     525            top: 0; 
     526            bottom: 0; 
     527          } 
     528          small { 
     529            display: inline; 
     530            margin-left: 5px; 
     531          } 
     532        } 
     533        .mfp-bottom-bar { 
     534          background: rgba(0,0,0,0.6); 
     535          bottom: 0; 
     536          margin: 0; 
     537          top: auto; 
     538          padding: 3px 5px; 
     539          position: fixed; 
     540          box-sizing: border-box; 
     541          &:empty { 
     542            padding: 0; 
     543          } 
     544        } 
     545        .mfp-counter { 
     546          right: 5px; 
     547          top: 3px; 
     548        } 
     549        .mfp-close { 
     550          top: 0; 
     551          right: 0; 
     552          width: 35px; 
     553          height: 35px; 
     554          line-height: 35px; 
     555          background: rgba(0, 0, 0, 0.6); 
     556          position: fixed; 
     557          text-align: center; 
     558          padding: 0; 
     559        } 
     560      } 
     561    } 
     562  } 
     563} 
     564 
     565 
     566 
     567// Scale navigation arrows and reduce padding from sides 
    339568@media all and (max-width: 900px) { 
    340569  .mfp-arrow { 
    341570    -webkit-transform: scale(0.75); 
    342     transform: scale(0.75); } 
     571    transform: scale(0.75); 
     572  } 
    343573  .mfp-arrow-left { 
    344574    -webkit-transform-origin: 0; 
    345     transform-origin: 0; } 
     575    transform-origin: 0; 
     576  } 
    346577  .mfp-arrow-right { 
    347578    -webkit-transform-origin: 100%; 
    348     transform-origin: 100%; } 
     579    transform-origin: 100%; 
     580  } 
    349581  .mfp-container { 
    350     padding-left: 6px; 
    351     padding-right: 6px; } } 
     582    padding-left: $mfp-popup-padding-left-mobile; 
     583    padding-right: $mfp-popup-padding-left-mobile; 
     584  } 
     585} 
Note: See TracChangeset for help on using the changeset viewer.

Sites map