API tools faq
paste
Amirul93

global-style.css

Amirul93
Oct 21st, 2018
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.78 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. :root {
  3.   --color-accent: #ff671b;
  4.   --color-text: #111;
  5.   --color-text-title: #637381;
  6.   --color-icon: #637381;
  7.   --color-header-background: #1c2260;
  8.   --color-logo-background: #00084b;
  9.   --color-sidebar-background: #fff;
  10.   --color-main-background: #F1F1F1;
  11.   --color-border: #dfe3e8;
  12.   --header-height: 5.8rem;
  13.   --sidebar-width: 24rem;
  14.   --dropdown-width: 44rem;
  15.   --spacing-navigation-px: 3.5rem;
  16.   --spacing-navigation-py: 1rem;
  17.   --spacing-navigation-div: 1.5rem; }
  18.  
  19.  html,
  20. body {
  21.   height: 100%; }
  22.  
  23. html {
  24.   font-size: 62.5%; }
  25.  
  26. body {
  27.   font-family: "Open Sans", sans-serif !important;
  28.   font-size: 1.45rem !important;
  29.   overflow-x: hidden;
  30.   -webkit-font-smoothing: antialiased !important;
  31.   -moz-osx-font-smoothing: grayscale !important; }
  32.  
  33. button {
  34.   background: none;
  35.   border: none;
  36.   cursor: pointer !important; }
  37.   button:focus {
  38.     outline: 0 !important;
  39.     box-shadow: none !important; }
  40.   button:active {
  41.     background-color: transparent !important; }
  42.  
  43. .page-container {
  44.   position: relative;
  45.   min-height: 100vh;
  46.   padding-left: var(--sidebar-width); }
  47.  
  48. .main {
  49.   position: relative;
  50.   margin-top: calc(var(--header-height));
  51.   background-color: var(--color-main-background);
  52.   height: calc(100vh - var(--header-height)); }
  53.  
  54. .main-container {
  55.   padding-left: 3.5rem !important; }
  56.   .main-container .page-header .page-subtitle {
  57.     letter-spacing: 0.125rem;
  58.     color: #818ea3;
  59.     font-size: 1.1rem; }
  60.   .main-container .page-header .page-title {
  61.     font-size: 2.3rem;
  62.     font-weight: 500;
  63.     line-height: 1;
  64.     margin: 0;
  65.     padding: 0; }
  66.  
  67. .header {
  68.   position: fixed !important;
  69.   top: 0;
  70.   height: var(--header-height);
  71.   width: calc(100vw - var(--sidebar-width));
  72.   background-color: var(--color-header-background);
  73.   z-index: 9090;
  74.   align-content: space-between; }
  75.   .header.navbar {
  76.     padding: 0;
  77.     padding-right: 2rem; }
  78.   .header .nav-left {
  79.     list-style: none;
  80.     display: flex;
  81.     flex: 1 1 auto;
  82.     height: 100%;
  83.     margin: 0;
  84.     padding: 0;
  85.     align-items: center; }
  86.   .header .nav-right {
  87.     list-style: none;
  88.     display: flex;
  89.     height: 100%;
  90.     margin: 0;
  91.     padding: 0;
  92.     border-left: 1px solid #101438; }
  93.   .header .search__box {
  94.     display: flex;
  95.     height: 3.4rem;
  96.     width: 100%;
  97.     margin: 0 3.1rem;
  98.     align-items: center; }
  99.     .header .search__box .search__input {
  100.       height: 100%;
  101.       background-color: #43467f;
  102.       backface-visibility: hidden;
  103.       border-radius: 3px;
  104.       position: relative;
  105.       width: 100%; }
  106.       .header .search__box .search__input .form-control {
  107.         height: 100%;
  108.         color: #fff !important;
  109.         font-size: 1.4rem;
  110.         background-color: transparent;
  111.         border-radius: 3px;
  112.         border: none;
  113.         will-change: background-color, color;
  114.         transition: background-color 0.2s cubic-bezier(0.64, 0, 0.35, 1), color 0.2s cubic-bezier(0.64, 0, 0.35, 1); }
  115.         .header .search__box .search__input .form-control::placeholder {
  116.           color: #fff; }
  117.         .header .search__box .search__input .form-control:focus,
  118.         .header .search__box .search__input .form-control:focus + .header .search__box .search__input .form-control::placeholder {
  119.           color: #000 !important;
  120.           box-shadow: none;
  121.           background-color: #fff; }
  122.  
  123. .alert {
  124.   display: flex;
  125.   color: #fff !important;
  126.   font-weight: 600;
  127.   background-color: #674eec !important;
  128.   margin: 0 !important;
  129.   padding: 1rem 3.4rem !important;
  130.   width: calc(100vw - var(--sidebar-width));
  131.   border: none !important;
  132.   border-radius: 0% !important;
  133.   align-items: center;
  134.   font-size: 1.3rem; }
  135.   .alert .icon {
  136.     padding-right: 1rem; }
  137.   .alert button {
  138.     height: 100%;
  139.     transition: all 0.1s cubic-bezier(0.27, 0.01, 0.38, 1.06);
  140.     font-size: 2rem !important;
  141.     padding-right: 3rem !important; }
  142.     .alert button:hover {
  143.       color: #fff !important; }
  144.  
  145. .notification-dropdown {
  146.   display: flex;
  147.   height: 100%;
  148.   border-right: 1px solid #101438; }
  149.   .notification-dropdown .dropdown > button {
  150.     display: flex;
  151.     align-items: center;
  152.     height: 100%;
  153.     padding: 0 1.5rem;
  154.     will-change: background-color;
  155.     transition: background-color 0.2s ease;
  156.     background-color: transparent;
  157.     border: none; }
  158.     .notification-dropdown .dropdown > button[aria-expanded="true"] {
  159.       background-color: rgba(255, 255, 255, 0.08) !important; }
  160.     .notification-dropdown .dropdown > button:hover {
  161.       background-color: rgba(255, 255, 255, 0.08); }
  162.     .notification-dropdown .dropdown > button .icon {
  163.       font-size: 1.6rem;
  164.       color: #fff;
  165.       will-change: color;
  166.       transition: color 0.2s ease; }
  167.   .notification-dropdown .dropdown-menu {
  168.     padding: 0;
  169.     margin: 0;
  170.     opacity: 1;
  171.     box-shadow: 0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08);
  172.     will-change: opacity, left, top;
  173.     transition: opacity 0.2s cubic-bezier(0.36, 0, 1, 1);
  174.     transform: none !important;
  175.     top: calc(var(--header-height) - 1px) !important;
  176.     left: calc((var(--dropdown-width) * -1) + 4.6rem - 0.1rem) !important; }
  177.     .notification-dropdown .dropdown-menu .scrollbar-container {
  178.       min-height: 34.4rem;
  179.       max-height: 34.4rem; }
  180.     .notification-dropdown .dropdown-menu .dropdown-header {
  181.       text-transform: uppercase;
  182.       padding: 1rem 1.5rem;
  183.       background-color: #eeeeee;
  184.       font-size: 1.4rem;
  185.       border-bottom: 1px solid var(--color-border); }
  186.     .notification-dropdown .dropdown-menu .notification__all > a {
  187.       display: flex;
  188.       align-items: center;
  189.       justify-content: center;
  190.       font-size: 1.2rem;
  191.       font-weight: 600;
  192.       padding: 1rem 0;
  193.       border-top: 1px solid var(--color-border); }
  194.       .notification-dropdown .dropdown-menu .notification__all > a:link, .notification-dropdown .dropdown-menu .notification__all > a:visited {
  195.         text-decoration: none; }
  196.     .notification-dropdown .dropdown-menu .not-read {
  197.       background-color: #edf2fa !important; }
  198.     .notification-dropdown .dropdown-menu .dropdown-item:hover,
  199.     .notification-dropdown .dropdown-menu .not-read:hover {
  200.       background-color: #f8f9fa !important; }
  201.     .notification-dropdown .dropdown-menu .dropdown-item {
  202.       position: relative;
  203.       display: flex;
  204.       font-size: 1.2rem;
  205.       background-color: #fff;
  206.       transition: background-color 0.2s ease;
  207.       padding: 0.5rem 1.5rem;
  208.       min-height: 8.8rem;
  209.       width: var(--dropdown-width); }
  210.       .notification-dropdown .dropdown-menu .dropdown-item:focus {
  211.         color: #212529; }
  212.       .notification-dropdown .dropdown-menu .dropdown-item:not(:last-of-type) {
  213.         border-bottom: 1px solid var(--color-border); }
  214.       .notification-dropdown .dropdown-menu .dropdown-item .notification__icon-wrapper {
  215.         display: flex;
  216.         align-items: center;
  217.         margin-right: 1.5rem; }
  218.         .notification-dropdown .dropdown-menu .dropdown-item .notification__icon-wrapper .notification__icon {
  219.           display: flex;
  220.           font-size: 1.8rem;
  221.           color: #6c757d;
  222.           border: 1px solid var(--color-border);
  223.           background-color: #f5f6f8;
  224.           align-items: center;
  225.           justify-content: center;
  226.           border-radius: 50%;
  227.           width: 5rem;
  228.           height: 5rem; }
  229.       .notification-dropdown .dropdown-menu .dropdown-item .notification__content {
  230.         display: flex;
  231.         width: 100%;
  232.         flex-direction: column;
  233.         padding: 1rem 0 1rem; }
  234.         .notification-dropdown .dropdown-menu .dropdown-item .notification__content .notification__top {
  235.           display: flex;
  236.           justify-content: space-between;
  237.           color: #6c757d;
  238.           font-size: 1.3rem;
  239.           font-weight: 600; }
  240.         .notification-dropdown .dropdown-menu .dropdown-item .notification__content .notification__timestamp {
  241.           font-size: 1.1rem; }
  242.         .notification-dropdown .dropdown-menu .dropdown-item .notification__content p {
  243.           font-size: 1.3rem;
  244.           white-space: pre-wrap;
  245.           word-break: break-word;
  246.           margin: 0; }
  247.  
  248. .message-dropdown {
  249.   display: flex;
  250.   height: 100%;
  251.   border-right: 1px solid #101438; }
  252.   .message-dropdown .dropdown > button {
  253.     display: flex;
  254.     align-items: center;
  255.     height: 100%;
  256.     padding: 0 1.5rem;
  257.     will-change: background-color;
  258.     transition: background-color 0.2s ease;
  259.     background-color: transparent;
  260.     border: none; }
  261.     .message-dropdown .dropdown > button[aria-expanded="true"] {
  262.       background-color: rgba(255, 255, 255, 0.08) !important; }
  263.     .message-dropdown .dropdown > button:hover {
  264.       background-color: rgba(255, 255, 255, 0.08); }
  265.     .message-dropdown .dropdown > button .icon {
  266.       font-size: 1.6rem;
  267.       color: #fff;
  268.       will-change: color;
  269.       transition: color 0.2s ease; }
  270.   .message-dropdown .dropdown-menu {
  271.     padding: 0;
  272.     margin: 0;
  273.     opacity: 1;
  274.     box-shadow: 0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08);
  275.     will-change: opacity, left, top;
  276.     transition: opacity 0.2s cubic-bezier(0.36, 0, 1, 1);
  277.     transform: none !important;
  278.     top: calc(var(--header-height) - 1px) !important;
  279.     left: calc((var(--dropdown-width) * -1) + 4.6rem - 0.1rem) !important; }
  280.     .message-dropdown .dropdown-menu .scrollbar-container {
  281.       min-height: 34.4rem;
  282.       max-height: 34.4rem; }
  283.     .message-dropdown .dropdown-menu .dropdown-header {
  284.       text-transform: uppercase;
  285.       padding: 1rem 1.5rem;
  286.       background-color: #eeeeee;
  287.       font-size: 1.4rem;
  288.       border-bottom: 1px solid var(--color-border); }
  289.     .message-dropdown .dropdown-menu .message__all > a {
  290.       display: flex;
  291.       align-items: center;
  292.       justify-content: center;
  293.       font-size: 1.2rem;
  294.       font-weight: 600;
  295.       padding: 1rem 0;
  296.       border-top: 1px solid var(--color-border); }
  297.       .message-dropdown .dropdown-menu .message__all > a:link, .message-dropdown .dropdown-menu .message__all > a:visited {
  298.         text-decoration: none; }
  299.     .message-dropdown .dropdown-menu .not-read {
  300.       background-color: #edf2fa !important; }
  301.     .message-dropdown .dropdown-menu .dropdown-item:hover,
  302.     .message-dropdown .dropdown-menu .not-read:hover {
  303.       background-color: #f8f9fa !important; }
  304.     .message-dropdown .dropdown-menu .dropdown-item {
  305.       position: relative;
  306.       display: flex;
  307.       font-size: 1.2rem;
  308.       background-color: #fff;
  309.       transition: background-color 0.2s ease;
  310.       padding: 0.5rem 1.5rem;
  311.       min-height: 8.8rem;
  312.       width: var(--dropdown-width); }
  313.       .message-dropdown .dropdown-menu .dropdown-item:focus {
  314.         color: #212529; }
  315.       .message-dropdown .dropdown-menu .dropdown-item:not(:last-of-type) {
  316.         border-bottom: 1px solid var(--color-border); }
  317.       .message-dropdown .dropdown-menu .dropdown-item .message__avatar-wrapper {
  318.         display: flex;
  319.         align-items: center;
  320.         margin-right: 1.5rem; }
  321.         .message-dropdown .dropdown-menu .dropdown-item .message__avatar-wrapper .message__avatar > img {
  322.           display: flex;
  323.           border: 1px solid var(--color-border);
  324.           background-color: #f5f6f8;
  325.           align-items: center;
  326.           justify-content: center;
  327.           border-radius: 50%;
  328.           width: 5rem;
  329.           height: 5rem; }
  330.       .message-dropdown .dropdown-menu .dropdown-item .message__content {
  331.         display: flex;
  332.         width: 100%;
  333.         flex-direction: column;
  334.         padding: 1rem 0 1rem; }
  335.         .message-dropdown .dropdown-menu .dropdown-item .message__content .message__top {
  336.           display: flex;
  337.           justify-content: space-between;
  338.           color: #6c757d;
  339.           font-size: 1.3rem;
  340.           font-weight: 600; }
  341.         .message-dropdown .dropdown-menu .dropdown-item .message__content .message__timestamp {
  342.           font-size: 1.1rem; }
  343.         .message-dropdown .dropdown-menu .dropdown-item .message__content p {
  344.           font-size: 1.3rem;
  345.           white-space: pre-wrap;
  346.           word-break: break-word;
  347.           overflow: hidden;
  348.           text-overflow: ellipsis;
  349.           margin: 0; }
  350.  
  351. .user-dropdown {
  352.   position: relative;
  353.   display: flex; }
  354.   .user-dropdown .dropdown > button {
  355.     display: flex;
  356.     align-items: center;
  357.     height: 100%;
  358.     padding: 0 3.5rem 0 1.5rem;
  359.     will-change: background-color;
  360.     transition: background-color 0.2s ease;
  361.     background-color: transparent;
  362.     border: none;
  363.     justify-content: space-around;
  364.     font-size: 1.3rem;
  365.     color: #fff; }
  366.     .user-dropdown .dropdown > button[aria-expanded="true"] {
  367.       background-color: rgba(255, 255, 255, 0.08) !important; }
  368.     .user-dropdown .dropdown > button:hover {
  369.       background-color: rgba(255, 255, 255, 0.08); }
  370.     .user-dropdown .dropdown > button .avatar-container {
  371.       margin-right: 1.5rem; }
  372.     .user-dropdown .dropdown > button .avatar {
  373.       width: 3.5rem;
  374.       border-radius: 50%; }
  375.   .user-dropdown .dropdown-menu {
  376.     padding: 0;
  377.     margin: 0;
  378.     opacity: 1;
  379.     box-shadow: 0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08);
  380.     will-change: opacity, left, top;
  381.     transition: opacity 0.2s cubic-bezier(0.36, 0, 1, 1);
  382.     transform: none !important;
  383.     top: calc(var(--header-height) - 1px) !important;
  384.     left: 0 !important; }
  385.     .user-dropdown .dropdown-menu .scrollbar-container {
  386.       min-height: 34.4rem;
  387.       max-height: 34.4rem; }
  388.     .user-dropdown .dropdown-menu .dropdown-header {
  389.       text-transform: uppercase;
  390.       padding: 1rem 1.5rem;
  391.       background-color: #eeeeee;
  392.       font-size: 1.4rem;
  393.       border-bottom: 1px solid var(--color-border); }
  394.     .user-dropdown .dropdown-menu .user__all > a {
  395.       display: flex;
  396.       align-items: center;
  397.       justify-content: center;
  398.       font-size: 1.2rem;
  399.       font-weight: 600;
  400.       padding: 1rem 0;
  401.       border-top: 1px solid var(--color-border); }
  402.       .user-dropdown .dropdown-menu .user__all > a:link, .user-dropdown .dropdown-menu .user__all > a:visited {
  403.         text-decoration: none; }
  404.     .user-dropdown .dropdown-menu .not-read {
  405.       background-color: #edf2fa !important; }
  406.     .user-dropdown .dropdown-menu .dropdown-item:hover,
  407.     .user-dropdown .dropdown-menu .not-read:hover {
  408.       background-color: #f8f9fa !important; }
  409.     .user-dropdown .dropdown-menu .dropdown-item {
  410.       position: relative;
  411.       display: flex;
  412.       font-size: 1.3rem;
  413.       background-color: #fff;
  414.       transition: background-color 0.2s ease;
  415.       padding: 0.8rem 1.5rem;
  416.       width: 15.53rem; }
  417.       .user-dropdown .dropdown-menu .dropdown-item:last-of-type {
  418.         padding: 1rem 1.5rem;
  419.         border-top: 1px solid var(--color-border); }
  420.       .user-dropdown .dropdown-menu .dropdown-item:focus {
  421.         color: #212529; }
  422.       .user-dropdown .dropdown-menu .dropdown-item .user__icon-wrapper {
  423.         display: flex;
  424.         align-items: center;
  425.         margin-right: 1.5rem; }
  426.         .user-dropdown .dropdown-menu .dropdown-item .user__icon-wrapper .icon {
  427.           font-size: 1.6rem;
  428.           display: flex;
  429.           align-items: center; }
  430.       .user-dropdown .dropdown-menu .dropdown-item .user__content {
  431.         display: flex;
  432.         width: 100%;
  433.         flex-direction: column;
  434.         padding: 1rem 0 1rem; }
  435.         .user-dropdown .dropdown-menu .dropdown-item .user__content .user__top {
  436.           display: flex;
  437.           justify-content: space-between;
  438.           color: #6c757d;
  439.           font-size: 1.3rem;
  440.           font-weight: 600; }
  441.         .user-dropdown .dropdown-menu .dropdown-item .user__content .user__timestamp {
  442.           font-size: 1.1rem; }
  443.         .user-dropdown .dropdown-menu .dropdown-item .user__content p {
  444.           font-size: 1.3rem;
  445.           white-space: pre-wrap;
  446.           word-break: break-word;
  447.           margin: 0; }
  448.  
  449. .sidebar {
  450.   min-width: var(--sidebar-width);
  451.   max-width: var(--sidebar-width);
  452.   height: 100vh;
  453.   background-color: var(--color-sidebar-background);
  454.   border-right: 1px solid var(--color-border); }
  455.   .sidebar__logo {
  456.     position: fixed;
  457.     z-index: 2020;
  458.     width: var(--sidebar-width);
  459.     background-color: var(--color-logo-background); }
  460.     .sidebar__logo .navbar-brand {
  461.       display: flex;
  462.       width: 100%;
  463.       height: var(--header-height);
  464.       margin: 0;
  465.       padding-left: var(--spacing-navigation-px);
  466.       align-items: center; }
  467.   .sidebar__menu {
  468.     height: 100%;
  469.     padding: 0;
  470.     padding-top: var(--header-height); }
  471.     .sidebar__menu .nav-group {
  472.       padding: var(--spacing-navigation-div) 0; }
  473.       .sidebar__menu .nav-group:not(:last-of-type) {
  474.         border-bottom: 1px solid var(--color-border); }
  475.       .sidebar__menu .nav-group ul {
  476.         padding-left: 0;
  477.         list-style: none; }
  478.         .sidebar__menu .nav-group ul .nav-title {
  479.           font-size: 1.3rem;
  480.           font-weight: 600;
  481.           padding-left: calc(var(--spacing-navigation-px) - 0.3rem);
  482.           margin-bottom: var(--spacing-navigation-py);
  483.           color: var(--color-text-title);
  484.           text-transform: uppercase; }
  485.           .sidebar__menu .nav-group ul .nav-title span {
  486.             display: flex;
  487.             align-items: center;
  488.             align-self: stretch; }
  489.         .sidebar__menu .nav-group ul li a {
  490.           display: flex;
  491.           font-size: 1.3rem;
  492.           font-weight: 600;
  493.           padding: var(--spacing-navigation-py) 0 var(--spacing-navigation-py) var(--spacing-navigation-px);
  494.           text-decoration: none;
  495.           color: var(--color-text);
  496.           will-change: background-color, box-shadow, color;
  497.           transition: box-shadow 0.2s ease, color 0.2s ease,
  498.  background-color 0.2s ease;
  499.           align-items: center; }
  500.           .sidebar__menu .nav-group ul li a .icon {
  501.             display: flex;
  502.             font-size: 1.7rem;
  503.             transition: color 0.2s ease;
  504.             color: var(--color-icon);
  505.             width: 1rem;
  506.             margin-right: 1.5rem;
  507.             justify-content: center; }
  508.         .sidebar__menu .nav-group ul li a:hover,
  509.         .sidebar__menu .nav-group ul li.active a {
  510.           color: var(--color-accent);
  511.           box-shadow: inset 0.3rem 0 0 var(--color-accent);
  512.           background: #fbfbfb; }
  513.           .sidebar__menu .nav-group ul li a:hover .icon,
  514.           .sidebar__menu .nav-group ul li.active a .icon {
  515.             color: var(--color-accent); }
  516.         .sidebar__menu .nav-group ul .collapse div a,
  517.         .sidebar__menu .nav-group ul .collapsing div a {
  518.           font-weight: 400;
  519.           box-shadow: none;
  520.           color: var(--color-text);
  521.           padding: 0.5rem var(--spacing-navigation-px);
  522.           border-bottom: 1px solid var(--color-border); }
  523.           .sidebar__menu .nav-group ul .collapse div a .icon,
  524.           .sidebar__menu .nav-group ul .collapsing div a .icon {
  525.             font-size: 1rem;
  526.             color: var(--color-icon); }
  527.           .sidebar__menu .nav-group ul .collapse div a:hover,
  528.           .sidebar__menu .nav-group ul .collapsing div a:hover {
  529.             color: var(--color-accent);
  530.             box-shadow: none; }
  531.             .sidebar__menu .nav-group ul .collapse div a:hover .icon,
  532.             .sidebar__menu .nav-group ul .collapsing div a:hover .icon {
  533.               color: var(--color-accent); }
  534.         .sidebar__menu .nav-group ul .collapse div.active a,
  535.         .sidebar__menu .nav-group ul .collapsing div.active a {
  536.           font-weight: 600; }
  537.         .sidebar__menu .nav-group ul .collapse div.active a,
  538.         .sidebar__menu .nav-group ul .collapse div.active .icon,
  539.         .sidebar__menu .nav-group ul .collapsing div.active a,
  540.         .sidebar__menu .nav-group ul .collapsing div.active .icon {
  541.           color: var(--color-accent); } */
Add Comment
Please, Sign In to add comment
Public Pastes
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!