1 @import 'bootstrap/scss/functions';

     2 @import 'bootstrap/scss/variables';

     3 

     4 .App {

     5   text-align: center;

     6 }

     7 

     8 .App-logo {

     9   animation: App-logo-spin infinite 20s linear;

    10   height: 80px;

    11 }

    12 

    13 .App-header {

    14   background-color: #222;

    15   height: 150px;

    16   padding: 20px;

    17   color: white;

    18 }

    19 

    20 .App-intro {

    21   font-size: large;

    22 }

    23 

    24 .toolbar-menu {

    25   padding-bottom: 10px;

    26   border-bottom: 2px solid #eee;

    27   margin-bottom: 20px;

    28   display: flex;

    29   align-items: center;

    30   .button {

    31     color: #ccc;

    32     cursor: pointer;

    33     margin-right: 10px;

    34   }

    35   .button[data-active="true"] {

    36     color: black;

    37   }

    38   > *:last-child {

    39     margin-left: auto;

    40     .checkbox {

    41         display: inline-block;

    42         margin-right: 10px;

    43     }

    44   }

    45 }

    46 

    47 .navbar {

    48     .material-icons {

    49         font-size: 20px;

    50         line-height: 20px;

    51     }

    52 }

    53 

    54 .hovering-menu {

    55     position: absolute;

    56     z-index: 1;

    57     top: -10000px;

    58     left: -10000px;

    59     margin-top: -20px;

    60     opacity: 0;

    61     transition: opacity .75s;

    62 }

    63 

    64 .categories-tooltip {

    65     background-color: #efefef;

    66     border-radius: 4px;

    67     border: 1px solid #ccc;

    68     padding: 5px;

    69     .buttons {

    70         display: flex;

    71         flex-wrap: wrap;

    72         justify-content: space-between;

    73         button {

    74             background-color: yellow;

    75             border: 1px solid #ccc;

    76         }

    77         button:not(:last-child) {

    78             margin-right: 10px;

    79         }

    80     }

    81     .form-group:last-child {

    82         margin-bottom: 0;

    83     }

    84 }

    85 

    86 .editor {

    87   display: flex;

    88   margin-bottom: 10px;

    89   &-left {

    90     width: 66.6666%;

    91     border: 1px solid #efefef;

    92     padding: 20px;

    93   }

    94   &-right {

    95     width: 33.3333%;

    96     padding-left: 20px;

    97     .form-control {

    98       height: 100%;

    99     }

   100   }

   101 }

   102 

   103 .session-container {

   104     position: absolute;

   105     top: 71px;

   106     bottom: 0;

   107     left: 0;

   108     right: 0;

   109     display: flex;

   110     flex-direction: column;

   111     justify-content: flex-end;

   112     .session-notes {

   113         overflow-y: hidden;

   114         width: 100%;

   115         display: flex;

   116         flex: 1;

   117         > * {

   118             padding-left: ($grid-gutter-width / 2);

   119             padding-right: ($grid-gutter-width / 2);

   120         }

   121         .notes-affix {

   122             min-width: 25%;

   123             > *:first-child {

   124                 max-height: calc(100% - 20px);

   125                 overflow-y: auto;

   126             }

   127         }

   128         .notes-list {

   129             min-width: 75%;

   130             overflow-y: auto;

   131         }

   132     }

   133 }

   134 

   135 @keyframes App-logo-spin {

   136   from { transform: rotate(0deg); }

   137   to { transform: rotate(360deg); }

   138 }

   139 

   140 .note {

   141     display: flex;

   142     position: relative;

   143     padding: 20px 10px 20px 80px;

   144     margin-bottom: 10px;

   145     cursor: pointer;

   146     // min-height: ($line-height-computed * 4);

   147     border: 1px solid transparent;

   148 

   149     &:before {

   150         content: "";

   151         position: absolute;

   152         top: 0;

   153         bottom: 0;

   154         left: 37px;

   155         z-index: -1;

   156         display: block;

   157         width: 2px;

   158         background-color: #e6ebf1;

   159     }

   160 

   161     &:hover {

   162         border: 1px solid #efefef;

   163     }

   164 

   165     .start, .finish {

   166         position: absolute;

   167         background-color: #fff;

   168     }

   169 

   170     .start {

   171         top: 0;

   172         left: 0;

   173         padding: 20px 0 0 10px;

   174     }

   175     .finish {

   176         bottom: 0;

   177         left: 0;

   178         padding: 0 0 10px 10px;

   179     }

   180 

   181     &-content {

   182         width: 66.6666%;

   183     }

   184 

   185     &-margin-comment {

   186         width: 33.3333%;

   187         padding-left: 15px;

   188     }

   189 }

   190