@cratis/showrunner.boxoffice.react 0.0.0-stage → 1.11.0

package/styles.css

@@ -0,0 +1,166 @@
+/* Copyright (c) Cratis. All rights reserved.
+   Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/*
+ * The styles of the Box Office components. Import once, after the Cratis Components stylesheets:
+ *   @import '@cratis/showrunner.boxoffice.react/styles';
+ * Every color comes from the --cratis-* tokens, so the Cratis Components theme and dark mode apply.
+ */
+
+.boxoffice-banner,
+.boxoffice-no-license,
+.boxoffice-requires-module {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.boxoffice-banner > :first-child,
+.boxoffice-no-license > :first-child,
+.boxoffice-requires-module > :first-child {
+    flex: 1 1 20rem;
+}
+
+.boxoffice-banner__text,
+.boxoffice-requires-module__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.boxoffice-requires-module__actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Pages */
+
+.boxoffice-seats,
+.boxoffice-usage,
+.boxoffice-plan {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.boxoffice-page__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.boxoffice-page__title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--cratis-text-color);
+}
+
+.boxoffice-seats__summary,
+.boxoffice-plan__summary {
+    margin: 0;
+    color: var(--cratis-text-color-secondary);
+}
+
+.boxoffice-seat-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.boxoffice-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--cratis-text-color);
+}
+
+/* Usage */
+
+.boxoffice-usage__meter,
+.boxoffice-usage__used {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: flex-start;
+}
+
+.boxoffice-usage__period,
+.boxoffice-usage__overage {
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.8125rem;
+}
+
+.boxoffice-usage__used .cratis-progress-bar,
+.boxoffice-usage__used [role='progressbar'] {
+    min-width: 12rem;
+}
+
+/* Plan */
+
+.boxoffice-plan__heading {
+    margin: 0.5rem 0 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--cratis-text-color);
+}
+
+.boxoffice-plan__empty {
+    margin: 0;
+    color: var(--cratis-text-color-secondary);
+}
+
+.boxoffice-plan__modules,
+.boxoffice-plan__offers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.boxoffice-plan__module {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+}
+
+.boxoffice-plan__name {
+    flex: 1 1 auto;
+    font-weight: 600;
+}
+
+.boxoffice-plan__until {
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.875rem;
+}
+
+.boxoffice-plan__offer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+}
+
+.boxoffice-plan__offer-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.875rem;
+}
+
+.boxoffice-plan__offer-text strong {
+    color: var(--cratis-text-color);
+    font-size: 1rem;
+}