API tools faq
paste
Advertisement
nkarmi

Untitled

nkarmi
Jul 16th, 2018
237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.77 KB | None | 0 0
raw download clone embed print report
  1. .right-side {
  2.         width: 100%;
  3.         background-color: $color-white;
  4.  
  5.         .light-bulb {
  6.             img {
  7.                 width: 22px;
  8.                 height: 29px;
  9.                 object-fit: contain;
  10.             }
  11.         }
  12.  
  13.         .section-container {
  14.             margin-bottom: 10px;
  15.         }
  16.  
  17.         .section-first-column {
  18.             flex-basis: $var-panel-first-column-size;
  19.         }
  20.  
  21.         .section-other-columns {
  22.             flex-basis: $var-panel-second-column-size;
  23.             opacity: 0.7;
  24.             font-size: 13px;
  25.             font-weight: normal;
  26.             font-style: normal;
  27.             font-stretch: normal;
  28.             letter-spacing: normal;
  29.             text-align: center;
  30.             color: $color-menu-gray;
  31.  
  32.             .fa-caret-left,
  33.             .fa-caret-right {
  34.                 cursor: pointer;
  35.             }
  36.         }
  37.  
  38.         .graph-notification-section {
  39.             margin-bottom: 15px;
  40.         }
  41.  
  42.         .section-selected-column {
  43.             flex-basis: $var-panel-second-column-size;
  44.             opacity: 0.7;
  45.             font-size: 13px;
  46.             font-weight: 900;
  47.             font-style: normal;
  48.             font-stretch: normal;
  49.             letter-spacing: normal;
  50.             text-align: center;
  51.             color: $color-light-green;
  52.         }
  53.  
  54.         .panel-first-column {
  55.             flex-basis: $var-panel-first-column-size;
  56.             @extend %panel-rows-height;
  57.             text-align: left;
  58.         }
  59.  
  60.         .panel-second-column {
  61.             flex-basis: $var-panel-second-column-size;
  62.             border-left: 1px solid $color-review-panel-border;
  63.             border-right: 1px solid $color-review-panel-border;
  64.             @extend %panel-rows-height;
  65.         }
  66.  
  67.         .panel-third-column {
  68.             flex-basis: $var-panel-second-column-size;
  69.             border-right: 1px solid $color-review-panel-border;
  70.             @extend %panel-rows-height;
  71.         }
  72.  
  73.         .panel-fourth-column {
  74.             flex-basis: $var-panel-second-column-size;
  75.             border-right: 1px solid $color-review-panel-border;
  76.             @extend %panel-rows-height;
  77.         }
  78.  
  79.         .panel-fifth-column {
  80.             flex-basis: $var-panel-second-column-size;
  81.             border-right: 1px solid $color-review-panel-border;
  82.             @extend %panel-rows-height;
  83.         }
  84.  
  85.         .panel-sixth-column {
  86.             flex-basis: $var-panel-second-column-size;
  87.             @extend %panel-rows-height;
  88.         }
  89.  
  90.         .sections-container {
  91.             margin-top: 50px;
  92.             margin-left: 30px;
  93.         }
  94.  
  95.         .review-detail-screen-header {
  96.             background-color: $color-review-header-panel;
  97.             border: solid 1px $color-review-header-panel-border;
  98.             padding-top: 20px;
  99.  
  100.             .protocol-icon {
  101.                 display: flex;
  102.                 align-items: flex-end;
  103.  
  104.                 img {
  105.                     width: 90px;
  106.                     object-fit: contain;
  107.                 }
  108.             }
  109.  
  110.             .protocol-info-container {
  111.                 padding-left: 15px;
  112.  
  113.                 .protocol-code {
  114.                     font-size: 15px;
  115.                     font-weight: normal;
  116.                     font-style: normal;
  117.                     font-stretch: normal;
  118.                     line-height: 1.47;
  119.                     letter-spacing: normal;
  120.                     color: $color-menu-gray;
  121.                 }
  122.  
  123.                 .category-name {
  124.                     font-size: 28px;
  125.                     font-weight: 500;
  126.                     font-style: normal;
  127.                     font-stretch: normal;
  128.                     line-height: 1.14;
  129.                     letter-spacing: normal;
  130.                     color: $color-review-category-name;
  131.                 }
  132.             }
  133.         }
  134.  
  135.         .section-title {
  136.             font-size: 17px;
  137.             font-weight: bold;
  138.             font-style: normal;
  139.             font-stretch: normal;
  140.             line-height: normal;
  141.             letter-spacing: normal;
  142.             color: $color-light-green;
  143.         }
  144.  
  145.         .panel-section {
  146.             .sub-section-title {
  147.                 color: $color-light-green;
  148.             }
  149.  
  150.             .panel-body {
  151.                 padding: 0;
  152.             }
  153.         }
  154.  
  155.         .panel-review {
  156.             .panel-heading {
  157.                 box-shadow: 0 1px 4px 0 $color-review-panel-shadow-border;
  158.                 background-color: $color-review-panel-background;
  159.                 border: solid 1px $color-review-panel-border;
  160.                 padding: 0;
  161.  
  162.                 .accordion-toggle {
  163.                     & > span {
  164.                         display: flex;
  165.                     }
  166.                 }
  167.             }
  168.         }
  169.  
  170.         .panel-insight {
  171.             @extend .panel-review;
  172.  
  173.             &.panel-open {
  174.                 .accordion-toggle {
  175.                     background-color: $color-ice-blue;
  176.                 }
  177.             }
  178.  
  179.             .panel-body {
  180.                 border-left: solid 7px $color-light-green;
  181.             }
  182.         }
  183.  
  184.         .insight-data-input {
  185.  
  186.             .textarea-container {
  187.                 position: relative;
  188.                 margin-left: 87px;
  189.             }
  190.  
  191.             .textarea-container:before {
  192.                 content: " ";
  193.                 background-image: url(/images/icons/pen.svg);
  194.                 background-repeat: no-repeat;
  195.                 width: 22px;
  196.                 height: 21px;
  197.                 left: -26px;
  198.                 position: absolute;
  199.             }
  200.  
  201.             textarea {
  202.                 margin: 0px 0px 10px;
  203.                 width: 386px;
  204.                 height: 118px;
  205.                 background-color: #f4f7fa;
  206.             }
  207.  
  208.             a.btn {
  209.                 margin-left: 60px;
  210.                 width: 90px;
  211.                 height: 36px;
  212.                 opacity: 0.5;
  213.                 border-radius: 20px;
  214.                 border: solid 2px $color-add-insight-btn-border;
  215.             }
  216.         }
  217.  
  218.         .asset-row {
  219.             background-color: $color-ice-blue;
  220.             border: solid 1px $color-review-panel-border;
  221.             padding-left: 45px;
  222.         }
  223.  
  224.         .insight-container {
  225.             padding-top: 30px;
  226.             padding-bottom: 20px;
  227.             background-color: $color-review-panel-background;
  228.  
  229.             .show-insight-container {
  230.                 margin-left: auto;
  231.                 width: 40%;
  232.                 height: 130px;
  233.  
  234.                 .insight-info {
  235.                     margin-right: 30px;
  236.                     border: 1px solid $color-show-insight-border-color;
  237.                     width: 350px;
  238.                     height: 130px;
  239.                     background-color: $color-white;
  240.                 }
  241.  
  242.                 .insight-title {
  243.                     display: flex;
  244.                     border-bottom: 1px solid $color-pale-grey;
  245.                     margin-left: 15px;
  246.                     margin-right: 15px;
  247.                     padding-top: 7px;
  248.                     padding-bottom: 3px;
  249.                 }
  250.  
  251.                 .insight-body {
  252.                     margin: 0 15px 0 15px;
  253.                     padding-top: 10px;
  254.                 }
  255.  
  256.                 .created-by {
  257.                     font-size: 14px;
  258.                     font-weight: 500;
  259.                     font-style: normal;
  260.                     font-stretch: normal;
  261.                     line-height: normal;
  262.                     letter-spacing: normal;
  263.                     color: $color-charcoal-grey;
  264.                 }
  265.  
  266.                 .insight-created-date {
  267.                     margin-left: auto;
  268.                     font-size: 12px;
  269.                     font-weight: normal;
  270.                     font-style: normal;
  271.                     font-stretch: normal;
  272.                     line-height: normal;
  273.                     letter-spacing: normal;
  274.                     color: $color-charcoal-grey;
  275.                 }
  276.             }
  277.         }
  278.  
  279.         .bar-graph-container {
  280.             flex-basis: 75%;
  281.         }
  282.  
  283.         .notification-container {
  284.             padding: 13px;
  285.             background-color: rgba(255, 205, 0, 0.3);
  286.             border: solid 1px #ffcd00;
  287.             width: 220px;
  288.             height: 130px;
  289.             background-image: url(/images/notification-bg.svg);
  290.             background-repeat: no-repeat;
  291.             background-position-y: 100%;
  292.             background-position-x: 100%;
  293.  
  294.             .notification-title {
  295.                 font-size: 15px;
  296.                 font-weight: 700;
  297.                 font-style: normal;
  298.                 font-stretch: normal;
  299.                 line-height: 1.33;
  300.                 letter-spacing: normal;
  301.                 color: $color-menu-gray;
  302.             }
  303.  
  304.             .notification-body {
  305.                 font-size: 14px;
  306.                 font-weight: normal;
  307.                 font-style: normal;
  308.                 font-stretch: normal;
  309.                 line-height: 1.43;
  310.                 letter-spacing: normal;
  311.                 color: $color-charcoal-grey;
  312.             }
  313.         }
  314.  
  315.         .trend-container {
  316.             width: 220px;
  317.             background-color: $color-review-panel-background;
  318.             border: solid 1px $color-pale-grey-two;
  319.             margin-top: 15px;
  320.             padding: 11px;
  321.  
  322.             .trend-title {
  323.                 font-size: 15px;
  324.                 font-weight: 700;
  325.                 font-style: normal;
  326.                 font-stretch: normal;
  327.                 line-height: 1.33;
  328.                 letter-spacing: normal;
  329.                 color: $color-menu-gray;
  330.                 width: 150px;
  331.             }
  332.  
  333.             .trend-icon.up {
  334.                 transform: rotateX(180deg);
  335.             }
  336.  
  337.             .trend-value {
  338.                 text-align: right;
  339.                 font-size: 40px;
  340.                 font-weight: normal;
  341.                 font-style: normal;
  342.                 font-stretch: normal;
  343.                 line-height: normal;
  344.                 letter-spacing: normal;
  345.                 color: $color-bluish-green;
  346.             }
  347.  
  348.             .trend-unit {
  349.                 font-size: 15px;
  350.                 font-weight: 500;
  351.                 font-style: normal;
  352.                 font-stretch: normal;
  353.                 line-height: 1.33;
  354.                 letter-spacing: normal;
  355.                 color: $color-add-insight-btn-border;
  356.                 text-align: right;
  357.                 text-transform: uppercase;
  358.             }
  359.         }
  360.  
  361.         .multi-year-trend-container {
  362.             background-color: $color-review-panel-background;
  363.             border: solid 1px $color-pale-grey-two;
  364.             margin-top: 15px;
  365.             padding: 11px;
  366.  
  367.             .multi-year-trend-title {
  368.                 width: 95px;
  369.                 height: 40px;
  370.                 font-family: Roboto;
  371.                 font-size: 15px;
  372.                 font-weight: 700;
  373.                 font-style: normal;
  374.                 font-stretch: normal;
  375.                 line-height: 1.33;
  376.                 letter-spacing: normal;
  377.                 color: $color-menu-gray;
  378.             }
  379.  
  380.             .multi-year-trend-indicator-img {
  381.                 width: 60px;
  382.                 height: 45px;
  383.                 object-fit: contain;
  384.  
  385.                 &.up {
  386.                     transform: rotateX(180deg);
  387.                 }
  388.             }
  389.  
  390.             .multi-year-trend-indicator-text {
  391.                 font-size: 20px;
  392.                 font-weight: 500;
  393.                 font-style: normal;
  394.                 font-stretch: normal;
  395.                 line-height: 1.6;
  396.                 letter-spacing: normal;
  397.                 color: $color-bluish-green;
  398.                 text-align: right;
  399.                 text-transform: uppercase;
  400.             }
  401.         }
  402.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!