Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/calendar/style/base.css

@@ -0,0 +1,12 @@
+/*
+ * these styles are needed during app startup
+ * ---
+ * these dependencies will be inlined during the build stage to improve
+ * performance, that way we load a single CSS file.
+ */
+@import url("../shared/style/tabs.css");
+@import url("../shared/style/icons.css");
+@import url("calendar.css");
+@import url("ui.css");
+@import url("month.css");
+@import url("building_blocks.css");

gaia/apps/calendar/style/building_blocks.css

@@ -0,0 +1,16 @@
+/*
+* web asset generated css file.
+* Do not directly the contents.
+*/
+
+#settings {
+  position: absolute;
+  width: 80%;
+  background-color: #2c353b;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  font-family: sans-serif;
+}
+

gaia/apps/calendar/style/calendar.css

@@ -0,0 +1,55 @@
+* {
+  box-sizing: border-box;
+  /* By default do not allow any user text selection, only enable for certain
+  parts on a per-element/region area */
+  -moz-user-select: none;
+}
+
+html {
+  font-size: 10px;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  line-height: 100%;
+  overflow: hidden;
+  background-color: #000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+section {
+  /* unscrew up heights */
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+section {
+  width: 100%;
+}
+
+ol,
+menu li,
+ol li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Allow inputs to be selectable (cut/copy/paste operations) */
+input[type="email"],
+input[type="search"],
+input[type="text"],
+input[type="url"],
+textarea {
+ -moz-user-select: text;
+}
+
+html[dir="ltr"] { text-align: left; }
+html[dir="rtl"] { text-align: right; }

gaia/apps/calendar/style/event_view.css

@@ -0,0 +1,86 @@
+#event-view.loading .edit {
+  pointer-events: none;
+}
+
+#event-view.loading > section {
+  display: none;
+}
+
+#event-view > section {
+  overflow-y: scroll;
+  height: calc(100% - 5rem);
+}
+
+#event-view .edit[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+#event-view ul {
+  margin: 0;
+  padding: 2rem 1.8rem;
+  list-style-type: none;
+}
+
+#event-view ul * {
+  /* allow selection of whole event data */
+  -moz-user-select: text;
+}
+
+#event-view .content {
+  word-wrap: break-word;
+  -moz-hyphens: auto;
+}
+
+#event-view .description {
+  border-top: 1px solid #BDBDBD;
+  padding-top: 1rem;
+  margin-top: 1.5rem;
+}
+
+#event-view ul .content,
+#event-view ul span[data-l10n-id="reminder"] {
+  line-height: 2rem;
+  font-size: 1.4rem;
+  color: #707070;
+}
+
+#event-view .duration-time {
+  margin: 1rem 0;
+}
+
+#event-view .current-calendar,
+#event-view .alarms {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+#event-view .title .content {
+  font-size: 1.9rem;
+  font-weight: normal;
+  color: #000;
+}
+
+#event-view .description .content {
+  font-size: 1.6rem;
+  color: #333;
+}
+
+#event-view .alarms > .content > div {
+  display: inline-block;
+}
+
+#event-view .alarms.multiple > .content > div {
+  display: block;
+  padding-inline-start: 1.4rem;
+}
+
+#event-view .current-calendar .icon-calendar-dot:before {
+  position: absolute;
+  offset-inline-start: -2.2rem;
+  line-height: 2.3rem;
+  font-size: 5rem;
+}
+
+#event-view .current-calendar .content {
+  margin-inline-start: 1.2rem;
+}

gaia/apps/calendar/style/forms.css

@@ -0,0 +1,51 @@
+/* generic stuff that will probably live in the building blocks */
+
+form, fieldset, input, textarea {
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+}
+
+input, textarea {
+  width: 100%;
+}
+
+select {
+  border: none;
+  background: transparent;
+  font-size: 1.7rem;
+}
+
+form,
+form ol {
+  margin: 0;
+  padding: 0;
+}
+
+/* for calendar */
+
+form li {
+  margin: 1rem 2rem;
+}
+
+.datetime {
+  /* pass the events from <span> to <input> */
+  pointer-events: none;
+  position: absolute;
+  offset-inline-start: 1.5rem;
+  font-weight: normal;
+}
+
+.hidden-input {
+  /* The hidden date and time inputs need to overlap the span(s) with datetime class. */
+  position: absolute;
+  /* visibility: hidden; will avoid events to reach the <input> */
+  opacity: 0;
+  /* input should not be selectable otherwise it might affect the layout */
+  -moz-user-select: none;
+  /* Bug 1117652: copypaste bubble would be triggered if tapping or longpressing
+                  on the input field, so we let the cursor out of the screen to
+                  prevent it. */
+  text-indent: 110%;
+}

gaia/apps/calendar/style/lazy_loaded.css

@@ -0,0 +1,18 @@
+/*
+ * these styles are lazy loaded after app startup
+ * ---
+ * these dependencies will be inlined during the build stage to improve
+ * performance, that way we load a single CSS file.
+ */
+@import url("forms.css");
+@import url("../shared/style/buttons.css");
+@import url("../shared/style/confirm.css");
+@import url("../shared/style/input_areas.css");
+@import url("../shared/style/progress_activity.css");
+@import url("../shared/style/status.css");
+@import url("event_view.css");
+@import url("modify_account_view.css");
+@import url("modify_event_view.css");
+@import url("multi_day.css");
+@import url("overlay.css");
+@import url("settings.css");

gaia/apps/calendar/style/modify_account_view.css

