cms/resources/css/components/blueprints.css at a1ef31bba039a3d60a27eff26ca579a712287b9e · statamic/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* ==========================================================================
   BLUEPRINTS
   ========================================================================== */

.blueprint-section {
    @apply min-h-40 w-full p-2 outline-hidden;

    &.draggable-source--is-dragging {
        opacity: 0.5;
    }

    &.draggable-mirror .blueprint-section-card {
        @apply shadow-lg;
    }
}

.blueprint-drag-handle {
    @apply w-4 flex-none cursor-move dark:border-dark-500 ltr:border-r rtl:border-l;
    background: rgba(0, 0, 0, 0.01) url('../../svg/icons/light/drag-dots.svg') 50% 50% no-repeat;
    background-size: 7px 17px;
}

.blueprint-section-field {
    @apply relative z-10 mb-2 px-1 text-sm outline-hidden;

    .blueprint-section-field-inner {
        @apply relative z-10 flex rounded-sm border bg-gray-200 shadow-sm outline-hidden;
        @apply dark:border-none dark:bg-dark-600 dark:shadow-lg;
    }

    &.draggable-source--is-dragging {
        opacity: 0.5;
    }

    &.draggable-mirror .blueprint-section-field-inner {
        @apply shadow-lg;
    }
}

.blueprint-section-import {
    &:before {
        content: '';
        @apply absolute rounded-sm border bg-gray-200 shadow-sm;
        top: -3px;
        left: 6px;
        right: 0;
        bottom: 3px;
        z-index: 1;

        [dir='rtl'] & {
            left: 0;
            right: 6px;
        }

        .dark & {
            @apply border-dark-300 bg-dark-550;
        }
    }
}

/*  These are applied here rather than the utility classes so they don't override */
/*  the inline widths defined by the draggable library. */
.blueprint-section-field-w-1\/4 {
    @apply w-1/4;
}
.blueprint-section-field-w-1\/3 {
    @apply w-1/3;
}
.blueprint-section-field-w-1\/2 {
    @apply w-1/2;
}
.blueprint-section-field-w-2\/3 {
    @apply w-2/3;
}
.blueprint-section-field-w-3\/4 {
    @apply w-3/4;
}
.blueprint-section-field-w-full {
    @apply w-full;
}

.blueprint-add-section-container {
    @apply flex min-h-40 p-2;

    .draggable-container--is-dragging & {
        display: none;
    }
}

.blueprint-add-section-button {
    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-dark-200 dark:text-dark-150;

    &:hover {
        @apply border-gray text-gray-950 dark:border-dark-175 dark:text-dark-100;
    }

    .blueprint-section-draggable-zone {
        @apply absolute inset-0 p-4;
    }

    .blueprint-section-field {
        @apply bg-white;
    }
}

.fieldtype-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}