github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/ShareSnapshotModal.scss (about)

     1  @import "constants";
     2  @import "ReactModal";
     3  
     4  .ReactModal__Content.ShareSnapshotModal {
     5    width: 800px;
     6  }
     7  .ShareSnapshotModal-title {
     8    margin: 0;
     9    font-family: $font-sans-serif;
    10    font-size: $font-size-small;
    11    text-transform: uppercase;
    12    background-color: $color-gray-50;
    13    color: $color-white;
    14    padding-top: calc($spacing-unit / 2);
    15    padding-bottom: calc($spacing-unit / 2);
    16    padding-left: $spacing-unit;
    17    padding-right: $spacing-unit;
    18  }
    19  .ShareSnapshotModal-description {
    20    font-family: $font-sans-serif;
    21    line-height: 1.75;
    22    margin-top: $spacing-unit * 1.5;
    23    margin-left: $spacing-unit * 3;
    24    // Get the line break where I want it:
    25    margin-right: $spacing-unit * 4;
    26  }
    27  
    28  // Learn about Snapshots
    29  .ShareSnapshotModal-intro {
    30    display: flex;
    31    margin-top: $spacing-unit * 1.5;
    32    margin-left: $spacing-unit * 2;
    33    margin-right: $spacing-unit * 2;
    34  }
    35  .ShareSnapshotModal-introImage {
    36    width: 200px;
    37  }
    38  .ShareSnapshotModal-details {
    39   margin-left: $spacing-unit * 1.5;
    40  }
    41  .ShareSnapshotModal-detailsList {
    42    list-style: none;
    43    position: relative; // Anchor the list bullets
    44  }
    45  .ShareSnapshotModal-detailsList > li {
    46    margin-bottom: calc($spacing-unit / 3);
    47  }
    48  .ShareSnapshotModal-detailsList > li::before {
    49    content: "";
    50    width: $spacing-unit;
    51    height: $spacing-unit;
    52    position: absolute;
    53    left: -$spacing-unit;
    54    background-image:url('data:image/svg+xml;utf8,<svg fill="none" height="8" viewBox="0 0 6 8" width="6" xmlns="http://www.w3.org/2000/svg"><path d="m6 4-5.25 3.4641v-6.928202z" fill="%23c4c4c4"/></svg>');
    55    background-repeat: no-repeat;
    56    background-position: center;
    57  }
    58  .ShareSnapshotModal-docsLink {
    59    display: inline-block;
    60    text-decoration: none;
    61    background-color: $color-off-white;
    62    margin-top: calc($spacing-unit / 4);
    63    padding-left: calc($spacing-unit / 2);
    64    padding-right: calc($spacing-unit / 2);
    65    line-height: 1.75;
    66  }
    67  .ShareSnapshotModal-docsLink:hover {
    68    text-decoration: underline;
    69  }
    70  .ShareSnapshotModal-getStarted {
    71    display: flex;
    72    justify-content: flex-end;
    73    align-items: center;
    74    border-top: 1px dotted $color-gray-lightest;
    75    padding-left: calc($spacing-unit / 2);
    76    padding-right: calc($spacing-unit / 2);
    77    // This visually centers the button, whose shadow throws things off a bit:
    78    padding-top: $spacing-unit * 0.6;
    79    padding-bottom: $spacing-unit * 0.8;
    80  }
    81  
    82  
    83  // Create a Snapshot Link
    84  .ShareSnapshotModal-shareLinkWrap {
    85    background-color: $color-off-white;
    86    margin-top: $spacing-unit;
    87    padding-top: $spacing-unit * 1.5;
    88    padding-bottom: $spacing-unit * 0.8;
    89    padding-left: $spacing-unit * 2;
    90    padding-right: $spacing-unit * 2;
    91  }
    92  .ShareSnapshotModal-shareLink {
    93    display: flex;
    94  }
    95  .ShareSnapshotModal-shareLink-urlBox {
    96    background-color: $color-white;
    97    border: 1px solid $color-gray-lightest;
    98    padding-top: calc($spacing-unit / 6);
    99    padding-bottom: calc($spacing-unit / 6);
   100    padding-left: calc($spacing-unit / 3);
   101    padding-right: calc($spacing-unit / 3);
   102    box-sizing: border-box;
   103    display: inline-block;
   104    flex-grow: 1;
   105    overflow: hidden;
   106    text-overflow: ellipsis;
   107  }
   108  .ShareSnapshotModal-shareLink-url {
   109    user-select: all;
   110    overflow: hidden;
   111    white-space: nowrap;
   112    text-overflow: ellipsis;
   113  }
   114  .ShareSnapshotModal-shareLink-placeholder {
   115    color: $color-gray-lightest;
   116  }
   117  .ShareSnapshotModal-shareLinkInfo {
   118    display: flex;
   119    justify-content: space-between;
   120    margin-top: $spacing-unit * 0.3;
   121  }
   122  
   123  // Tilt Cloud Info
   124  .ShareSnapshotModal-manageSnapshots {
   125    font-family: $font-sans-serif;
   126    font-size: $font-size-small;
   127    margin-top: $spacing-unit;
   128    margin-bottom: $spacing-unit;
   129    margin-left: $spacing-unit * 3;
   130    margin-right: $spacing-unit * 3;
   131  }
   132  
   133  // Button Styles
   134  .ShareSnapshotModal-button {
   135    cursor: pointer;
   136    font-family: $font-sans-serif;
   137    text-transform: uppercase;
   138    color: $color-white;
   139    border: 0;
   140    padding-top: calc($spacing-unit / 3);
   141    padding-bottom: calc($spacing-unit / 3);
   142    padding-left: calc($spacing-unit / 2);
   143    padding-right: calc($spacing-unit / 2);
   144    text-decoration: none;
   145    transition: color 300ms;
   146    display: flex;
   147    justify-content: center;
   148    align-items: center;
   149  }
   150  .ShareSnapshotModal-button--inline {
   151    font-size: $font-size-smallest;
   152    background-color: $color-gray-20;
   153    min-width: 95px; // Don't let button text wrap
   154    box-sizing: border-box;
   155  }
   156  .ShareSnapshotModal-button--inline:hover {
   157    color: $color-blue;
   158  }
   159  .ShareSnapshotModal-button--cta {
   160    font-size: $font-size-small;
   161    background-color: $color-blue;
   162    box-shadow: -5px 5px 0 0 $color-gray-30;
   163    margin-left: $spacing-unit;
   164    transition-property: box-shadow;
   165    transition-duration: 0.3s;
   166    transition-timing-function: linear;
   167  }
   168  .ShareSnapshotModal-button--cta:hover {
   169    box-shadow: -3px 3px 0 0 $color-gray-30;
   170  }
   171  .ShareSnapshotModal-button--cta:active {
   172    box-shadow: -1px 1px 0 0 $color-gray-30;
   173  }