@@ -0,0 +1,133 @@
+#modify-account-view.preset-google .full-url,
+#modify-account-view.preset-yahoo .full-url {
+  display: none;
+}
+
+#modify-account-view.create .delete-record {
+  display: none;
+}
+
+:target#remove-account-dialog {
+  display: block;
+}
+
+#modify-account-view .during-progress {
+  display: none;
+  pointer-events: none;
+}
+
+#modify-account-view.in-progress .during-progress {
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}
+
+#modify-account-view.in-progress .during-progress > div {
+  margin: 16rem 1.5rem 0;
+  padding-top: 1.2rem;
+  border-top: 0.1rem solid #bebebe;
+}
+
+#modify-account-view.in-progress .during-progress > div > span {
+  display: inline-block;
+  width: calc(100% - 4rem);
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 2.4rem;
+  line-height: 3rem;
+  letter-spacing: 0.024rem;
+  word-spacing: 0.1rem;
+}
+
+#modify-account-view.in-progress .during-progress > div > progress {
+  line-height: normal;
+  margin-inline-end: 0.5rem;
+}
+
+#modify-account-view.in-progress button,
+#modify-account-view.in-progress form {
+  display: none;
+}
+
+#modify-account-view form ol {
+  margin-top: 1.5rem;
+}
+
+#modify-account-view form li {
+  margin: 0;
+  padding: 0 1.5rem 1rem;
+}
+
+#modify-account-view form li,
+#modify-account-view form li input {
+  font-size: 1.7rem;
+}
+
+
+#remove-account-dialog {
+  display: none;
+}
+
+#remove-account-dialog p {
+  font-size: 2.2rem;
+}
+
+#modify-account-view.auth-oauth2.create .user,
+#modify-account-view .sync-errors,
+#modify-account-view .oauth2-sign-in {
+  display: none;
+}
+
+#modify-account-view.auth-oauth2.create .oauth2-sign-in,
+#modify-account-view.auth-oauth2.error .sync-errors,
+#modify-account-view.auth-oauth2.error .oauth2-sign-in {
+  display: block;
+}
+
+#modify-account-view .sync-errors p {
+  margin: 0;
+  height: 3rem;
+  background: transparent url('icons/accountwarning.png') no-repeat left top;
+  -moz-padding-start: 3.5rem;
+  line-height: 3rem;
+}
+
+#modify-account-view.auth-oauth2 .save,
+#modify-account-view.auth-oauth2 .password {
+  display: none;
+}
+
+#modify-account-view.remove-dialog #modify-account-header,
+#modify-account-view.remove-dialog .modify-account-form {
+  visibility: hidden;
+}
+
+#oauth2 {
+  display: none;
+  z-index: 1000000;
+  background: white;
+}
+
+#oauth2.active {
+  display: block;
+}
+
+#oauth2 gaia-header h1 {
+  /* should always display the beginning of the URL */
+  direction: ltr;
+}
+
+#oauth2 .browser-container {
+  width: 100%;
+  /* -5rem for the header */
+  height: calc(100% - 4rem);
+}
+
+#oauth2 .browser-container > iframe {
+  padding: 0;
+  margin: 0;
+  border: none;
+  height: 100%;
+  width: 100%;
+}

gaia/apps/calendar/style/modify_event_view.css

@@ -0,0 +1,169 @@
+#modify-event-view.loading button {
+  pointer-events: none;
+}
+
+#modify-event-view.loading > form {
+  display: none;
+}
+
+#modify-event-view form {
+  overflow-Y: auto;
+  height: calc(100% - 5rem);
+}
+
+#modify-event-view form ol {
+  margin: 1rem 1.5rem 0;
+  overflow: hidden;
+}
+
+#modify-event-view .button {
+  margin-bottom: 0;
+}
+
+#modify-event-view .button input {
+  font-size: 1.6rem;
+}
+
+#modify-event-view form ol li {
+  margin: 0 0 0.5rem;
+}
+
+#modify-event-view li.end-date,
+#modify-event-view li.start-date {
+  box-sizing: border-box;
+  width: 60%;
+  padding-inline-end: 0.5rem;
+}
+html[dir="ltr"] #modify-event-view li.end-date,
+html[dir="ltr"] #modify-event-view li.start-date {
+  float: left;
+}
+html[dir="rtl"] #modify-event-view li.end-date,
+html[dir="rtl"] #modify-event-view li.start-date {
+  float: right;
+}
+
+#modify-event-view li.end-time,
+#modify-event-view li.start-time {
+  text-align: center;
+  width: calc(40% - 1px);
+}
+html[dir="ltr"] #modify-event-view li.end-time,
+html[dir="ltr"] #modify-event-view li.start-time {
+  float: left;
+}
+html[dir="rtl"] #modify-event-view li.end-time,
+html[dir="rtl"] #modify-event-view li.start-time {
+  float: right;
+}
+
+#modify-event-view li.notes  {
+  height: 10rem;
+}
+
+#modify-event-view li.notes textarea {
+  padding: 1rem 1.5rem;
+  height: 100%;
+  font-size: 1.7rem;
+  line-height: 1.3em;
+  overflow-y: auto;
+}
+
+#modify-event-view li.allday {
+  padding: 0;
+  padding-inline-start: 1.5rem;
+  margin: 0 0 1rem;
+  font-size: 1.9rem;
+  line-height: 4rem;
+  font-weight: normal;
+}
+
+#modify-event-view h3 {
+  padding: 0;
+  padding-inline-start: 1.5rem;
+  font-size: 1.9rem;
+  line-height: 3rem;
+  font-weight: normal;
+}
+
+#modify-event-view li.allday > label {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  padding-inline-end: 5rem;
+  line-height: 1.3em;
+}
+
+#modify-event-view li.allday > label > span:after {
+  offset-inline-start: auto;
+  offset-inline-end: 0;
+}
+
+#modify-event-view.allday .start-time,
+#modify-event-view.allday .end-time {
+  visibility: hidden;
+}
+
+#modify-event-view.update .calendar-id {
+  display: none;
+}
+
+#modify-event-view.create .current-calendar {
+  display: none;
+}
+
+/* remove button padding and set the input height to avoid cropping arabic text
+ * (Bug 1154633) */
+#modify-event-view .current-calendar .button {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+#modify-event-view .calendar-id,
+#modify-event-view .current-calendar {
+  clear: both;
+}
+
+#modify-event-view .alarms .button {
+  margin: 0.25rem 0;
+}
+
+#modify-event-view .delete {
+  width: calc(100% - 3rem);
+  margin: 0 auto;
+}
+
+#modify-event-view.readonly menu,
+#modify-event-view.create .delete-record,
+#modify-event-view.readonly .delete-record {
+  display: none;
+}
+
+/**
+ * 1. COMPLEX: Scoped style-sheets within <gaia-header>
+ *    trump all other rules. !important is required
+ *    for an app to over-ride the default appearance
+ *    of content within the custom-element. This may
+ *    change when we get `:host` and `:content` selectors
+ *    in shadow-dom.
+ */
+
+#modify-event-view.create .save-text {
+  display: block !important; /* 1 */
+}
+
+#modify-event-view.create .done-text {
+  display: none !important; /* 1 */
+}
+
+#modify-event-view.update .save-text {
+  display: none !important; /* 1 */
+}
+
+#modify-event-view.update .done-text {
+  display: block !important; /* 1 */
+}
+
+#modify-event-view .save[aria-disabled="true"] {
+  pointer-events: none;
+}

