digital_heroes_startkit 0.1.1

data/lib/generators/project/app/assets/stylesheets/base/_datepicker.scss

@@ -0,0 +1,620 @@
+.datepicker--cells {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.datepicker--cell {
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 32px;
+  z-index: 1;
+  &.-focus- {
+    background: #f0f0f0;
+  }
+  &.-current- {
+    color: #4EB5E6;
+    &.-focus- {
+      color: #4a4a4a;
+    }
+    &.-in-range- {
+      color: #4EB5E6;
+    }
+  }
+  &.-in-range- {
+    background: rgba(92, 196, 239, 0.1);
+    color: #4a4a4a;
+    border-radius: 0;
+    &.-focus- {
+      background-color: rgba(92, 196, 239, 0.2);
+    }
+  }
+  &.-disabled- {
+    cursor: default;
+    color: #aeaeae;
+    &.-focus- {
+      color: #aeaeae;
+    }
+    &.-in-range- {
+      color: #a1a1a1;
+    }
+    &.-current-.-focus- {
+      color: #aeaeae;
+    }
+  }
+  &.-range-from- {
+    border: 1px solid rgba(92, 196, 239, 0.5);
+    background-color: rgba(92, 196, 239, 0.1);
+    border-radius: 4px 0 0 4px;
+  }
+  &.-range-to- {
+    border: 1px solid rgba(92, 196, 239, 0.5);
+    background-color: rgba(92, 196, 239, 0.1);
+    border-radius: 0 4px 4px 0;
+  }
+  &.-selected- {
+    color: #fff;
+    background: #5cc4ef;
+    &.-current- {
+      color: #fff;
+      background: #5cc4ef;
+    }
+  }
+  &.-range-from-.-range-to- {
+    border-radius: 4px;
+  }
+  &.-selected- {
+    border: none;
+    &.-focus- {
+      background: #45bced;
+    }
+  }
+  &:empty {
+    cursor: default;
+  }
+}
+
+.datepicker--days-names {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 8px 0 3px;
+}
+
+.datepicker--day-name {
+  color: #FF9A19;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: .8em;
+}
+
+.-only-timepicker- .datepicker--content, .datepicker--body, .datepicker-inline .datepicker--pointer {
+  display: none;
+}
+
+.datepicker--cell-day {
+  width: 14.28571%;
+}
+
+.datepicker--cells-months {
+  height: 170px;
+}
+
+.datepicker--cell-month {
+  width: 33.33%;
+  height: 25%;
+}
+
+.datepicker--cells-years, .datepicker--years {
+  height: 170px;
+}
+
+.datepicker--cell-year {
+  width: 25%;
+  height: 33.33%;
+}
+
+.datepickers-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+@media print {
+  .datepickers-container {
+    display: none;
+  }
+}
+
+.datepicker {
+  background: #fff;
+  border: 1px solid #dbdbdb;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-sizing: content-box;
+  font-family: Tahoma,sans-serif;
+  font-size: 14px;
+  color: #4a4a4a;
+  width: 250px;
+  position: absolute;
+  left: -100000px;
+  opacity: 0;
+  transition: opacity .3s ease,left 0s .3s,-webkit-transform .3s ease;
+  transition: opacity .3s ease,transform .3s ease,left 0s .3s;
+  transition: opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease;
+  z-index: 100;
+  &.-from-top- {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
+  &.-from-right- {
+    -webkit-transform: translateX(8px);
+    transform: translateX(8px);
+  }
+  &.-from-bottom- {
+    -webkit-transform: translateY(8px);
+    transform: translateY(8px);
+  }
+  &.-from-left- {
+    -webkit-transform: translateX(-8px);
+    transform: translateX(-8px);
+  }
+  &.active {
+    opacity: 1;
+    -webkit-transform: translate(0);
+    transform: translate(0);
+    transition: opacity .3s ease,left 0s 0s,-webkit-transform .3s ease;
+    transition: opacity .3s ease,transform .3s ease,left 0s 0s;
+    transition: opacity .3s ease,transform .3s ease,left 0s 0s,-webkit-transform .3s ease;
+  }
+}
+
+.datepicker-inline .datepicker {
+  border-color: #d7d7d7;
+  box-shadow: none;
+  position: static;
+  left: auto;
+  right: auto;
+  opacity: 1;
+  -webkit-transform: none;
+  transform: none;
+}
+
+.datepicker--content {
+  box-sizing: content-box;
+  padding: 4px;
+}
+
+.datepicker--pointer {
+  position: absolute;
+  background: #fff;
+  border-top: 1px solid #dbdbdb;
+  border-right: 1px solid #dbdbdb;
+  width: 10px;
+  height: 10px;
+  z-index: -1;
+}
+
+.datepicker--nav-action:hover, .datepicker--nav-title:hover {
+  background: #f0f0f0;
+}
+
+.-top-center- .datepicker--pointer, .-top-left- .datepicker--pointer, .-top-right- .datepicker--pointer {
+  top: calc(100% - 4px);
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+.-right-bottom- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-top- .datepicker--pointer {
+  right: calc(100% - 4px);
+  -webkit-transform: rotate(225deg);
+  transform: rotate(225deg);
+}
+
+.-bottom-center- .datepicker--pointer, .-bottom-left- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
+  bottom: calc(100% - 4px);
+  -webkit-transform: rotate(315deg);
+  transform: rotate(315deg);
+}
+
+.-left-bottom- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-top- .datepicker--pointer {
+  left: calc(100% - 4px);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer {
+  left: 10px;
+}
+
+.-bottom-right- .datepicker--pointer, .-top-right- .datepicker--pointer {
+  right: 10px;
+}
+
+.-bottom-center- .datepicker--pointer, .-top-center- .datepicker--pointer {
+  left: calc(50% - 10px / 2);
+}
+
+.-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
+  top: 10px;
+}
+
+.-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
+  bottom: 10px;
+}
+
+.-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
+  top: calc(50% - 10px / 2);
+}
+
+.datepicker--body.active {
+  display: block;
+}
+
+.datepicker--nav {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  border-bottom: 1px solid #efefef;
+  min-height: 32px;
+  padding: 4px;
+}
+
+.-only-timepicker- .datepicker--nav {
+  display: none;
+}
+
+.datepicker--nav-action, .datepicker--nav-title {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.datepicker--nav-action {
+  width: 32px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  &.-disabled- {
+    visibility: hidden;
+  }
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+  path {
+    fill: none;
+    stroke: #9c9c9c;
+    stroke-width: 2px;
+  }
+}
+
+.datepicker--nav-title {
+  border-radius: 4px;
+  padding: 0 8px;
+}
+
+.datepicker--buttons, .datepicker--time {
+  border-top: 1px solid #efefef;
+  padding: 4px;
+}
+
+.datepicker--nav-title {
+  i {
+    font-style: normal;
+    color: #9c9c9c;
+    margin-left: 5px;
+  }
+  &.-disabled- {
+    cursor: default;
+    background: 0 0;
+  }
+}
+
+.datepicker--buttons {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.datepicker--button {
+  color: #4EB5E6;
+  cursor: pointer;
+  border-radius: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 32px;
+  &:hover {
+    color: #4a4a4a;
+    background: #f0f0f0;
+  }
+}
+
+.datepicker--time {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  &.-am-pm- .datepicker--time-sliders {
+    -webkit-flex: 0 1 138px;
+    -ms-flex: 0 1 138px;
+    flex: 0 1 138px;
+    max-width: 138px;
+  }
+}
+
+.-only-timepicker- .datepicker--time {
+  border-top: none;
+}
+
+.datepicker--time-sliders {
+  -webkit-flex: 0 1 153px;
+  -ms-flex: 0 1 153px;
+  flex: 0 1 153px;
+  margin-right: 10px;
+  max-width: 153px;
+}
+
+.datepicker--time-label {
+  display: none;
+  font-size: 12px;
+}
+
+.datepicker--time-current {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 0 0 10px;
+}
+
+.datepicker--time-current-colon {
+  margin: 0 2px 3px;
+  line-height: 1;
+}
+
+.datepicker--time-current-hours, .datepicker--time-current-minutes {
+  line-height: 1;
+  font-size: 19px;
+  font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
+  position: relative;
+  z-index: 1;
+}
+
+.datepicker--time-current-hours:after, .datepicker--time-current-minutes:after {
+  content: '';
+  background: #f0f0f0;
+  border-radius: 4px;
+  position: absolute;
+  left: -2px;
+  top: -3px;
+  right: -2px;
+  bottom: -2px;
+  z-index: -1;
+  opacity: 0;
+}
+
+.datepicker--time-current-hours.-focus-:after, .datepicker--time-current-minutes.-focus-:after {
+  opacity: 1;
+}
+
+.datepicker--time-current-ampm {
+  text-transform: uppercase;
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+  color: #9c9c9c;
+  margin-left: 6px;
+  font-size: 11px;
+  margin-bottom: 1px;
+}
+
+.datepicker--time-row {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 11px;
+  height: 17px;
+  background: linear-gradient(to right, #dedede, #dedede) left (50% / 100%) 1px no-repeat;
+  &:first-child {
+    margin-bottom: 4px;
+  }
+  input[type=range] {
+    background: 0 0;
+    cursor: pointer;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    &::-ms-tooltip {
+      display: none;
+    }
+    &:hover {
+      &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+        border-color: #b8b8b8;
+      }
+    }
+    &:focus {
+      outline: 0;
+      &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef;
+      }
+    }
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s;
+      margin-top: -6px;
+    }
+    &::-moz-range-thumb, &::-ms-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s;
+    }
+    &::-webkit-slider-runnable-track, &::-moz-range-track, &::-ms-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: 0 0;
+    }
+    &::-ms-fill-lower, &::-ms-fill-upper {
+      background: 0 0;
+    }
+  }
+  span {
+    padding: 0 12px;
+  }
+}
+
+.datepicker--time-icon {
+  color: #9c9c9c;
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em;
+  &:after, &:before {
+    content: '';
+    background: currentColor;
+    position: absolute;
+  }
+  &:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+  }
+  &:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px);
+  }
+}
+
+.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
+  color: #dedede;
+}
+
+.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
+  color: #c5c5c5;
+}
+
+.-disabled-.-focus- {
+  &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
+    color: #dedede;
+  }
+}
+
+.-selected- {
+  &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
+    color: #fff;
+    background: #a2ddf6;
+  }
+  &.-focus- {
+    &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
+      background: #8ad5f4;
+    }
+  }
+}
+
+.-in-range- {
+  &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
+    background-color: rgba(92, 196, 239, 0.1);
+    color: #ccc;
+  }
+  &.-focus- {
+    &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
+      background-color: rgba(92, 196, 239, 0.2);
+    }
+  }
+}
+
+.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
+  background: 0 0;
+  border: none;
+}

