symphony-integration-commons/styles/main.less

Common components for 3rd party developers build the user facing application for Symphony Integrations.

@import './lib.less';

::-webkit-scrollbar {
  width: 10px; /* 1px wider than Lion. */
  height: 10px;
  /* This is more usable for users trying to click it. */
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 100px;
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0);
  min-height: 10px; /*Prevent it from getting too small */
}
::-webkit-scrollbar-thumb:vertical:active, ::-webkit-scrollbar-thumb:horizontal:active {
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}
/* IE11 soln */
html, body {
  scrollbar-shadow-color: rgba(0,0,0,0);
  scrollbar-face-color: rgba(0,0,0,.5);
  scrollbar-track-color: rgba(0,0,0,0);
  scrollbar-arrow-color: rgba(0,0,0,0);
}
/* Dark contrast visibility */
body.dark-contrast ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
  background: rgba(110,110,110,0.5);
  background-clip: padding-box;
  padding: 0;
  margin: 0
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0.625rem;
  margin-bottom: 0.9375rem;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Alright Sans', 'Avenir', 'Tahoma', sans-serif, 'Verdana';

  header {
    h2, h2 label {
      font: bold @header-level2-component 'Alright Sans', 'Avenir', 'Tahoma', sans-serif;
    }
  }
}

.submit-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 100%;
  max-width: @max-width-component;
  padding-top: 0.625rem;

  button {
    margin-right: 0;
    min-width: 6.25rem;
  }
}

.hidden {
  display: none;
}

.dark, .dark-contrast {
  .wrapper {
    header {
      h2, h2 label { color: #fff; }
    }
  }

  .submit-container { border-top: 0.0625rem solid rgba(255,255,255,0.8); }
}

.light, .light-contrast {
  .wrapper {
    header {
      h2, h2 label { color: #000; }
    }
  }

  .submit-container { border-top: 0.0625rem solid rgba(0,0,0,0.1); }
}