gaia/apps/calendar/style/month.css

@@ -0,0 +1,329 @@
+/* TODO(gareth): Why are these namespaced under
+ *     #time-views if they already have ids?
+ */
+#time-views #month-view {
+  background-color: #F8F8F8;
+  height: auto;
+}
+
+#time-views #month-day-agenda {
+  background-color: #F8F8F8;
+  flex: 1;
+}
+
+section.month {
+  display: none;
+  height: 100%;
+}
+
+section.month.active {
+  display: block;
+}
+
+body[data-path^="/month/"] section.month.next,
+body[data-path^="/month/"] section.month.previous {
+  display: block !important;
+}
+
+/* section.month > * */
+#month-days,
+section.month > ol
+{
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}
+
+section.month > ol {
+  display: flex;
+}
+
+section.month li {
+  -moz-user-select: none;
+  font-size: 1.4rem;
+  line-height: 120%;
+  margin-inline-end: 0.1rem;
+  flex-grow: 1;
+  flex-basis: 4.4rem;
+}
+
+/* The margin-right is used elsewhere to create horizontal space
+ * between the list elements. Once we reach the rightmost one,
+ * we should turn it off.
+ */
+section.month li:last-child {
+  margin-inline-end: 0;
+}
+
+#month-days {
+  overflow: hidden;
+}
+
+#month-days li {
+  color: #657073;
+  font-size: 1.4rem;
+  height: 2rem;
+  padding: 0.185rem 0;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+#month-days > ol {
+  height: auto;
+}
+
+section.month ol {
+  height: 4.4rem;
+  margin-bottom: 0.1rem;
+  display: flex;
+}
+
+/* The last week doesn't need a bottom border. */
+section.month ol:last-child {
+  border-bottom: 0;
+}
+
+/* Make the rows a bit taller for larger resolutions */
+/* use min-height instead of min-device-width because of b2g Bug 979924 */
+@media (min-height: 640px) {
+  section.month ol {
+    height: 6rem;
+  }
+}
+
+section.month > ol > li {
+  background-color: white;
+  height: 100%;
+  position: relative;
+  text-align: center;
+}
+
+section.month .present {
+  border: 0.1rem solid #F97C17;
+}
+
+section.month .selected {
+  color: white;
+  background-color: #00A8C9;
+}
+
+section.month .other-month {
+  color: #BDBDBD;
+}
+
+section.month .day {
+  display: block;
+  font-size: 1.8rem;
+  line-height: 4.4rem;
+}
+
+section.month .busy-indicator {
+  bottom: 0.4rem;
+  color: #CBCBCB;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+section.month .selected > .busy-indicator {
+  color: white;
+}
+
+section.month .icon-calendar-dot {
+  height: 0.4rem;
+  line-height: 0.4rem;
+  margin: 0 0.2rem;
+  position: relative;
+  width: 0.4rem;
+}
+
+section.month .icon-calendar-dot:before {
+  /* center dots */
+  margin-inline-start: calc(50% - 1.8rem);
+}
+
+/* month-day-agenda
+ * =============== */
+
+#month-day-agenda {
+  margin-bottom: 4.5rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  will-change: scroll-position;
+}
+
+#event-list-date {
+  border-bottom: 0.1rem solid #0AC;
+  color: #0AC;
+  font-size: 1.6rem;
+  height: 3rem;
+  line-height: 3rem;
+  margin: 0 1.5rem;
+  padding: 0 1.5rem;
+  text-transform: uppercase;
+}
+
+#empty-message {
+  display: none;
+}
+
+#empty-message.active {
+  align-items: center;
+  color: #B8B8B8;
+  display: flex;
+  font-size: 2rem;
+  height: calc(100% - 3rem);
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+#month-day-agenda .event {
+  display: block;
+  height: 6rem;
+  margin: 0;
+  position: relative;
+  padding: 0 1.5rem;
+}
+
+#month-day-agenda .event:active,
+#month-day-agenda .event:focus {
+  outline: none;
+}
+
+#month-day-agenda .container {
+  height: 100%;
+  padding: 0 1.5rem;
+  border-bottom: 0.1rem solid #E5E5E5;
+}
+
+/* The last month day event doesn't need a bottom border. */
+#month-day-agenda .event:last-child > .container {
+  border-bottom: none;
+}
+
+#month-day-agenda .container.has-alarm {
+  padding-inline-end: 3rem;
+}
+
+#month-day-agenda .icon-calendar-alarm {
+  position: absolute;
+  top: 0.2rem;
+  offset-inline-end: 0;
+  width: 3rem;
+  height: 3rem;
+}
+
+#month-day-agenda .event-title {
+  min-height: 1.5rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #333;
+}
+
+#month-day-agenda .event-location {
+  display: block;
+  top: 2.8rem;
+  min-height: 2.1rem;
+  padding-top: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #707070;
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+
+#month-day-agenda .icon-calendar-dot {
+  position: absolute;
+  height: 3rem;
+  offset-inline-start: -1.4rem;
+  top: 50%;
+  margin-top: -3rem;
+}
+
+#month-day-agenda .icon-calendar-dot:before {
+  font-size: 6rem;
+}
+
+#month-day-agenda .event-time {
+  color: #657073;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  height: 6rem;
+  justify-content: center;
+}
+html[dir="ltr"] #month-day-agenda .event-time { float: left; }
+html[dir="rtl"] #month-day-agenda .event-time { float: right; }
+
+#month-day-agenda .event-time .all-day {
+  white-space: normal;
+  line-height: 1.4;
+  width: 7rem;
+}
+
+#month-day-agenda .start-time,
+#month-day-agenda .end-time {
+  height: 2.5rem;
+  line-height: 2.5rem;
+}
+
+#month-day-agenda .event-details {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 6rem;
+  justify-content: center;
+  position: absolute;
+  offset-inline-start: 11.5rem;
+  top: 0;
+  width: 17rem;
+}
+
+#month-day-agenda .event-details > h5 {
+  color: #252525;
+  font-size: 1.9rem;
+  font-weight: normal;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+#month-day-agenda .details {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #A2A2A2;
+  white-space: nowrap;
+  width: 100%;
+}
+
+#month-day-agenda .location {
+  font-size: 1.4rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  width: 100%;
+}
+
+#month-day-agenda .icon-calendar-alarm {
+  display: none;
+}
+
+#month-day-agenda .has-alarms .icon-calendar-alarm {
+  display: block;
+  height: 6rem;
+  line-height: 6rem;
+  position: absolute;
+  offset-inline-end: 1rem;
+}