data/lib/generators/project/app/assets/stylesheets/base/_form.scss

@@ -0,0 +1,81 @@
+input, textarea {
+  width: 100%;
+  padding: 0 1em;
+  line-height: 44px;
+  border: none;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 1em;
+  @include tfont;
+}
+
+.form__input {
+  position: relative;
+  input {
+    background-image: none;
+    &.success {
+      background-image: asset-data-url('svg/check-green.svg');
+      background-repeat: no-repeat;
+      background-size: 1em;
+      background-position: center right .75em;
+    }
+  }
+}
+
+.form {
+  margin: 0 -1em;
+  .form__input {
+    margin-top: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  .SumoSelect, .form__checkbox, .gender-item {
+    label {
+      font-size: 1em;
+    }
+  }
+  .SumoSelect {
+    .CaptionCont {
+      background-color: #fff;
+    }
+  }
+  label, .label {
+    font-size: .75em;
+  }
+  .btn--submit {
+    margin-top: 2em;
+  }
+}
+
+.add-access_card {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  top: 31px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50%;
+  font-size: 0;
+  background-image: asset-data-url('svg/plus.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 50%;
+  @include shadow-xs;
+  transition: box-shadow .125s ease-out;
+  &:hover {
+    @include shadow-lg;
+    cursor: pointer;
+  }
+}
+
+.date-input {
+  line-height: 1em;
+  padding: 11px 1em;
+  height: 44px;
+}
+
+.gender-item {
+  float: left;
+  padding-right: 2em;
+}

data/lib/generators/project/app/assets/stylesheets/base/_notice.scss

@@ -0,0 +1,14 @@
+.error-notice, .warning-notice, .enter-notice {
+  display: none;
+  &.active {
+    display: block;
+  }
+}
+
+.flash-message {
+  float: left;
+  width: 100%;
+  padding: 1.5em 2em;
+  margin: 2em 0 0 0;
+  background-color: #ffeecd;
+}