github.com/mssola/todo@v0.0.0-20181029153210-d25348dc3f48/public/stylesheets/topics_show.scss (about)

     1  
     2  @import "include/base";
     3  
     4  $width: 130px;
     5  
     6  #list {
     7      float: left;
     8      position: absolute;
     9      top: 0px;
    10      left: 0;
    11      bottom: 0;
    12      width: $width;
    13      overflow-x: hidden;
    14      overflow-y: auto;
    15      background-color: #f7f7f7;
    16      font-size: small;
    17  
    18      .create form {
    19          display: none;
    20      }
    21  
    22      h3 {
    23        font-size: small;
    24        font-weight: bold;
    25        color: #777;
    26        text-align: right;
    27        padding: 4px;
    28      }
    29  
    30      ul {
    31          list-style: none;
    32          margin: 0;
    33          padding: 0;
    34  
    35          li {
    36              margin-left: 12px;
    37              text-align: left;
    38              margin-bottom: 3px;
    39              background: #fff;
    40              border: 1px solid #ccc;
    41              border-bottom-width: 2px;
    42              border-right: none;
    43              border-top-left-radius: 5px;
    44              border-bottom-left-radius: 5px;
    45  
    46              -webkit-transition: all 0.15s ease 0s;
    47              -moz-transition: all 0.15s ease 0s;
    48              -o-transition: all 0.15s ease 0s;
    49              -ms-transition: all 0.15s ease 0s;
    50              transition: all 0.15s ease 0s;
    51  
    52              a {
    53                  text-decoration: none;
    54                  color: #369;
    55                  font-size: 12px;
    56                  padding: .8em 5px;
    57                  padding-left: 10px;
    58                  display: block;
    59                  position: relative;
    60                  overflow: hidden;
    61                  text-overflow: ellipsis;
    62                  margin-right: 5px;
    63              }
    64  
    65              &:hover { margin-left: 9px; }
    66          }
    67  
    68          .selected {
    69              position: relative;
    70              background: #e9f2fc;
    71              border-color: #b3cce6;
    72              margin-right: -8px;
    73              padding-right: 8px;
    74              box-shadow: -30px 0 30px -15px rgba(255,255,255,0.5) inset,0 2px 6px -1px rgba(0,0,0,0.2);
    75              z-index: 35;
    76              font-weight: bold;
    77  
    78              &:before {
    79                  position: absolute;
    80                  top: 50%;
    81                  right: 5px;
    82                  margin-top: -5px;
    83                  display: block;
    84                  content: '';
    85                  border: 5px solid transparent;
    86                  border-style: solid solid outset;
    87                  border-left-color: #79a6d2;
    88              }
    89          }
    90  
    91          .create, .logout { padding: 5px; }
    92          .logout { margin-top: 20px; }
    93      }
    94  }
    95  
    96  #contents {
    97      display: inline;
    98      position: absolute;
    99      top: 0px;
   100      bottom: 0;
   101      padding: 10px 30px;
   102      overflow: auto;
   103  
   104      background-color: #fff;
   105  
   106      .header {
   107          h2 {
   108              font-size: 16px;
   109              display: inline;
   110          }
   111  
   112          ul {
   113              display: inline;
   114              list-style: none;
   115              margin: 0;
   116              margin-left: 5px;
   117              padding: 0;
   118  
   119              li {
   120                  margin-left: 5px;
   121                  display: inline;
   122  
   123                  span {
   124                      color: red;
   125                      font-size: small;
   126                  }
   127  
   128                  a {
   129                      font-size: small;
   130                      color: #888;
   131                      font-weight: bold;
   132                      padding: 0 1px;
   133  
   134                      &:hover { text-decoration: underline; }
   135                  }
   136              }
   137  
   138              .confirmation { display: none; }
   139          }
   140      }
   141  
   142      .body {
   143          margin-top: 15px;
   144  
   145          .contents-edit {
   146              display: none;
   147  
   148              textarea {
   149                  width: 800px;
   150                  height: 600px;
   151                  resize: none;
   152              }
   153          }
   154      }
   155  }
   156  
   157  #contents.noprint {
   158      left: $width;
   159  
   160      width: calc(100% - 130px - 1px - 60px);
   161      width: -moz-calc(100% - 130px - 1px - 60px);
   162      width: -webkit-calc(100% - 130px - 1px - 60px);
   163      border-left: 1px solid #ddd;
   164      box-shadow: 0 0 6px rgba(0,0,0,0.2);
   165  }
   166  
   167  #contents.print {
   168      left: 0;
   169      width: calc(100% - 1px - 60px);
   170      width: -moz-calc(100% - 1px - 60px);
   171      width: -webkit-calc(100% - 1px - 60px);
   172      position: inherit;
   173  }
   174  
   175  #rename-form {
   176      display: none;
   177  }
   178  
   179  #license-link {
   180    margin-top: 10px;
   181    text-align: center;
   182    display: block;
   183    margin: 0 auto;
   184  }
   185  
   186  @import "include/markdown";
   187