gaia/apps/calendar/style/multi_day.css

@@ -0,0 +1,481 @@
+/*
+ `.multi-day` is used by week and day views; we use the classes `.day-view` and
+ `.week-view` to override specific rules instead of IDs to avoid specificity
+ conflicts.
+ ---
+ all classes are prefixed with "md__" to avoid collisions ("md" == "multi-day")
+ following the BEM naming convention.
+*/
+
+.multi-day {
+  overflow: hidden;
+}
+
+.md__sticky {
+  width: 100%;
+  height: 7rem;
+  background-color: #f8f8f8;
+  border-bottom: 0.1rem solid #e2e2e2;
+  position: relative;
+  overflow: hidden;
+}
+
+.day-view .md__sticky {
+  height: 5rem;
+}
+
+.md__all-day {
+  top: 2rem;
+  height: 4.9rem;
+  line-height: 4.9rem;
+  color: #707070;
+  position: absolute;
+  border-top: 0.1rem solid #e2e2e2;
+  width: 3rem;
+  text-align: center;
+}
+
+.day-view .md__all-day {
+  border-top: 0;
+  width: 7rem;
+  top: 0;
+  offset-inline-start: 0;
+}
+
+.md__day-name {
+  color: #707070;
+  font-size: 1.3rem;
+  text-transform: uppercase;
+  font-weight: 400;
+  text-align: center;
+  height: 2rem;
+  line-height: 1.9rem;
+  width: 100%;
+}
+
+.day-view .md__day-name {
+  display: none;
+}
+
+.week-view .md__day-name.is-today {
+  font-weight: 500;
+  color: #008eab;
+}
+
+.md__allday-events {
+  border-inline-start: 0.1rem solid #e2e2e2;
+  border-top: 0.1rem solid #e2e2e2;
+  height: 5rem;
+  width: 100%;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  background-color: #f8f8f8;
+}
+
+.day-view .md__allday-events {
+  border: none;
+}
+
+.md__main {
+  height: calc(100% - 7rem);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.day-view .md__main {
+  height: calc(100% - 5rem);
+}
+
+.md__main-content {
+  position: relative;
+  /* background color and z-index is important for APZ performance */
+  background-color: #fff;
+  z-index: 0;
+  height: 120rem;
+  width: 100%;
+}
+
+.md__sidebar {
+  width: 100%;
+  color: #707070;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.md__sidebar li:last-child {
+  border-bottom: none;
+  height: 5rem;
+}
+
+.md__sidebar > li {
+  width: 100%;
+  height: 5rem;
+  border-bottom: 0.1rem solid #f8f8f8;
+  overflow: hidden;
+}
+
+.md__display-hour {
+  display: block;
+  width: 3rem;
+  padding-top: 0.2rem;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.md__display-hour.is-hidden {
+  visibility: hidden;
+}
+
+.day-view .md__display-hour {
+  width: 7rem;
+  padding: 0.2rem 0.5rem 0;
+}
+
+.week-view .md__display-hour .ampm {
+  display: block;
+  font-size: 1.3rem;
+}
+
+.md__days-wrapper,
+.md__alldays-wrapper {
+  width: calc(100% - 3rem);
+  position: absolute;
+  offset-inline-end: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.md__days-wrapper {
+  height: 120rem;
+}
+
+.md__alldays-wrapper {
+  height: 100%;
+}
+
+.day-view .md__days-wrapper,
+.day-view .md__alldays-wrapper {
+  width: calc(100% - 7rem);
+}
+
+.md__days,
+.md__alldays {
+  /* it contains 15 days, view only shows 5 each time (so 300% width) */
+  width: 300%;
+  overflow: hidden;
+  height: 100%;
+}
+
+.md__day,
+.md__allday {
+  position: relative;
+  height: 100%;
+}
+html[dir="ltr"] .md__day,
+html[dir="ltr"] .md__allday {
+  float: left;
+}
+html[dir="rtl"] .md__day,
+html[dir="rtl"] .md__allday {
+  float: right;
+}
+
+.week-view .md__day,
+.week-view .md__allday {
+  width: 6.666%;
+}
+
+.day-view .md__day,
+.day-view .md__allday {
+  width: 33.333%;
+}
+
+.md__day {
+  border-inline-start: 0.1rem solid #f8f8f8;
+}
+
+.md__event,
+.md__event:focus,
+.md__event:active {
+  text-decoration: none;
+  outline: none;
+}
+
+.md__event {
+  position: relative;
+  display: block;
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.4rem;
+  width: 100%;
+  overflow: hidden;
+  padding: 0.5rem;
+}
+
+/* The content of event links should be actionable, the links work as buttons */
+.md__event > * {
+  pointer-events: none;
+}
+
+.day-view .md__event {
+  padding: 0.8rem 0.5rem;
+}
+
+.md__main .md__event {
+  position: absolute;
+}
+
+.md__event.is-allday {
+  margin-top: 0.1rem;
+}
+
+.day-view .md__event.is-allday {
+  height: 3.8rem;
+}
+
+.day-view .md__event.is-allday:only-of-type {
+  /* center it vertically if only one allday event */
+  margin-top: 0.6rem;
+}
+
+.md__event.is-allday:first-child {
+  margin-top: 0;
+}
+
+.week-view .md__event.has-overlaps {
+  /* avoid expanding event beyond desired width */
+  padding: 0;
+}
+
+.week-view .md__event.has-overlaps .md__event-title {
+  visibility: hidden;
+}
+
+.md__event-title,
+.md__event-location {
+  display: block;
+}
+
+.md__event .icon-calendar-alarm {
+  position: absolute;
+  top: 0.2rem;
+  offset-inline-end: 0;
+  width: 3rem;
+  height: 3rem;
+}
+
+/* since week view displays more events we hide some of the data */
+.week-view .md__event-location,
+.week-view .md__event .icon-calendar-alarm {
+  display: none;
+}
+
+.md__event-title {
+  min-height: 1.5rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #333;
+}
+
+.day-view .md__event-title,
+.md__event.is-partial .md__event-title,
+.md__event.is-partial .md__event-location {
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.md__event-location {
+  display: block;
+  top: 2.8rem;
+  min-height: 2.1rem;
+  padding-top: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #707070;
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+
+.md__event.is-partial .md__event-location {
+  top: unset;
+  min-height: unset;
+  padding-top: unset;
+}
+
+.md__event.many-overlaps .md__event-title,
+.md__event.many-overlaps .md__event-location {
+  display: none;
+}
+
+.md__event.is-partial {
+  padding-top: 0.4rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.md__event.is-partial-tiny,
+.md__event.is-partial-small {
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* location is never displayed on week view */
+.day_view .md__event.is-partial-tiny .md__event-title,
+.day_view .md__event.is-partial-tiny .md__event-location,
+.day_view .md__event.is-partial-small .md__event-title,
+.day_view .md__event.is-partial-small .md__event-location {
+  display: inline-block;
+  line-height: 1.6rem;
+  min-height: 0;
+  padding: 0;
+}
+
+/* location and title are displayed on same line but because of bidirectional
+ * content we can't use -moz-margin-end */
+.md__event.is-partial-tiny .md__event-title + .md__event-location,
+.md__event.is-partial-small .md__event-title + .md__event-location {
+  margin-inline-start: 0.85rem;
+}
+
+.md__event.is-partial-micro .md__event-title,
+.md__event.is-partial-micro .md__event-location {
+  visibility: hidden;
+}
+
+.md__event.is-partial-micro .icon-calendar-alarm,
+.md__event.is-partial-tiny .icon-calendar-alarm {
+  /* hide icon since we don't have enough space for it and using a different
+   * size looks weird (not consistent) */
+  display: none;
+}
+
+.day-view .md__event.has-alarms {
+  /* avoid text overlap with alarm icon */
+  padding-inline-end: 2.6rem;
+}
+
+.day-view .md__event.is-partial-tiny,
+.day-view .md__event.is-partial-micro {
+  /* these doesn't display alarm, so we can display more text */
+  padding-inline-end: 0.3rem;
+}
+
+.md__event.is-partial-small .icon-calendar-alarm {
+  /* center the icon vertically if partial hour since it looks better */
+  top: 50%;
+  transform: translateY(-56%);
+}
+
+/* current time */
+
+.md__current-time {
+  pointer-events: none;
+  display: none;
+  position: absolute;
+  width: 100%;
+  color: #008EAB;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  margin-top: -0.6rem;
+}
+
+.md__current-time.active {
+  display: block;
+}
+
+.md__current-time:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0.4rem 0 0.4rem;
+  border-inline-start-width: 0.6rem;
+  border-color: transparent;
+  border-inline-start-color: #008EAB;
+  /* z-index here so that only the arrow goes above the events, we want the
+   * line to be behind the event name and alarm icon */
+  z-index: 15;
+}
+
+.md__current-time:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0.6rem;
+  height: 0.1rem;
+  /* we use border-top instead of background-color to avoid rouding issues on
+   * high resolution devices */
+  border-top: 0.1rem solid #008EAB;
+}
+
+.week-view .md__current-time {
+  text-indent: 0.2rem;
+}
+
+.week-view .md__current-time:before {
+  offset-inline-start: 3rem;
+}
+
+.week-view .md__current-time:after {
+  width: calc(100% - 3rem);
+  offset-inline-start: 3rem;
+}
+
+.day-view .md__current-time {
+  text-indent: 2.2rem;
+}
+
+.day-view .md__current-time:before {
+  offset-inline-start: 7rem;
+}
+
+.day-view .md__current-time:after {
+  width: calc(100% - 7rem);
+  offset-inline-start: 7rem;
+}
+
+
+/* double tap */
+
+.md__add-event {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 5rem;
+  background-color: #00caf2;
+  transition-property: opacity;
+  transition-duration: 100ms;
+  /* top is overwritten with JS */
+  top: 0;
+}
+
+.md__allday-events .md__add-event {
+  /* on weekview we need to set height as 100% to avoid scrollbar */
+  height: 100%;
+}
+
+.md__add-event:active,
+.md__add-event:focus {
+  background-color: #b2f2ff;
+  outline: none;
+}
+
+.md__add-event:before {
+  color: #fff;
+  top: 50%;
+  offset-inline-start: 50%;
+  /* reset text-indent to show the "+" icon */
+  text-indent: 0;
+}
+html[dir="ltr"] .md__add-event:before { transform: translate(-50%, -50%); }
+html[dir="rtl"] .md__add-event:before { transform: translate(50%, -50%); }

gaia/apps/calendar/style/overlay.css

@@ -0,0 +1,18 @@
+#create-account-view,
+#advanced-settings-view,
+#modify-account-view {
+  z-index: -1;
+  visibility: hidden;
+}
+
+body[data-path="/select-preset/"] #create-account-view,
+body[data-path="/advanced-settings/"] #advanced-settings-view,
+body[data-path^="/create-account/"] #modify-account-view,
+body[data-path^="/update-account/"] #modify-account-view {
+  z-index: 1200;
+  visibility: visible;
+}
+
+.yahoo {
+  direction: ltr;
+}

gaia/apps/calendar/style/settings.css

@@ -0,0 +1,269 @@
+body[data-path^='/event'] #time-views,
+body[data-path^='/month'] #time-views,
+body[data-path^='/day'] #time-views,
+body[data-path^='/week'] #time-views {
+  z-index: 200;
+  transform: translateX(0%);
+  transition: transform var(--transition-duration) ease-in-out;
+}
+
+body[data-path^='/settings'] #settings {
+  z-index: 300;
+}
+
+/*
+Do not show pending candy stripe on settings drawer, since the
+sync icon already spins and having both animations hurts the
+animation performance.
+*/
+body[data-path^='/settings'].pending-operation #progress-indicator {
+  display: none;
+}
+
+#settings {
+  font-size: 1.7rem;
+  color: white;
+  background-color: transparent;
+  width: 100%;
+  z-index: 0;
+}
+
+#settings gaia-header {
+  background: transparent;
+}
+
+/*
+The text in the back button is just for accessibility concerns,
+not actually shown since the top header should be transparent.
+*/
+#settings .settings-back {
+  font-size: 0;
+}
+
+#settings .settings-shield {
+  position: absolute;
+  top: 5rem;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+.settings-drawer-visible #settings .settings-shield {
+  opacity: .6;
+}
+
+#settings .settings-drawer-container {
+  position: absolute;
+  top: 5rem;
+  width: 100%;
+  min-height: calc(100% - 19rem);
+  max-height: calc(100% - 9.5rem);
+  overflow: hidden;
+}
+
+#settings .settings-drawer {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: #5f5f5f;
+  background-color: #f4f4f4;
+
+  transform: translateY(-100%);
+  transition-property: transform;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+.settings-drawer-visible #settings .settings-drawer {
+  transform: translateY(0);
+}
+
+#settings .calendars li:active,
+#settings li:active {
+  color: white;
+  background-color: #00caf2;
+}
+
+#settings ol.calendars {
+  height: calc(100% - 4.5rem);
+  overflow-y: scroll;
+  background-color: #eeeeee;
+}
+
+#settings .calendars label.name {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: calc(100% - 2rem);
+  height: 100%;
+  /* !important needed to override component scoped style to match legacy styles */
+  font-size: 1.7rem !important;
+  /* TODO: Migrate to gaia-theme */
+  color: #606060;
+}
+
+#settings .calendars .error label {
+  background: transparent url('icons/accountwarning.png') no-repeat;
+  background-size: 2rem auto;
+}
+html[dir="ltr"] #settings .calendars .error label {
+  background-position: left 2.3rem center;
+  padding-left: 4.5rem;
+}
+html[dir="rtl"] #settings .calendars .error label {
+  background-position: right 2.3rem center;
+  padding-right: 4.5rem;
+}
+
+#settings .calendars label {
+  display: block;
+  height: 100%;
+  width: 100%;
+  padding: 0 3rem;
+  -moz-user-select: none;
+}
+
+#settings .calendars li {
+  position: relative;
+  width: 100%;
+  height: 5rem;
+  line-height: 5rem;
+  border-bottom: 0.1rem solid #dfdfdf;
+}
+
+#settings .calendars .icon-calendar-dot:before {
+  font-size: 5rem;
+  line-height: 5rem;
+  margin-inline-start: -1rem;
+}
+
+#settings > menu {
+  position: absolute;
+  bottom: 0;
+  height: 4rem;
+  padding: 0.5rem 0;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+#settings [role="tablist"] {
+  position: absolute;
+  bottom: 0;
+}
+
+#settings [role="tablist"] li {
+  border-inline-start: 0.1rem solid #e5e5e5;
+  position: relative;
+}
+
+#settings [role="tablist"] li:first-child {
+  border-inline-start: 0;
+}
+
+#settings [role="tablist"].noaccount .settings {
+  width: 100%;
+}
+
+#settings [role="tablist"] .settings:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4.5rem;
+  background: url("icons/settings_icon.png") no-repeat 50% 50% / 3rem auto;
+}
+
+#settings [role="tablist"] .settings:active:after {
+  background-image: url("icons/settings_icon_press.png");
+}
+
+#settings [role="tablist"] .sync:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4.5rem;
+}
+
+#settings [role="tablist"] .sync .icon {
+  display: block;
+  width: 3rem;
+  height: 4.5rem;
+  margin: 0 auto;
+  background: url("icons/refresh.png") no-repeat 50% 50% / 3rem auto;
+}
+
+#settings [role="tablist"] .sync:active .icon {
+  background-image: url("icons/refresh_press.png");
+}
+
+.pending-operation #settings [role="tablist"] .sync .icon {
+  animation: 0.9s msg-refresh-rotate infinite steps(30);
+}
+
+@keyframes msg-refresh-rotate {
+  from { transform: rotate(1deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.sync-progress {
+  visibility: hidden;
+}
+
+.sync-progress.syncing {
+  visibility: visible;
+}
+
+#settings [role="tablist"].noaccount .sync {
+  display: none;
+}
+
+#settings .calendars > li label {
+  text-transform: none;
+}
+
+#settings .calendars gaia-checkbox {
+  display: none;
+}
+
+#settings .calendars gaia-checkbox label,
+#settings .calendars gaia-checkbox[checked] label:after {
+  padding-top: 1rem;
+}
+
+#settings .calendars gaia-checkbox[checked] label:after {
+  content: ' ';
+  position: absolute;
+  width: 2.2rem;
+  height: 1.9rem;
+  background: transparent url('/style/icons/check_mark_on.png') no-repeat center 1.2rem / 1.4rem;
+}
+
+#settings .calendars li:active gaia-checkbox[checked] label:after {
+  background: transparent url('/style/icons/check_mark_press.png') no-repeat center 1.2rem / 1.4rem;
+}
+
+#settings .calendars gaia-checkbox label:after {
+  top: 0.7rem;
+  background: none;
+  margin: 0;
+}
+html[dir="ltr"] #settings .calendars gaia-checkbox label:after {
+  left: auto;
+  right: 1.3rem;
+}
+html[dir="rtl"] #settings .calendars gaia-checkbox label:after {
+  left: 1.3rem;
+  right: auto;
+}

