Skip to content

Commit

Permalink
imrpove base style
Browse files Browse the repository at this point in the history
  • Loading branch information
alicanerdurmaz committed Jun 3, 2024
1 parent 9686c75 commit 7aec3be
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 216 deletions.
154 changes: 85 additions & 69 deletions refine-nextjs/plugins/_base/src/styles/global.css
Original file line number Diff line number Diff line change
@@ -1,88 +1,104 @@
body {
margin: 0px;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

table {
border-spacing: 0;
border: 1px solid black;
}
/*
* These styles were added to improve the appearance of the example pages.
* It is safe to delete them, and they are not intended to be used by Refine components.
*/
@layer components {
input {
@apply border border-gray-300 rounded-sm;
}

table th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
input[type="submit"] {
@apply bg-[#EFEFEF];
}

table tr:last-child td {
border-bottom: 0;
}
button {
@apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
}

table th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
h1 {
@apply text-2xl font-bold my-6;
}

table th:last-child,
td:last-child {
border-right: 0;
}
ul {
@apply list-disc my-4;
}

.layout {
display: flex;
gap: 16px;
}
a {
@apply text-blue-700 underline;
}

@media screen and (max-width: 751px) {
.layout {
display: block;
label {
@apply text-sm font-medium;
}
}

.layout .content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
body {
@apply m-0;
}

.breadcrumb {
display: flex;
gap: 24px;
list-style-type: "/ ";
padding: 8px 16px;
border-bottom: 1px solid lightgray;
}
table {
@apply border border-black border-collapse;
}

.breadcrumb a {
color: blue;
text-decoration: none;
}
table th,
table td {
@apply m-0 p-2 border-b border-r border-black;
}

.menu {
flex-shrink: 0;
padding: 8px 16px;
border-right: 1px solid lightgray;
}
table tr:last-child td {
@apply border-b-0;
}

.menu a {
color: black;
}
table th:last-child,
table td:last-child {
@apply border-r-0;
}

.menu .active {
font-weight: bold;
}
.layout {
@apply flex gap-4;
}

@media (max-width: 751px) {
.layout {
@apply block;
}
}

.layout .content {
@apply flex flex-col flex-grow;
}

.breadcrumb {
@apply flex gap-6 p-2 px-4 border-b border-gray-300;
list-style-type: "/ ";
}

.breadcrumb a {
@apply text-blue-700 no-underline;
}

@media screen and (max-width: 751px) {
.menu {
border-right: none;
border-bottom: 1px solid lightgray;
@apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
}

.menu a {
@apply text-black;
}
}

.menu ul {
padding-left: 16px;
.menu .active {
@apply font-bold;
}

@media (max-width: 751px) {
.menu {
@apply border-r-0 border-b border-gray-300;
}
}

.menu ul {
@apply pl-4;
}
}
3 changes: 0 additions & 3 deletions refine-nextjs/plugins/tailwindcss/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,4 @@ module.exports = {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false,
},
};
154 changes: 85 additions & 69 deletions refine-remix/plugins/_base/app/global.css
Original file line number Diff line number Diff line change
@@ -1,88 +1,104 @@
body {
margin: 0px;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

table {
border-spacing: 0;
border: 1px solid black;
}
/*
* These styles were added to improve the appearance of the example pages.
* It is safe to delete them, and they are not intended to be used by Refine components.
*/
@layer components {
input {
@apply border border-gray-300 rounded-sm;
}

table th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
input[type="submit"] {
@apply bg-[#EFEFEF];
}

table tr:last-child td {
border-bottom: 0;
}
button {
@apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
}

table th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
h1 {
@apply text-2xl font-bold my-6;
}

table th:last-child,
td:last-child {
border-right: 0;
}
ul {
@apply list-disc my-4;
}

.layout {
display: flex;
gap: 16px;
}
a {
@apply text-blue-700 underline;
}

@media screen and (max-width: 751px) {
.layout {
display: block;
label {
@apply text-sm font-medium;
}
}

.layout .content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
body {
@apply m-0;
}

.breadcrumb {
display: flex;
gap: 24px;
list-style-type: "/ ";
padding: 8px 16px;
border-bottom: 1px solid lightgray;
}
table {
@apply border border-black border-collapse;
}

.breadcrumb a {
color: blue;
text-decoration: none;
}
table th,
table td {
@apply m-0 p-2 border-b border-r border-black;
}

.menu {
flex-shrink: 0;
padding: 8px 16px;
border-right: 1px solid lightgray;
}
table tr:last-child td {
@apply border-b-0;
}

.menu a {
color: black;
}
table th:last-child,
table td:last-child {
@apply border-r-0;
}

.menu .active {
font-weight: bold;
}
.layout {
@apply flex gap-4;
}

@media (max-width: 751px) {
.layout {
@apply block;
}
}

.layout .content {
@apply flex flex-col flex-grow;
}

.breadcrumb {
@apply flex gap-6 p-2 px-4 border-b border-gray-300;
list-style-type: "/ ";
}

.breadcrumb a {
@apply text-blue-700 no-underline;
}

@media screen and (max-width: 751px) {
.menu {
border-right: none;
border-bottom: 1px solid lightgray;
@apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
}

.menu a {
@apply text-black;
}
}

.menu ul {
padding-left: 16px;
.menu .active {
@apply font-bold;
}

@media (max-width: 751px) {
.menu {
@apply border-r-0 border-b border-gray-300;
}
}

.menu ul {
@apply pl-4;
}
}
3 changes: 0 additions & 3 deletions refine-remix/plugins/tailwindcss/tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,4 @@ export default {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false,
},
} satisfies Config;
Loading

0 comments on commit 7aec3be

Please sign in to comment.