gaia/apps/calendar/style/ui.css

@@ -0,0 +1,342 @@
+/* loading */
+
+body.loading {
+  visibility: hidden;
+}
+
+/* general elements */
+
+a:active {
+  border: none;
+}
+
+p {
+  font-size: 1.5rem;
+  line-height: 130%;
+}
+
+menu[type="tablist"] a {
+  text-decoration: none;
+}
+
+ol.link-list label,
+ol.link-list a {
+  display: block;
+  min-height: 5.5rem;
+  line-height: 5.5rem;
+  font-size: 1.7rem;
+  padding: 0 1.5rem;
+  border-bottom: 0.1rem solid #C5C5C5;
+  text-decoration: none;
+  color: #000;
+  margin: 0 1.5rem;
+}
+
+ol.link-list li:last-child label,
+ol.link-list li:only-child label,
+ol.link-list li:last-child a,
+ol.link-list li:only-child a {
+  border-bottom: 0;
+}
+
+#today .icon-calendar-today {
+  font-size: 1.4rem;
+}
+
+#today .icon-calendar-today:before {
+  position: absolute;
+  font-size: 3rem;
+  line-height: 4.2rem;
+  offset-inline-start: 50%;
+  transform: translateX(-52%); /* BiDi-proof */
+}
+
+#time-views {
+  visibility: hidden;
+}
+
+body[data-path="/month/"] #time-views,
+body[data-path="/week/"] #time-views,
+body[data-path="/day/"] #time-views,
+body[data-path="/settings/"] #time-views {
+  visibility: visible;
+}
+
+#view-selector > .today {
+  border-inline-end: 0.1rem solid #F2F2F2;
+}
+
+#view-selector a[aria-selected="true"] {
+  color: #00aacc;
+  font-weight: 500;
+}
+
+body[data-path="/month/"] #view-selector > .month a:after,
+body[data-path="/week/"] #view-selector > .week a:after,
+body[data-path="/day/"] #view-selector > .day > a:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 0.3rem);
+  border-bottom: 0.3rem solid #00aacc;
+}
+
+body[data-path="/month/"] #view-selector > .month a:active,
+body[data-path="/week/"] #view-selector > .week a:active,
+body[data-path="/day/"] #view-selector > .day > a:active {
+  color: #5F5F5F;
+}
+
+.bb-tablist > li > a:after,
+.bb-tablist > li > button:after {
+  display: block !important;
+}
+
+/* view management */
+
+.fullscreen-view {
+  display: none;
+}
+
+.fullscreen-view.active {
+  display: block;
+}
+
+#time-views {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+#time-views > section {
+  display: none;
+  position: relative;
+  height: calc(100% - 9.5rem);
+  background: #fff;
+}
+
+#time-views > section.active {
+  display: block;
+}
+
+#time-header [type="toolbar"] {
+  opacity: 1;
+  transition: opacity var(--transition-duration) ease;
+}
+
+.settings-drawer-visible #time-header [type="toolbar"] {
+  opacity: 0;
+}
+
+/* view loading */
+
+.during-progress {
+  display: none;
+}
+
+#views .in-progress .during-progress {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  z-index: 200;
+  background-color: #CCC;
+  opacity: 0.5;
+  text-align: center;
+}
+
+#progress-indicator {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 0.3rem;
+  border: none;
+  overflow: hidden;
+  z-index: 1000;
+  display: none;
+}
+
+.pending-operation #progress-indicator {
+  display: block
+}
+
+#throbber {
+  height: 5.2rem;
+  background: url('ui/progress.png') repeat-x;
+  background-size: 32rem;
+  animation: .5s throb infinite steps(12);
+}
+html[dir="ltr"] #throbber { background-position: left bottom; }
+html[dir="rtl"] #throbber { background-position: right bottom; }
+
+@keyframes throb {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, -4.8rem);
+  }
+}
+
+#advanced-settings-view section.content {
+  height: calc(100% - 5rem);
+  overflow-y: scroll;
+}
+
+#advanced-settings-view .create-account-item {
+  text-align: center;
+}
+
+#advanced-settings-view button {
+  margin: 1.1rem auto;
+  width: calc(100% - 3rem);
+}
+
+#advanced-settings-view .settings-list label {
+  height: auto;
+  margin: 0 1.5rem;
+  padding: 0.5rem 0 1.5rem;
+  line-height: 100%;
+}
+
+#advanced-settings-view .settings-list label span {
+  display: block;
+  margin-bottom: 0;
+  font-size: 1.9rem;
+  line-height: 3.3rem;
+  text-align: start;
+}
+
+#advanced-settings-view .settings-list label span:first-child {
+  padding-inline-start: 1.5rem;
+}
+
+#advanced-settings-view .settings-list label,
+#advanced-settings-view .account-list a {
+  text-transform: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: calc(100% - 3rem);
+}
+
+/* For the account listing, want the final child to still have
+   a bottom border to separate it from the Add Account button */
+#advanced-settings-view .account-list li:last-child label,
+#advanced-settings-view .account-list li:only-child label,
+#advanced-settings-view .account-list li:last-child a,
+#advanced-settings-view .account-list li:only-child a {
+  border-bottom: 0.1rem solid #C5C5C5;
+}
+
+#advanced-settings-view .account-list .error a {
+  background: transparent url('icons/accountwarning.png') no-repeat;
+  background-size: 2rem auto;
+}
+html[dir="ltr"] #advanced-settings-view .account-list .error a {
+  background-position: left;
+  padding-left: 2.7rem;
+}
+html[dir="rtl"] #advanced-settings-view .account-list .error a {
+  background-position: right;
+  padding-right: 2.7rem;
+}
+
+#advanced-settings-view .preset:after {
+  content: ' - '
+}
+
+#advanced-settings-view .user {
+  width: 50%;
+}
+
+/* create account view */
+#create-account-view > p {
+  margin: 0 2rem;
+}
+
+.fullscreen-view.active {
+  visibility: visible;
+}
+
+.fullscreen-view {
+  z-index: 1000;
+  overflow: hidden;
+  visibility: hidden;
+  /* completely override other views */
+  background-color: #FFFFFF;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%
+}
+
+/* [BB][tabs]*/
+#view-selector {
+  position: absolute;
+  bottom: 0;
+  height: 4.5rem;
+}
+
+#view-selector > li > a {
+  outline: none;
+}
+
+@keyframes fade-status {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+section[role="status"] {
+  pointer-events: none;
+  display: none;
+}
+
+section[role="status"].active {
+  display: block;
+  animation-name: fade-status;
+  animation-delay: 2.5s;
+  animation-duration: 1.5s;
+}
+
+/* Hide on initial render to prevent flashing */
+#settings {
+  visibility: hidden;
+}
+
+body[data-path^='/settings'] #settings {
+  visibility: visible;
+}
+
+/* these settings avoid conflicts with the shared icons */
+.gaia-icon {
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+}
+
+/* for accessiblity only, fonts should not be visible */
+gaia-header > a > span {
+  font-size: 0;
+}
+
+/* these icons uses a 32px base grid so we need to adjust the font size
+ * (shared font uses a 3rem base font-size) */
+.icon-calendar-alarm:before,
+.icon-calendar-bullet:before,
+.icon-calendar-dot:before,
+.icon-calendar-today:before,
+.icon-calendar-eventalarm:before {
+  font-size: 3.2rem;
+}